Color Themes
Default Theme Color
Default theme color is set to the following:
#007aff
Colors
Framework7 comes with 15 ready to use additional color themes.
red | #ff3b30 |
green | #4cd964 |
blue | #2196f3 |
pink | #ff2d55 |
yellow | #ffcc00 |
orange | #ff9500 |
purple | #9c27b0 |
deeppurple | #673ab7 |
lightblue | #5ac8fa |
teal | #009688 |
lime | #cddc39 |
deeporange | #ff6b22 |
gray | #8e8e93 |
white | #ffffff |
black | #000000 |
Apply Color Themes
It is easy to apply color themes. All you need is just to add color-theme-[color]
class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:
<body class="color-theme-red">
...
</body>
<div class="page color-theme-green">
...
</div>
<div class="list-block color-theme-pink">
...
</div>
<div class="navbar color-theme-orange">
...
</div>
<div class="segmented color-theme-yellow">
...
</div>
Note, that applied color theme affects only interractive elements such as links, buttons, form elements, icons. It doesn’t change basic text color or background colors on other blocks.
Dark Theme
Framework7 also has additional dark theme layout. To apply dark theme we need to add theme-dark
class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:
<html class="theme-dark">
...
</html>
<body class="theme-dark">
...
</body>
<div class="page theme-dark">
...
</div>
<div class="list-block theme-dark">
...
</div>
Helper Classes
There are also additional helper classes that could be used without/outside color themes:
color-[color]
- if you want to change color of individual button, link or icon, for example:<a class="button color-red">Red button</a>
text-color-[color]
- if you want to change text color of required element:<p class="text-color-red">Red color text</p>
bg-color-[color]
- if you want quickly to set predefined background color on some block or element:<span class="badge bg-color-pink">14</span> - pink badge
border-color-[color]
- if you want to set predefined border color:<div class="button border-color-red">...</div>
And of course, you can mix these helper classes:
<a class="button bg-color-blue text-color-white border-color-gray">...</a>
Primary Color Classes
Helper classes support additional primary
color which is equal to context color theme.
text-color-primary
- to change text color of element to theme color.bg-color-primary
- to change background color of element to theme color.border-color-primary
- to change border color of element to theme color.
Custom Color Theme
To set custom color theme, we need to specify few CSS variables:
--f7-theme-color
— HEX value of theme color.--f7-theme-color-shade
— 8% darken theme color. Required, for example, for pressed buttons state.--f7-theme-color-tint
— 8% lighten theme color. Required, for example, for pressed buttons state.--f7-theme-color-rgb
— RGB value of theme color. Required for semitransparent elements.
For example, if custom theme color is #f00 (red), we just need to add following variables to our CSS:
:root {
--f7-theme-color: #f00;
--f7-theme-color-shade: #d60000;
--f7-theme-color-tint: #ff2929;
--f7-theme-color-rgb: 255, 0, 0;
}
There is also new colorThemeCSSProperties util that can generate required CSS variables:
/* Generate CSS variables for red theme color */
app.utils.colorThemeCSSProperties('#f00');
It will return the following object:
{
"--f7-theme-color": "#f00",
"--f7-theme-color-rgb": "255, 0, 0",
"--f7-theme-color-shade": "#d60000",
"--f7-theme-color-tint": "#ff2929"
}
CSS Variables
/*====================
Primary Theme
==================== */
.text-color-primary {
--f7-theme-color-text-color: var(--f7-theme-color);
}
.bg-color-primary {
--f7-theme-color-bg-color: var(--f7-theme-color);
}
.border-color-primary {
--f7-theme-color-border-color: var(--f7-theme-color);
}
.ripple-color-primary {
--f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
}
/*====================
Colors List
==================== */
:root {
--f7-color-red: #ff3b30;
--f7-color-red-rgb: 255, 59, 48;
--f7-color-red-shade: #ff1407;
--f7-color-red-tint: #ff6259;
--f7-color-green: #4cd964;
--f7-color-green-rgb: 76, 217, 100;
--f7-color-green-shade: #2cd048;
--f7-color-green-tint: #6ee081;
--f7-color-blue: #2196f3;
--f7-color-blue-rgb: 33, 150, 243;
--f7-color-blue-shade: #0c82df;
--f7-color-blue-tint: #48a8f5;
--f7-color-pink: #ff2d55;
--f7-color-pink-rgb: 255, 45, 85;
--f7-color-pink-shade: #ff0434;
--f7-color-pink-tint: #ff5676;
--f7-color-yellow: #ffcc00;
--f7-color-yellow-rgb: 255, 204, 0;
--f7-color-yellow-shade: #d6ab00;
--f7-color-yellow-tint: #ffd429;
--f7-color-orange: #ff9500;
--f7-color-orange-rgb: 255, 149, 0;
--f7-color-orange-shade: #d67d00;
--f7-color-orange-tint: #ffa629;
--f7-color-purple: #9c27b0;
--f7-color-purple-rgb: 156, 39, 176;
--f7-color-purple-shade: #7e208f;
--f7-color-purple-tint: #b92fd1;
--f7-color-deeppurple: #673ab7;
--f7-color-deeppurple-rgb: 103, 58, 183;
--f7-color-deeppurple-shade: #563098;
--f7-color-deeppurple-tint: #7c52c8;
--f7-color-lightblue: #5ac8fa;
--f7-color-lightblue-rgb: 90, 200, 250;
--f7-color-lightblue-shade: #32bbf9;
--f7-color-lightblue-tint: #82d5fb;
--f7-color-teal: #009688;
--f7-color-teal-rgb: 0, 150, 136;
--f7-color-teal-shade: #006d63;
--f7-color-teal-tint: #00bfad;
--f7-color-lime: #cddc39;
--f7-color-lime-rgb: 205, 220, 57;
--f7-color-lime-shade: #bac923;
--f7-color-lime-tint: #d6e25c;
--f7-color-deeporange: #ff6b22;
--f7-color-deeporange-rgb: 255, 107, 34;
--f7-color-deeporange-shade: #f85200;
--f7-color-deeporange-tint: #ff864b;
--f7-color-gray: #8e8e93;
--f7-color-gray-rgb: 142, 142, 147;
--f7-color-gray-shade: #79797f;
--f7-color-gray-tint: #a3a3a7;
--f7-color-white: #ffffff;
--f7-color-white-rgb: 255, 255, 255;
--f7-color-white-shade: #ebebeb;
--f7-color-white-tint: #ffffff;
--f7-color-black: #000000;
--f7-color-black-rgb: 0, 0, 0;
--f7-color-black-shade: #000000;
--f7-color-black-tint: #141414;
}
/*====================
Color Themes
==================== */
.color-theme-red {
--f7-theme-color: #ff3b30;
--f7-theme-color-rgb: 255, 59, 48;
--f7-theme-color-shade: #ff1407;
--f7-theme-color-tint: #ff6259;
}
.color-theme-green {
--f7-theme-color: #4cd964;
--f7-theme-color-rgb: 76, 217, 100;
--f7-theme-color-shade: #2cd048;
--f7-theme-color-tint: #6ee081;
}
.color-theme-blue {
--f7-theme-color: #2196f3;
--f7-theme-color-rgb: 33, 150, 243;
--f7-theme-color-shade: #0c82df;
--f7-theme-color-tint: #48a8f5;
}
.color-theme-pink {
--f7-theme-color: #ff2d55;
--f7-theme-color-rgb: 255, 45, 85;
--f7-theme-color-shade: #ff0434;
--f7-theme-color-tint: #ff5676;
}
.color-theme-yellow {
--f7-theme-color: #ffcc00;
--f7-theme-color-rgb: 255, 204, 0;
--f7-theme-color-shade: #d6ab00;
--f7-theme-color-tint: #ffd429;
}
.color-theme-orange {
--f7-theme-color: #ff9500;
--f7-theme-color-rgb: 255, 149, 0;
--f7-theme-color-shade: #d67d00;
--f7-theme-color-tint: #ffa629;
}
.color-theme-purple {
--f7-theme-color: #9c27b0;
--f7-theme-color-rgb: 156, 39, 176;
--f7-theme-color-shade: #7e208f;
--f7-theme-color-tint: #b92fd1;
}
.color-theme-deeppurple {
--f7-theme-color: #673ab7;
--f7-theme-color-rgb: 103, 58, 183;
--f7-theme-color-shade: #563098;
--f7-theme-color-tint: #7c52c8;
}
.color-theme-lightblue {
--f7-theme-color: #5ac8fa;
--f7-theme-color-rgb: 90, 200, 250;
--f7-theme-color-shade: #32bbf9;
--f7-theme-color-tint: #82d5fb;
}
.color-theme-teal {
--f7-theme-color: #009688;
--f7-theme-color-rgb: 0, 150, 136;
--f7-theme-color-shade: #006d63;
--f7-theme-color-tint: #00bfad;
}
.color-theme-lime {
--f7-theme-color: #cddc39;
--f7-theme-color-rgb: 205, 220, 57;
--f7-theme-color-shade: #bac923;
--f7-theme-color-tint: #d6e25c;
}
.color-theme-deeporange {
--f7-theme-color: #ff6b22;
--f7-theme-color-rgb: 255, 107, 34;
--f7-theme-color-shade: #f85200;
--f7-theme-color-tint: #ff864b;
}
.color-theme-gray {
--f7-theme-color: #8e8e93;
--f7-theme-color-rgb: 142, 142, 147;
--f7-theme-color-shade: #79797f;
--f7-theme-color-tint: #a3a3a7;
}
.color-theme-white {
--f7-theme-color: #ffffff;
--f7-theme-color-rgb: 255, 255, 255;
--f7-theme-color-shade: #ebebeb;
--f7-theme-color-tint: #ffffff;
}
.color-theme-black {
--f7-theme-color: #000000;
--f7-theme-color-rgb: 0, 0, 0;
--f7-theme-color-shade: #000000;
--f7-theme-color-tint: #141414;
}
/*====================
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);
}
.color-green {
--f7-theme-color: #4cd964;
--f7-theme-color-rgb: 76, 217, 100;
--f7-theme-color-shade: #2cd048;
--f7-theme-color-tint: #6ee081;
}
.text-color-green {
--f7-theme-color-text-color: #4cd964;
}
.bg-color-green {
--f7-theme-color-bg-color: #4cd964;
}
.border-color-green {
--f7-theme-color-border-color: #4cd964;
}
.ripple-color-green,
.ripple-green {
--f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
}
.color-blue {
--f7-theme-color: #2196f3;
--f7-theme-color-rgb: 33, 150, 243;
--f7-theme-color-shade: #0c82df;
--f7-theme-color-tint: #48a8f5;
}
.text-color-blue {
--f7-theme-color-text-color: #2196f3;
}
.bg-color-blue {
--f7-theme-color-bg-color: #2196f3;
}
.border-color-blue {
--f7-theme-color-border-color: #2196f3;
}
.ripple-color-blue,
.ripple-blue {
--f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
}
.color-pink {
--f7-theme-color: #ff2d55;
--f7-theme-color-rgb: 255, 45, 85;
--f7-theme-color-shade: #ff0434;
--f7-theme-color-tint: #ff5676;
}
.text-color-pink {
--f7-theme-color-text-color: #ff2d55;
}
.bg-color-pink {
--f7-theme-color-bg-color: #ff2d55;
}
.border-color-pink {
--f7-theme-color-border-color: #ff2d55;
}
.ripple-color-pink,
.ripple-pink {
--f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
}
.color-yellow {
--f7-theme-color: #ffcc00;
--f7-theme-color-rgb: 255, 204, 0;
--f7-theme-color-shade: #d6ab00;
--f7-theme-color-tint: #ffd429;
}
.text-color-yellow {
--f7-theme-color-text-color: #ffcc00;
}
.bg-color-yellow {
--f7-theme-color-bg-color: #ffcc00;
}
.border-color-yellow {
--f7-theme-color-border-color: #ffcc00;
}
.ripple-color-yellow,
.ripple-yellow {
--f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
}
.color-orange {
--f7-theme-color: #ff9500;
--f7-theme-color-rgb: 255, 149, 0;
--f7-theme-color-shade: #d67d00;
--f7-theme-color-tint: #ffa629;
}
.text-color-orange {
--f7-theme-color-text-color: #ff9500;
}
.bg-color-orange {
--f7-theme-color-bg-color: #ff9500;
}
.border-color-orange {
--f7-theme-color-border-color: #ff9500;
}
.ripple-color-orange,
.ripple-orange {
--f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
}
.color-purple {
--f7-theme-color: #9c27b0;
--f7-theme-color-rgb: 156, 39, 176;
--f7-theme-color-shade: #7e208f;
--f7-theme-color-tint: #b92fd1;
}
.text-color-purple {
--f7-theme-color-text-color: #9c27b0;
}
.bg-color-purple {
--f7-theme-color-bg-color: #9c27b0;
}
.border-color-purple {
--f7-theme-color-border-color: #9c27b0;
}
.ripple-color-purple,
.ripple-purple {
--f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
}
.color-deeppurple {
--f7-theme-color: #673ab7;
--f7-theme-color-rgb: 103, 58, 183;
--f7-theme-color-shade: #563098;
--f7-theme-color-tint: #7c52c8;
}
.text-color-deeppurple {
--f7-theme-color-text-color: #673ab7;
}
.bg-color-deeppurple {
--f7-theme-color-bg-color: #673ab7;
}
.border-color-deeppurple {
--f7-theme-color-border-color: #673ab7;
}
.ripple-color-deeppurple,
.ripple-deeppurple {
--f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
}
.color-lightblue {
--f7-theme-color: #5ac8fa;
--f7-theme-color-rgb: 90, 200, 250;
--f7-theme-color-shade: #32bbf9;
--f7-theme-color-tint: #82d5fb;
}
.text-color-lightblue {
--f7-theme-color-text-color: #5ac8fa;
}
.bg-color-lightblue {
--f7-theme-color-bg-color: #5ac8fa;
}
.border-color-lightblue {
--f7-theme-color-border-color: #5ac8fa;
}
.ripple-color-lightblue,
.ripple-lightblue {
--f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
}
.color-teal {
--f7-theme-color: #009688;
--f7-theme-color-rgb: 0, 150, 136;
--f7-theme-color-shade: #006d63;
--f7-theme-color-tint: #00bfad;
}
.text-color-teal {
--f7-theme-color-text-color: #009688;
}
.bg-color-teal {
--f7-theme-color-bg-color: #009688;
}
.border-color-teal {
--f7-theme-color-border-color: #009688;
}
.ripple-color-teal,
.ripple-teal {
--f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
}
.color-lime {
--f7-theme-color: #cddc39;
--f7-theme-color-rgb: 205, 220, 57;
--f7-theme-color-shade: #bac923;
--f7-theme-color-tint: #d6e25c;
}
.text-color-lime {
--f7-theme-color-text-color: #cddc39;
}
.bg-color-lime {
--f7-theme-color-bg-color: #cddc39;
}
.border-color-lime {
--f7-theme-color-border-color: #cddc39;
}
.ripple-color-lime,
.ripple-lime {
--f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
}
.color-deeporange {
--f7-theme-color: #ff6b22;
--f7-theme-color-rgb: 255, 107, 34;
--f7-theme-color-shade: #f85200;
--f7-theme-color-tint: #ff864b;
}
.text-color-deeporange {
--f7-theme-color-text-color: #ff6b22;
}
.bg-color-deeporange {
--f7-theme-color-bg-color: #ff6b22;
}
.border-color-deeporange {
--f7-theme-color-border-color: #ff6b22;
}
.ripple-color-deeporange,
.ripple-deeporange {
--f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
}
.color-gray {
--f7-theme-color: #8e8e93;
--f7-theme-color-rgb: 142, 142, 147;
--f7-theme-color-shade: #79797f;
--f7-theme-color-tint: #a3a3a7;
}
.text-color-gray {
--f7-theme-color-text-color: #8e8e93;
}
.bg-color-gray {
--f7-theme-color-bg-color: #8e8e93;
}
.border-color-gray {
--f7-theme-color-border-color: #8e8e93;
}
.ripple-color-gray,
.ripple-gray {
--f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
}
.color-white {
--f7-theme-color: #ffffff;
--f7-theme-color-rgb: 255, 255, 255;
--f7-theme-color-shade: #ebebeb;
--f7-theme-color-tint: #ffffff;
}
.text-color-white {
--f7-theme-color-text-color: #ffffff;
}
.bg-color-white {
--f7-theme-color-bg-color: #ffffff;
}
.border-color-white {
--f7-theme-color-border-color: #ffffff;
}
.ripple-color-white,
.ripple-white {
--f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-black {
--f7-theme-color: #000000;
--f7-theme-color-rgb: 0, 0, 0;
--f7-theme-color-shade: #000000;
--f7-theme-color-tint: #141414;
}
.text-color-black {
--f7-theme-color-text-color: #000000;
}
.bg-color-black {
--f7-theme-color-bg-color: #000000;
}
.border-color-black {
--f7-theme-color-border-color: #000000;
}
.ripple-color-black,
.ripple-black {
--f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}