Color Themes

Framework7 v9: Material theme has been updated with the latest Material You specifications, including new Vibrant and Monochrome color schemes for more dynamic and flexible design options.

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="left">
          <a class="link back">
            <i class="icon icon-back"></i>

          </a>
        </div>
        <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">
        <div class="toolbar-pane">
          <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>
    <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">Material Color Scheme</div>
      <div class="list list-strong inset">
        <ul>
          <li>
            <label class="item-content">
              <div class="item-inner">
                <div class="item-title">Monochrome</div>
                <div class="item-after">
                  <div class="toggle toggle-init">
                    <input type="checkbox" checked=${monochrome} @change=${(e)=>
                    setMdColorSchemeMonochrome(e.target.checked)} />
                    <span class="toggle-icon"></span>
                  </div>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-content">
              <div class="item-inner">
                <div class="item-title">Vibrant</div>
                <div class="item-after">
                  <div class="toggle toggle-init">
                    <input type="checkbox" checked=${vibrant} @change=${(e)=> setMdColorSchemeVibrant(e.target.checked)}
                    />
                    <span class="toggle-icon"></span>
                  </div>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </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;
    let monochrome = false;
    let vibrant = false;

    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();
    }

    const setMdColorScheme = () => {
      if (!vibrant && !monochrome) {
        $f7.setMdColorScheme('default');
      } else if (vibrant && !monochrome) {
        $f7.setMdColorScheme('vibrant');
      } else if (!vibrant && monochrome) {
        $f7.setMdColorScheme('monochrome');
      } else if (vibrant && monochrome) {
        $f7.setMdColorScheme('monochrome-vibrant');
      }
      $update();
    }

    const setMdColorSchemeMonochrome = (value) => {
      monochrome = value;
      setMdColorScheme();
    }
    const setMdColorSchemeVibrant = (value) => {
      vibrant = value;
      setMdColorScheme();
    }

    $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:

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

Material Color Schemes

Framework7 v9 introduces new Material You color schemes that can be applied to Material theme:

Vibrant Color Scheme

The Vibrant color scheme provides a more colorful and dynamic appearance with increased color saturation. To enable it, use the mdColorScheme parameter:

const app = new Framework7({
  colors: {
    primary: '#007aff',
    mdColorScheme: 'vibrant' // enables vibrant color scheme
  }
})

This scheme is ideal for apps that want to emphasize color and create a more energetic visual experience.

Monochrome Color Scheme

The Monochrome color scheme provides a neutral, grayscale appearance. To enable it:

const app = new Framework7({
  colors: {
    primary: '#007aff',
    mdColorScheme: 'monochrome' // enables monochrome color scheme
  }
})

This scheme is perfect for apps that prefer a minimalist, elegant design with subtle color accents.

Default Color Scheme

If mdColorScheme is not specified or set to 'default', Framework7 uses the standard Material You color scheme:

const app = new Framework7({
  colors: {
    primary: '#007aff',
    mdColorScheme: 'default' // or omit this parameter
  }
})

Color schemes only affect the Material theme. The iOS theme appearance remains unchanged regardless of the mdColorScheme setting.

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.

Improve this Doc

On this page

Default Theme Color
Colors
Apply Color Themes
Dark Mode
Helper Classes
Primary Color Classes
Custom Color Theme
Material Color Schemes

Vibrant Color Scheme
Monochrome Color Scheme
Default Color Scheme

Change Color Theme