Creating a Custom Colour Scheme CSS Snippet - damiankorcz/Prism-Theme GitHub Wiki
🤔 How do I enable this feature?
Starting with the Prism 3.2.1 update, there is now an option to select the Custom
option in the Colour Schemes property in Style Settings, which allows you to provide your own colors using a CSS snippet.
Examples of ported color pallets below. To use them download the .css
file and put it in *your vault*/.obsidian/snippets
. Remember to enable it in Obsidian. More about this in the official Obsidian help page: https://help.obsidian.md/Extending+Obsidian/CSS+snippets
The option can be selected in Style Settings -> Prism Theme -> Appearance -> Accent, Color Schemes and Style -> Light / Dark Theme -> Color Scheme
.
🏳️🌈 Creating your own Colour Schemes
Use the following selectors in a CSS Snippet to start customising the variables:
.prism-theme.theme-light.pt-color-scheme-custom-lt {
/* Your customised variables here */
}
.prism-theme.theme-dark.pt-color-scheme-custom-dt {
/* Your customised variables here */
}
Native Prism Colour Schemes
Bird Colour Scheme - Swan / Raven
Coffee Colour Scheme - Latte / Mocha
Flower Colour Scheme - Periwinkle / Indigo
Tree Colour Scheme - Pistachio / Pine
Fruit Colour Scheme - Peach / Cherry
Custom Ported Colour Schemes
CSS Snippet | Reference |
---|---|
Solarized | Link |
⚠️ Note:
By default, the Custom
option uses Bird Colour Scheme - Swan / Raven variables as the base to prevent issues such as this one: #158
The Custom
colour scheme you add with a CSS Snippet function as an override for those values.
Pay close attention to the comments in the files above to understand what the variables are used for.
🕳️🐇 Further Customisation
If you want to dive deeper into customising what the colours (and other variables) are used for around the theme, you can take a look into the file below and see what native variables I overwrite and what custom variables I use around the theme: Core Prism Variables
You can also search the repository and it's files for specific variables and see where exactly they are used. This can be done directly with the search option on Github or in your text editor of choice if you download the repository.