Add secondary color theme or custom color theme


Just asking if there is an easy way to add a new extra color theme (not the primary)

something that generates new extra color themes classes like “.text-color-secondary”


Thanks for reply,
Unfortunately this is not what i need,
This generates the css you need to set your primary theme color.
I already have my primary app theme color set, I am looking if there is a way to generated a “Secondary” color theme to use it with no primary buttons, preloaders, etc… just like you have red, green etc…

Then you need to copy the CSS rules and replace the hex colors, and put a new name.
I don’t know another way.
Instead to overrides you can create a new one.

  Color Overrides
  ==================== */
.color-red {
  --f7-theme-color: #ff3b30;
  --f7-theme-color-rgb: 255, 59, 48;
  --f7-theme-color-shade: #ff1407;
  --f7-theme-color-tint: #ff6259;
.text-color-red {
  --f7-theme-color-text-color: #ff3b30;
.bg-color-red {
  --f7-theme-color-bg-color: #ff3b30;
.border-color-red {
  --f7-theme-color-border-color: #ff3b30;
.ripple-red {
  --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
1 Like

Thank you @Fernando_Romero
I think this is a good start,