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 doesn't load any native colour variables, allowing you to provide your own using a CSS snippet. To create a CSS Snippet follow the official Obsidian help page regarding it: LINK

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 */
}

Examples of the native Colour Schemes and the currently available variables can be found here: 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

Note: You will have to provide all of the variables listed in the native Colour Schemes for your Custom CSS Snippet since none of them are provided with the Custom option selected. 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.