Custom color theme

Hello

I know I can use class names like color-theme-[color] (balck, green, orange, …) but how can I use a custom color?

Thanks!

1 Like

Your can add your custom colors to the config file and rebuild the project. It is described here http://framework7.io/docs/custom-build.html#custom-build

First I want to say thank you this is an amazing framework.

Would be great to be able to extend this without rebuilding a custom build as otherwise it breaks when we want to do future upgrades.

Unless there is a way and I missed it in documentation?

http://framework7.io/docs/color-themes.html#custom-color-theme

Thanks! I should have been way more specific.

I would like to be able to hot swap themes like we have with the Dark theme and create multiple custom themes that then the user can choose.

Then just assign those variables to some custom css classes, and then just add or remove required classes from html element

Maybe I am missing something, but that only changes color tints.

So say I want to make it actually change other elements like going to a Sepia theme with yellowish background.

Is the best practice to just overwrite the variables?

Ideally should be able to make a custom CSS and load that in then it becomes available as part of a ‘theme’ variable rather than css override?

Yes, the best practise would be to just override variables. You can customize, i think, about ~90% of everything with variables. For example, if you need to load theme with different page bg color, why to load whole CSS if it can be just single variable