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.