Color Themes

Default Theme Color

Default theme color is set to the following: #007aff

color-themes.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Color Themes</div>
        <div class="right">
          <a class="link">Link</a>
        </div>
        <div class="title-large">
          <div class="title-large-text">Color Themes</div>
        </div>
      </div>
    </div>
    <div class="toolbar tabbar tabbar-icons toolbar-bottom">
      <div class="toolbar-inner">
        <a class="tab-link tab-link-active">
          <i class="icon f7-icons if-not-md">envelope_fill</i>
          <i class="icon material-icons md-only">email</i>
          <span class="tabbar-label">Inbox</span>
        </a>
        <a class="tab-link">
          <i class="icon f7-icons if-not-md">calendar_fill<span class="badge color-red">5</span></i>
          <i class="icon material-icons md-only">today<span class="badge color-red">5</span></i>
          <span class="tabbar-label">Calendar</span>
        </a>
        <a class="tab-link">
          <i class="icon f7-icons if-not-md">cloud_upload_fill</i>
          <i class="icon material-icons md-only">file_upload</i>
          <span class="tabbar-label">Upload</span>
        </a>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title block-title-medium">Layout Themes</div>
      <div class="block block-strong inset">
        <p>Framework7 comes with 2 main layout themes: Light (default) and Dark:</p>
        <div class="grid grid-cols-2 grid-gap">
          <div class="bg-color-white demo-theme-picker" @click=${()=>setScheme('light')}>
            ${theme === 'light' && $h`
            <label class="checkbox">
              <input type="checkbox" checked disabled />
              <i class="icon-checkbox"></i>
            </label>
            `}
          </div>
          <div class="bg-color-black demo-theme-picker" @click=${()=>setScheme('dark')}>
            ${theme === 'dark' && $h`
            <label class="checkbox">
              <input type="checkbox" checked disabled />
              <i class="icon-checkbox"></i>
            </label>
            `}
          </div>
        </div>
      </div>

      <div class="block-title block-title-medium">Default Color Themes</div>
      <div class="block block-strong inset">
        <p>Framework7 comes with ${colors.length} color themes set.</p>
        <div class="grid grid-cols-3 medium-grid-cols-4 large-grid-cols-5 grid-gap">
          ${colors.map((color) => $h`
          <div>
            <button class="button button-fill demo-color-picker-button button-round button-small color-${color}"
              @click=${()=>setColorTheme(color)}>${color}</button>
          </div>
          `)}
        </div>
      </div>
      <div class="block-title block-title-medium">Custom Color Theme</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li class="item-content item-input">
            <div class="item-media align-self-flex-end">
              <div id="color-theme-picker-color" style="width: 28px; height: 28px; border-radius: 4px; background:
                var(--f7-color-primary)"></div>
            </div>
            <div class="item-inner">
              <div class="item-label">HEX Color</div>
              <div class="item-input-wrap">
                <input id="color-theme-picker" type="text" readonly placeholder="e.g. #ff0000" />
              </div>
            </div>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>
<script>
  let theme = 'light';
  let themeColor = $('html').css('--f7-color-primary').trim();

  export default (props, { $f7, $, $on, $onMounted, $update }) => {
    const colors = Object.keys($f7.colors).filter((c) => c !== 'primary' && c !== 'white' && c !== 'black');

    let colorPicker;

    const setScheme = (newTheme) => {
      $f7.setDarkMode(newTheme === 'dark');
      theme = newTheme;
      $update();
    }

    const setColorTheme = (newColor) => {
      themeColor = $f7.colors[newColor];
      $f7.setColorTheme(themeColor);
      colorPicker.setValue({
        hex: themeColor,
      });
      $update();
    }

    const setCustomColor = (newColor) => {
      themeColor = newColor;
      $f7.setColorTheme(newColor);
      $update();
    }

    $on('pageInit', () => {
      let timeout;
      colorPicker = $f7.colorPicker.create({
        inputEl: '#color-theme-picker',
        targetEl: '#color-theme-picker-color',
        value: {
          hex: themeColor,
        },
        on: {
          change(cp, value) {
            clearTimeout(timeout);
            timeout = setTimeout(function () {
              if (themeColor === value.hex) return;
              setCustomColor(value.hex);
            }, 200);
          },
        },
      });
    });
    $on('pageBeforeRemove', () => {
      colorPicker.destroy();
    });

    return $render;
  };

</script>

Colors

Framework7 comes with 15 ready to use additional color themes.

primary
#007aff
red
#ff3b30
green
#4cd964
blue
#2196f3
pink
#ff2d55
yellow
#ffcc00
orange
#ff9500
purple
#9c27b0
deeppurple
#673ab7
lightblue
#5ac8fa
teal
#009688
lime
#cddc39
deeporange
#ff6b22
white
#ffffff
black
#000000

Apply Color Themes

It is easy to apply color themes. All you need is just to add color-[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-red">
    ...
</body>

<div class="page color-green">
    ...
</div>

<div class="list-block color-pink">
    ...
</div>

<div class="navbar color-orange">
    ...
</div>

<div class="segmented color-yellow">
    ...
</div>

Note, that applied color theme affects only interactive elements such as links, buttons, form elements, icons. It doesn't change basic text color or background colors on other blocks.

Dark Mode

Framework7 also has additional dark mode layout. To apply dark theme we need to add dark class to the required parent element. It could be body, app root, view, page, navbar, toolbar, list-block, etc. For example:

<html class="dark">
    ...
</html>

<body class="dark">
    ...
</body>

<div class="page dark">
    ...
</div>

<div class="list-block dark">
    ...
</div>

Helper Classes

There are also additional helper classes that could be used without/outside color themes:

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.

Custom Color Theme

To set custom color theme, we need to specify primary color in app.colors parameter:

const app = new Framework7({
  colors: {
    // specify primary color theme
    primary: '#ff0000'
  }
})

It will generate all required CSS variables and automatically inject it to the document.

For example, if custom theme color is #f00 (red), it will generate and add the following CSS styles to the document for the primary color

:root {
  --f7-ios-primary: #ff0000;
  --f7-ios-primary-shade: #d60000;
  --f7-ios-primary-tint: #ff2929;
  --f7-ios-primary-rgb: 255, 0, 0;
  --f7-md-primary-shade: #970100;
  --f7-md-primary-tint: #e90100;
  --f7-md-primary-rgb: 192, 1, 0;
  --f7-md-primary: #c00100;
  --f7-md-on-primary: #ffffff;
  --f7-md-primary-container: #ffdad4;
  --f7-md-on-primary-container: #410000;
  --f7-md-secondary: #775651;
  --f7-md-on-secondary: #ffffff;
  --f7-md-secondary-container: #ffdad4;
  --f7-md-on-secondary-container: #2c1512;
  --f7-md-surface: #fffbff;
  --f7-md-on-surface: #201a19;
  --f7-md-surface-variant: #f5ddda;
  --f7-md-on-surface-variant: #534341;
  --f7-md-outline: #857370;
  --f7-md-outline-variant: #d8c2be;
  --f7-md-inverse-surface: #362f2e;
  --f7-md-inverse-on-surface: #fbeeec;
  --f7-md-inverse-primary: #ffb4a8;
  --f7-md-surface-1: #fceff2;
  --f7-md-surface-2: #fae7eb;
  --f7-md-surface-3: #f8e0e3;
  --f7-md-surface-4: #f7dde0;
  --f7-md-surface-5: #f6d8db;
  --f7-md-surface-variant-rgb: 245, 221, 218;
  --f7-md-on-surface-variant-rgb: 83, 67, 65;
  --f7-md-surface-1-rgb: 252, 239, 242;
  --f7-md-surface-2-rgb: 250, 231, 235;
  --f7-md-surface-3-rgb: 248, 224, 227;
  --f7-md-surface-4-rgb: 247, 221, 224;
  --f7-md-surface-5-rgb: 246, 216, 219;
  --swiper-theme-color: var(--f7-theme-color);
  --f7-color-primary: #ff0000;
}
.dark {
  --f7-md-primary-shade: #ff917f;
  --f7-md-primary-tint: #ffd7d1;
  --f7-md-primary-rgb: 255, 180, 168;
  --f7-md-primary: #ffb4a8;
  --f7-md-on-primary: #690100;
  --f7-md-primary-container: #930100;
  --f7-md-on-primary-container: #ffdad4;
  --f7-md-secondary: #e7bdb6;
  --f7-md-on-secondary: #442925;
  --f7-md-secondary-container: #5d3f3b;
  --f7-md-on-secondary-container: #ffdad4;
  --f7-md-surface: #201a19;
  --f7-md-on-surface: #ede0dd;
  --f7-md-surface-variant: #534341;
  --f7-md-on-surface-variant: #d8c2be;
  --f7-md-outline: #a08c89;
  --f7-md-outline-variant: #534341;
  --f7-md-inverse-surface: #ede0dd;
  --f7-md-inverse-on-surface: #362f2e;
  --f7-md-inverse-primary: #c00100;
  --f7-md-surface-1: #2b2220;
  --f7-md-surface-2: #322624;
  --f7-md-surface-3: #392b29;
  --f7-md-surface-4: #3b2c2a;
  --f7-md-surface-5: #3f302d;
  --f7-md-surface-variant-rgb: 83, 67, 65;
  --f7-md-on-surface-variant-rgb: 216, 194, 190;
  --f7-md-surface-1-rgb: 43, 34, 32;
  --f7-md-surface-2-rgb: 50, 38, 36;
  --f7-md-surface-3-rgb: 57, 43, 41;
  --f7-md-surface-4-rgb: 59, 44, 42;
  --f7-md-surface-5-rgb: 63, 48, 45;
}
.ios {
  --f7-theme-color: var(--f7-ios-primary);
  --f7-theme-color-rgb: var(--f7-ios-primary-rgb);
  --f7-theme-color-shade: var(--f7-ios-primary-shade);
  --f7-theme-color-tint: var(--f7-ios-primary-tint);
}
.md {
  --f7-theme-color: var(--f7-md-primary);
  --f7-theme-color-rgb: var(--f7-md-primary-rgb);
  --f7-theme-color-shade: var(--f7-md-primary-shade);
  --f7-theme-color-tint: var(--f7-md-primary-tint);
}
.color-primary {
  --f7-ios-primary: #ff0000;
  --f7-ios-primary-shade: #d60000;
  --f7-ios-primary-tint: #ff2929;
  --f7-ios-primary-rgb: 255, 0, 0;
  --f7-md-primary-shade: #970100;
  --f7-md-primary-tint: #e90100;
  --f7-md-primary-rgb: 192, 1, 0;
  --f7-md-primary: #c00100;
  --f7-md-on-primary: #ffffff;
  --f7-md-primary-container: #ffdad4;
  --f7-md-on-primary-container: #410000;
  --f7-md-secondary: #775651;
  --f7-md-on-secondary: #ffffff;
  --f7-md-secondary-container: #ffdad4;
  --f7-md-on-secondary-container: #2c1512;
  --f7-md-surface: #fffbff;
  --f7-md-on-surface: #201a19;
  --f7-md-surface-variant: #f5ddda;
  --f7-md-on-surface-variant: #534341;
  --f7-md-outline: #857370;
  --f7-md-outline-variant: #d8c2be;
  --f7-md-inverse-surface: #362f2e;
  --f7-md-inverse-on-surface: #fbeeec;
  --f7-md-inverse-primary: #ffb4a8;
  --f7-md-surface-1: #fceff2;
  --f7-md-surface-2: #fae7eb;
  --f7-md-surface-3: #f8e0e3;
  --f7-md-surface-4: #f7dde0;
  --f7-md-surface-5: #f6d8db;
  --f7-md-surface-variant-rgb: 245, 221, 218;
  --f7-md-on-surface-variant-rgb: 83, 67, 65;
  --f7-md-surface-1-rgb: 252, 239, 242;
  --f7-md-surface-2-rgb: 250, 231, 235;
  --f7-md-surface-3-rgb: 248, 224, 227;
  --f7-md-surface-4-rgb: 247, 221, 224;
  --f7-md-surface-5-rgb: 246, 216, 219;
  --swiper-theme-color: var(--f7-theme-color);
}
.color-primary.dark,
.color-primary .dark,
.dark .color-primary {
  --f7-md-primary-shade: #ff917f;
  --f7-md-primary-tint: #ffd7d1;
  --f7-md-primary-rgb: 255, 180, 168;
  --f7-md-primary: #ffb4a8;
  --f7-md-on-primary: #690100;
  --f7-md-primary-container: #930100;
  --f7-md-on-primary-container: #ffdad4;
  --f7-md-secondary: #e7bdb6;
  --f7-md-on-secondary: #442925;
  --f7-md-secondary-container: #5d3f3b;
  --f7-md-on-secondary-container: #ffdad4;
  --f7-md-surface: #201a19;
  --f7-md-on-surface: #ede0dd;
  --f7-md-surface-variant: #534341;
  --f7-md-on-surface-variant: #d8c2be;
  --f7-md-outline: #a08c89;
  --f7-md-outline-variant: #534341;
  --f7-md-inverse-surface: #ede0dd;
  --f7-md-inverse-on-surface: #362f2e;
  --f7-md-inverse-primary: #c00100;
  --f7-md-surface-1: #2b2220;
  --f7-md-surface-2: #322624;
  --f7-md-surface-3: #392b29;
  --f7-md-surface-4: #3b2c2a;
  --f7-md-surface-5: #3f302d;
  --f7-md-surface-variant-rgb: 83, 67, 65;
  --f7-md-on-surface-variant-rgb: 216, 194, 190;
  --f7-md-surface-1-rgb: 43, 34, 32;
  --f7-md-surface-2-rgb: 50, 38, 36;
  --f7-md-surface-3-rgb: 57, 43, 41;
  --f7-md-surface-4-rgb: 59, 44, 42;
  --f7-md-surface-5-rgb: 63, 48, 45;
  --swiper-theme-color: var(--f7-theme-color);
}
.ios .color-primary,
.ios.color-primary {
  --f7-theme-color: var(--f7-ios-primary);
  --f7-theme-color-rgb: var(--f7-ios-primary-rgb);
  --f7-theme-color-shade: var(--f7-ios-primary-shade);
  --f7-theme-color-tint: var(--f7-ios-primary-tint);
}
.md .color-primary,
.md.color-primary {
  --f7-theme-color: var(--f7-md-primary);
  --f7-theme-color-rgb: var(--f7-md-primary-rgb);
  --f7-theme-color-shade: var(--f7-md-primary-shade);
  --f7-theme-color-tint: var(--f7-md-primary-tint);
}
.text-color-primary {
  --f7-theme-color-text-color: #ff0000;
}
.bg-color-primary {
  --f7-theme-color-bg-color: #ff0000;
}
.border-color-primary {
  --f7-theme-color-border-color: #ff0000;
}
.ripple-color-primary {
  --f7-theme-color-ripple-color: rgba(255, 0, 0, 0.3);
}

Change Color Theme

It is also possible to change/set color theme dynamically, by using app.setColorTheme method:

// initially with go with red color theme
const app = new Framework7({
  colors: {
    primary: '#ff0000'
  }
});

// change it later to different color
app.setColorTheme('#00ff00')

Calling app.setColorTheme method will regenerate required CSS styles dynamically.