Color Themes - 图1

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:

  1. <body class="color-theme-red">
  2.     ...
  3. </body>
  5. <div class="page color-theme-green">
  6.     ...
  7. </div>
  9. <div class="list-block color-theme-pink">
  10.     ...
  11. </div>
  13. <div class="navbar color-theme-orange">
  14.     ...
  15. </div>
  17. <div class="segmented color-theme-yellow">
  18.     ...
  19. </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:

  1. <html class="theme-dark">
  2.     ...
  3. </html>
  5. <body class="theme-dark">
  6.     ...
  7. </body>
  9. <div class="page theme-dark">
  10.     ...
  11. </div>
  13. <div class="list-block theme-dark">
  14.     ...
  15. </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:

    1. <a class="button color-red">Red button</a>

  • text-color-[color] - if you want to change text color of required element:

    1. <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:

    1. <span class="badge bg-color-pink">14</span> - pink badge

  • border-color-[color] - if you want to set predefined border color:

    1. <div class="button border-color-red">...</div>

And of course, you can mix these helper classes:

  1. <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:

  1. :root {
  2.   --f7-theme-color: #f00;
  3.   --f7-theme-color-shade: #d60000;
  4.   --f7-theme-color-tint: #ff2929;
  5.   --f7-theme-color-rgb: 255, 0, 0;
  6. }

There is also new colorThemeCSSProperties util that can generate required CSS variables:

  1. /* Generate CSS variables for red theme color */
  2. app.utils.colorThemeCSSProperties('#f00');

It will return the following object:

  1. {
  2.   "--f7-theme-color": "#f00",
  3.   "--f7-theme-color-rgb": "255, 0, 0",
  4.   "--f7-theme-color-shade": "#d60000",
  5.   "--f7-theme-color-tint": "#ff2929"
  6. }

Generate Color Theme

Color Themes - 图2

Layout Theme

LightDark

Navigation Bars Style

EmptyFill

Color

HEX Color

Generated Styles

Copy following CSS styles to your app’s styles:

  1. /*  Change color or navigation bars style to see genearted styles*/

CSS Variables

  1. /*====================
  2.   Primary Theme
  3.   ==================== */
  4. .text-color-primary {
  5.   --f7-theme-color-text-color: var(--f7-theme-color);
  6. }
  7. .bg-color-primary {
  8.   --f7-theme-color-bg-color: var(--f7-theme-color);
  9. }
  10. .border-color-primary {
  11.   --f7-theme-color-border-color: var(--f7-theme-color);
  12. }
  13. .ripple-color-primary {
  14.   --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
  15. }
  16. /*====================
  17.   Colors List
  18.   ==================== */
  19. :root {
  20.   --f7-color-red: #ff3b30;
  21.   --f7-color-red-rgb: 255, 59, 48;
  22.   --f7-color-red-shade: #ff1407;
  23.   --f7-color-red-tint: #ff6259;
  24.   --f7-color-green: #4cd964;
  25.   --f7-color-green-rgb: 76, 217, 100;
  26.   --f7-color-green-shade: #2cd048;
  27.   --f7-color-green-tint: #6ee081;
  28.   --f7-color-blue: #2196f3;
  29.   --f7-color-blue-rgb: 33, 150, 243;
  30.   --f7-color-blue-shade: #0c82df;
  31.   --f7-color-blue-tint: #48a8f5;
  32.   --f7-color-pink: #ff2d55;
  33.   --f7-color-pink-rgb: 255, 45, 85;
  34.   --f7-color-pink-shade: #ff0434;
  35.   --f7-color-pink-tint: #ff5676;
  36.   --f7-color-yellow: #ffcc00;
  37.   --f7-color-yellow-rgb: 255, 204, 0;
  38.   --f7-color-yellow-shade: #d6ab00;
  39.   --f7-color-yellow-tint: #ffd429;
  40.   --f7-color-orange: #ff9500;
  41.   --f7-color-orange-rgb: 255, 149, 0;
  42.   --f7-color-orange-shade: #d67d00;
  43.   --f7-color-orange-tint: #ffa629;
  44.   --f7-color-purple: #9c27b0;
  45.   --f7-color-purple-rgb: 156, 39, 176;
  46.   --f7-color-purple-shade: #7e208f;
  47.   --f7-color-purple-tint: #b92fd1;
  48.   --f7-color-deeppurple: #673ab7;
  49.   --f7-color-deeppurple-rgb: 103, 58, 183;
  50.   --f7-color-deeppurple-shade: #563098;
  51.   --f7-color-deeppurple-tint: #7c52c8;
  52.   --f7-color-lightblue: #5ac8fa;
  53.   --f7-color-lightblue-rgb: 90, 200, 250;
  54.   --f7-color-lightblue-shade: #32bbf9;
  55.   --f7-color-lightblue-tint: #82d5fb;
  56.   --f7-color-teal: #009688;
  57.   --f7-color-teal-rgb: 0, 150, 136;
  58.   --f7-color-teal-shade: #006d63;
  59.   --f7-color-teal-tint: #00bfad;
  60.   --f7-color-lime: #cddc39;
  61.   --f7-color-lime-rgb: 205, 220, 57;
  62.   --f7-color-lime-shade: #bac923;
  63.   --f7-color-lime-tint: #d6e25c;
  64.   --f7-color-deeporange: #ff6b22;
  65.   --f7-color-deeporange-rgb: 255, 107, 34;
  66.   --f7-color-deeporange-shade: #f85200;
  67.   --f7-color-deeporange-tint: #ff864b;
  68.   --f7-color-gray: #8e8e93;
  69.   --f7-color-gray-rgb: 142, 142, 147;
  70.   --f7-color-gray-shade: #79797f;
  71.   --f7-color-gray-tint: #a3a3a7;
  72.   --f7-color-white: #ffffff;
  73.   --f7-color-white-rgb: 255, 255, 255;
  74.   --f7-color-white-shade: #ebebeb;
  75.   --f7-color-white-tint: #ffffff;
  76.   --f7-color-black: #000000;
  77.   --f7-color-black-rgb: 0, 0, 0;
  78.   --f7-color-black-shade: #000000;
  79.   --f7-color-black-tint: #141414;
  80. }
  81. /*====================
  82.   Color Themes
  83.   ==================== */
  84. .color-theme-red {
  85.   --f7-theme-color: #ff3b30;
  86.   --f7-theme-color-rgb: 255, 59, 48;
  87.   --f7-theme-color-shade: #ff1407;
  88.   --f7-theme-color-tint: #ff6259;
  89. }
  90. .color-theme-green {
  91.   --f7-theme-color: #4cd964;
  92.   --f7-theme-color-rgb: 76, 217, 100;
  93.   --f7-theme-color-shade: #2cd048;
  94.   --f7-theme-color-tint: #6ee081;
  95. }
  96. .color-theme-blue {
  97.   --f7-theme-color: #2196f3;
  98.   --f7-theme-color-rgb: 33, 150, 243;
  99.   --f7-theme-color-shade: #0c82df;
  100.   --f7-theme-color-tint: #48a8f5;
  101. }
  102. .color-theme-pink {
  103.   --f7-theme-color: #ff2d55;
  104.   --f7-theme-color-rgb: 255, 45, 85;
  105.   --f7-theme-color-shade: #ff0434;
  106.   --f7-theme-color-tint: #ff5676;
  107. }
  108. .color-theme-yellow {
  109.   --f7-theme-color: #ffcc00;
  110.   --f7-theme-color-rgb: 255, 204, 0;
  111.   --f7-theme-color-shade: #d6ab00;
  112.   --f7-theme-color-tint: #ffd429;
  113. }
  114. .color-theme-orange {
  115.   --f7-theme-color: #ff9500;
  116.   --f7-theme-color-rgb: 255, 149, 0;
  117.   --f7-theme-color-shade: #d67d00;
  118.   --f7-theme-color-tint: #ffa629;
  119. }
  120. .color-theme-purple {
  121.   --f7-theme-color: #9c27b0;
  122.   --f7-theme-color-rgb: 156, 39, 176;
  123.   --f7-theme-color-shade: #7e208f;
  124.   --f7-theme-color-tint: #b92fd1;
  125. }
  126. .color-theme-deeppurple {
  127.   --f7-theme-color: #673ab7;
  128.   --f7-theme-color-rgb: 103, 58, 183;
  129.   --f7-theme-color-shade: #563098;
  130.   --f7-theme-color-tint: #7c52c8;
  131. }
  132. .color-theme-lightblue {
  133.   --f7-theme-color: #5ac8fa;
  134.   --f7-theme-color-rgb: 90, 200, 250;
  135.   --f7-theme-color-shade: #32bbf9;
  136.   --f7-theme-color-tint: #82d5fb;
  137. }
  138. .color-theme-teal {
  139.   --f7-theme-color: #009688;
  140.   --f7-theme-color-rgb: 0, 150, 136;
  141.   --f7-theme-color-shade: #006d63;
  142.   --f7-theme-color-tint: #00bfad;
  143. }
  144. .color-theme-lime {
  145.   --f7-theme-color: #cddc39;
  146.   --f7-theme-color-rgb: 205, 220, 57;
  147.   --f7-theme-color-shade: #bac923;
  148.   --f7-theme-color-tint: #d6e25c;
  149. }
  150. .color-theme-deeporange {
  151.   --f7-theme-color: #ff6b22;
  152.   --f7-theme-color-rgb: 255, 107, 34;
  153.   --f7-theme-color-shade: #f85200;
  154.   --f7-theme-color-tint: #ff864b;
  155. }
  156. .color-theme-gray {
  157.   --f7-theme-color: #8e8e93;
  158.   --f7-theme-color-rgb: 142, 142, 147;
  159.   --f7-theme-color-shade: #79797f;
  160.   --f7-theme-color-tint: #a3a3a7;
  161. }
  162. .color-theme-white {
  163.   --f7-theme-color: #ffffff;
  164.   --f7-theme-color-rgb: 255, 255, 255;
  165.   --f7-theme-color-shade: #ebebeb;
  166.   --f7-theme-color-tint: #ffffff;
  167. }
  168. .color-theme-black {
  169.   --f7-theme-color: #000000;
  170.   --f7-theme-color-rgb: 0, 0, 0;
  171.   --f7-theme-color-shade: #000000;
  172.   --f7-theme-color-tint: #141414;
  173. }
  174. /*====================
  175.   Color Overrides
  176.   ==================== */
  177. .color-red {
  178.   --f7-theme-color: #ff3b30;
  179.   --f7-theme-color-rgb: 255, 59, 48;
  180.   --f7-theme-color-shade: #ff1407;
  181.   --f7-theme-color-tint: #ff6259;
  182. }
  183. .text-color-red {
  184.   --f7-theme-color-text-color: #ff3b30;
  185. }
  186. .bg-color-red {
  187.   --f7-theme-color-bg-color: #ff3b30;
  188. }
  189. .border-color-red {
  190.   --f7-theme-color-border-color: #ff3b30;
  191. }
  192. .ripple-color-red,
  193. .ripple-red {
  194.   --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
  195. }
  196. .color-green {
  197.   --f7-theme-color: #4cd964;
  198.   --f7-theme-color-rgb: 76, 217, 100;
  199.   --f7-theme-color-shade: #2cd048;
  200.   --f7-theme-color-tint: #6ee081;
  201. }
  202. .text-color-green {
  203.   --f7-theme-color-text-color: #4cd964;
  204. }
  205. .bg-color-green {
  206.   --f7-theme-color-bg-color: #4cd964;
  207. }
  208. .border-color-green {
  209.   --f7-theme-color-border-color: #4cd964;
  210. }
  211. .ripple-color-green,
  212. .ripple-green {
  213.   --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
  214. }
  215. .color-blue {
  216.   --f7-theme-color: #2196f3;
  217.   --f7-theme-color-rgb: 33, 150, 243;
  218.   --f7-theme-color-shade: #0c82df;
  219.   --f7-theme-color-tint: #48a8f5;
  220. }
  221. .text-color-blue {
  222.   --f7-theme-color-text-color: #2196f3;
  223. }
  224. .bg-color-blue {
  225.   --f7-theme-color-bg-color: #2196f3;
  226. }
  227. .border-color-blue {
  228.   --f7-theme-color-border-color: #2196f3;
  229. }
  230. .ripple-color-blue,
  231. .ripple-blue {
  232.   --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
  233. }
  234. .color-pink {
  235.   --f7-theme-color: #ff2d55;
  236.   --f7-theme-color-rgb: 255, 45, 85;
  237.   --f7-theme-color-shade: #ff0434;
  238.   --f7-theme-color-tint: #ff5676;
  239. }
  240. .text-color-pink {
  241.   --f7-theme-color-text-color: #ff2d55;
  242. }
  243. .bg-color-pink {
  244.   --f7-theme-color-bg-color: #ff2d55;
  245. }
  246. .border-color-pink {
  247.   --f7-theme-color-border-color: #ff2d55;
  248. }
  249. .ripple-color-pink,
  250. .ripple-pink {
  251.   --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
  252. }
  253. .color-yellow {
  254.   --f7-theme-color: #ffcc00;
  255.   --f7-theme-color-rgb: 255, 204, 0;
  256.   --f7-theme-color-shade: #d6ab00;
  257.   --f7-theme-color-tint: #ffd429;
  258. }
  259. .text-color-yellow {
  260.   --f7-theme-color-text-color: #ffcc00;
  261. }
  262. .bg-color-yellow {
  263.   --f7-theme-color-bg-color: #ffcc00;
  264. }
  265. .border-color-yellow {
  266.   --f7-theme-color-border-color: #ffcc00;
  267. }
  268. .ripple-color-yellow,
  269. .ripple-yellow {
  270.   --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
  271. }
  272. .color-orange {
  273.   --f7-theme-color: #ff9500;
  274.   --f7-theme-color-rgb: 255, 149, 0;
  275.   --f7-theme-color-shade: #d67d00;
  276.   --f7-theme-color-tint: #ffa629;
  277. }
  278. .text-color-orange {
  279.   --f7-theme-color-text-color: #ff9500;
  280. }
  281. .bg-color-orange {
  282.   --f7-theme-color-bg-color: #ff9500;
  283. }
  284. .border-color-orange {
  285.   --f7-theme-color-border-color: #ff9500;
  286. }
  287. .ripple-color-orange,
  288. .ripple-orange {
  289.   --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
  290. }
  291. .color-purple {
  292.   --f7-theme-color: #9c27b0;
  293.   --f7-theme-color-rgb: 156, 39, 176;
  294.   --f7-theme-color-shade: #7e208f;
  295.   --f7-theme-color-tint: #b92fd1;
  296. }
  297. .text-color-purple {
  298.   --f7-theme-color-text-color: #9c27b0;
  299. }
  300. .bg-color-purple {
  301.   --f7-theme-color-bg-color: #9c27b0;
  302. }
  303. .border-color-purple {
  304.   --f7-theme-color-border-color: #9c27b0;
  305. }
  306. .ripple-color-purple,
  307. .ripple-purple {
  308.   --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
  309. }
  310. .color-deeppurple {
  311.   --f7-theme-color: #673ab7;
  312.   --f7-theme-color-rgb: 103, 58, 183;
  313.   --f7-theme-color-shade: #563098;
  314.   --f7-theme-color-tint: #7c52c8;
  315. }
  316. .text-color-deeppurple {
  317.   --f7-theme-color-text-color: #673ab7;
  318. }
  319. .bg-color-deeppurple {
  320.   --f7-theme-color-bg-color: #673ab7;
  321. }
  322. .border-color-deeppurple {
  323.   --f7-theme-color-border-color: #673ab7;
  324. }
  325. .ripple-color-deeppurple,
  326. .ripple-deeppurple {
  327.   --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
  328. }
  329. .color-lightblue {
  330.   --f7-theme-color: #5ac8fa;
  331.   --f7-theme-color-rgb: 90, 200, 250;
  332.   --f7-theme-color-shade: #32bbf9;
  333.   --f7-theme-color-tint: #82d5fb;
  334. }
  335. .text-color-lightblue {
  336.   --f7-theme-color-text-color: #5ac8fa;
  337. }
  338. .bg-color-lightblue {
  339.   --f7-theme-color-bg-color: #5ac8fa;
  340. }
  341. .border-color-lightblue {
  342.   --f7-theme-color-border-color: #5ac8fa;
  343. }
  344. .ripple-color-lightblue,
  345. .ripple-lightblue {
  346.   --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
  347. }
  348. .color-teal {
  349.   --f7-theme-color: #009688;
  350.   --f7-theme-color-rgb: 0, 150, 136;
  351.   --f7-theme-color-shade: #006d63;
  352.   --f7-theme-color-tint: #00bfad;
  353. }
  354. .text-color-teal {
  355.   --f7-theme-color-text-color: #009688;
  356. }
  357. .bg-color-teal {
  358.   --f7-theme-color-bg-color: #009688;
  359. }
  360. .border-color-teal {
  361.   --f7-theme-color-border-color: #009688;
  362. }
  363. .ripple-color-teal,
  364. .ripple-teal {
  365.   --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
  366. }
  367. .color-lime {
  368.   --f7-theme-color: #cddc39;
  369.   --f7-theme-color-rgb: 205, 220, 57;
  370.   --f7-theme-color-shade: #bac923;
  371.   --f7-theme-color-tint: #d6e25c;
  372. }
  373. .text-color-lime {
  374.   --f7-theme-color-text-color: #cddc39;
  375. }
  376. .bg-color-lime {
  377.   --f7-theme-color-bg-color: #cddc39;
  378. }
  379. .border-color-lime {
  380.   --f7-theme-color-border-color: #cddc39;
  381. }
  382. .ripple-color-lime,
  383. .ripple-lime {
  384.   --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
  385. }
  386. .color-deeporange {
  387.   --f7-theme-color: #ff6b22;
  388.   --f7-theme-color-rgb: 255, 107, 34;
  389.   --f7-theme-color-shade: #f85200;
  390.   --f7-theme-color-tint: #ff864b;
  391. }
  392. .text-color-deeporange {
  393.   --f7-theme-color-text-color: #ff6b22;
  394. }
  395. .bg-color-deeporange {
  396.   --f7-theme-color-bg-color: #ff6b22;
  397. }
  398. .border-color-deeporange {
  399.   --f7-theme-color-border-color: #ff6b22;
  400. }
  401. .ripple-color-deeporange,
  402. .ripple-deeporange {
  403.   --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
  404. }
  405. .color-gray {
  406.   --f7-theme-color: #8e8e93;
  407.   --f7-theme-color-rgb: 142, 142, 147;
  408.   --f7-theme-color-shade: #79797f;
  409.   --f7-theme-color-tint: #a3a3a7;
  410. }
  411. .text-color-gray {
  412.   --f7-theme-color-text-color: #8e8e93;
  413. }
  414. .bg-color-gray {
  415.   --f7-theme-color-bg-color: #8e8e93;
  416. }
  417. .border-color-gray {
  418.   --f7-theme-color-border-color: #8e8e93;
  419. }
  420. .ripple-color-gray,
  421. .ripple-gray {
  422.   --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
  423. }
  424. .color-white {
  425.   --f7-theme-color: #ffffff;
  426.   --f7-theme-color-rgb: 255, 255, 255;
  427.   --f7-theme-color-shade: #ebebeb;
  428.   --f7-theme-color-tint: #ffffff;
  429. }
  430. .text-color-white {
  431.   --f7-theme-color-text-color: #ffffff;
  432. }
  433. .bg-color-white {
  434.   --f7-theme-color-bg-color: #ffffff;
  435. }
  436. .border-color-white {
  437.   --f7-theme-color-border-color: #ffffff;
  438. }
  439. .ripple-color-white,
  440. .ripple-white {
  441.   --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
  442. }
  443. .color-black {
  444.   --f7-theme-color: #000000;
  445.   --f7-theme-color-rgb: 0, 0, 0;
  446.   --f7-theme-color-shade: #000000;
  447.   --f7-theme-color-tint: #141414;
  448. }
  449. .text-color-black {
  450.   --f7-theme-color-text-color: #000000;
  451. }
  452. .bg-color-black {
  453.   --f7-theme-color-bg-color: #000000;
  454. }
  455. .border-color-black {
  456.   --f7-theme-color-border-color: #000000;
  457. }
  458. .ripple-color-black,
  459. .ripple-black {
  460.   --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
  461. }

← Safe Areas

Typography →