Add secondary color theme or custom color theme

Questions
1

Hello,

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”

Regards,

2

https://framework7.io/docs/color-themes.html#generate-color-theme

3

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…

4

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-color-red,
.ripple-red {
  --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
}
1 Like
5

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