Color Helper Classes without specify a color

Hi, I think it might be useful to have classes that allow you to apply the color of the theme, without having to specify that color each time.

For example I apply the class “color-theme-red” on my body, and then, anywhere in the application, I can use classes like “text-color-theme” on my text to make it red, or “bg-color-theme” to apply a red background on a element.

This would then allow to change the entire theme of the application just by changing the body class. What do you think of that? :thinking:

from 4.0 you can do it like this:


.text-color-theme {
  --f7-theme-color-text-color: var(--f7-theme-color);
.bg-color-theme {
  --f7-theme-color-bg-color: var(--f7-theme-color);


<body class="color-theme-red">
  <p class="text-color-theme"><p>
  <div class="bg-color-theme"><div>

easy (thanks to vladimir)

this also will be enough (no css)

<body class="color-theme-red">
  <p class="text-color-primary"><p>
  <div class="bg-color-primary"><div>