颜色主题

默认主题颜色

默认主题颜色设置为：#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>

颜色

Framework7 带有 15 个额外的即用型颜色主题。

primary	`#007aff`
红色	`#ff3b30`
绿色	`#4cd964`
蓝色	`#2196f3`
粉色	`#ff2d55`
黄色	`#ffcc00`
橙色	`#ff9500`
紫色	`#9c27b0`
深紫色	`#673ab7`
浅蓝色	`#5ac8fa`
蓝绿色	`#009688`
酸橙绿	`#cddc39`
深橙色	`#ff6b22`
白色	`#ffffff`
黑色	`#000000`

应用配色主题

应用配色主题非常容易。你只需为所需的父元素添加 color-[颜色] 类即可。这可以是 body、app root、view、page、navbar、toolbar、list-block 等。例如

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

请注意，应用的配色主题只影响互动元素，如链接、按钮、表单元素、图标。它不会改变其他块上的基本文本颜色或背景颜色。

暗模式

Framework7 也提供额外的暗模式布局。要应用暗主题，我们需要为所需的父元素添加 dark 类。这可以是 body、app root、view、page、navbar、toolbar、list-block 等。例如

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

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

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

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

辅助类

还有一些额外的辅助类，可以在无/不使用配色主题的情况下使用

text-color-[颜色] - 如果你想改变所需元素的文本颜色
```
<p class="text-color-red">Red color text</p>
```
bg-color-[颜色] - 如果你想快速设置某些块或元素的预定义背景颜色
```
<span class="badge bg-color-pink">14</span> - pink badge
```
border-color-[颜色] - 如果你想设置预定义的边框颜色
```
<div class="button border-color-red">...</div>
```

当然，你还可以混合使用这些辅助类

<a class="button bg-color-blue text-color-white border-color-gray">...</a>

主颜色类

辅助类支持其他 主 颜色，它等于上下文配色主题。

text-color-primary - 将元素文本颜色更改为主题颜色。
bg-color-primary - 将元素背景颜色更改为主题颜色。
border-color-primary - 将元素边框颜色更改为主题颜色。

自定义配色主题

要设置自定义配色主题，我们需要在 app.colors 参数中指定 主 颜色

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

它将生成所有必需的 CSS 变量，并自动将其注入到文档中。

例如，如果自定义主题颜色为 #f00（红色），它将为主颜色生成并添加以下 CSS 样式到文档中

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

更改配色主题

也可以通过使用 app.setColorTheme 方法动态地更改/设置配色主题

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

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

调用 app.setColorTheme 方法将动态地重新生成所需的 CSS 样式。

改进此文档

在此页面上

默认主题颜色
颜色
应用配色主题
暗模式
辅助类
主颜色类
自定义配色主题
更改配色主题