Color Themes

Default Theme Color

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

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

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>

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.

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.