Howto create a layout similar to light/dark?

Questions
1

Hi,
my app runs on android/ios with f7 vue (cordova). It works with the preset light/dark layout themes. And i have this layout changer inside similar to:

const theme = (wantDark) ? ‘dark’ : ‘light’;
app.root.removeClass(‘theme-dark theme-light’).addClass(theme-${theme});

But now i want another theme (blue) which basically sets the backgrounds (for sure the buttons also needs to be adapted). Im UNSURE what is the best way to reach this. Can y help me?

Do i need to go over every place with “theme-dark” copy the css code, and change this resulting a new css file i can then import?
I also saw some color-theme change scripts https://framework7.io/docs/color-themes.html#generate-color-theme but first it doesnt work for me (=no change), and second i think, this will not change the backgrounds, no?
Do i need to go with something like “aurora” and again copy/adapt the css rules?

2

I think you can use theme-dark class with one additional custom class. And with that extra class you will overwrite dark theme variables/styles.

3

Thanks!

I build a “blue.css” to change mainly the backgrounds. Was some work, but now it looks nice (not perfect).

1 Like