カラースキーム

デフォルトテーマカラー

デフォルトのテーマカラーは次のとおりです: #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`
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`

カラースキームの適用

カラースキームの適用は簡単です。必要な親要素にcolor-[color]クラスを追加するだけです。親要素はbody、アプリルート、ビュー、ページ、ナビゲーションバー、ツールバー、リストブロックなどです。例：

<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、アプリルート、ビュー、ページ、ナビゲーションバー、ツールバー、リストブロックなどです。例：

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

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

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

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

ヘルパークラス

カラースキームの有無にかかわらず使用できる追加のヘルパークラスもあります。

text-color-[color] - 要素のテキストカラーを変更する場合
```
<p class="text-color-red">Red color text</p>
```
bg-color-[color] - ブロックや要素に事前に定義された背景色を簡単に設定する場合
```
<span class="badge bg-color-pink">14</span> - pink badge
```
border-color-[color] - 事前に定義された枠線の色を設定する場合
```
<div class="button border-color-red">...</div>
```

もちろん、これらのヘルパークラスを組み合わせることもできます。

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

プライマリカラークラス

ヘルパークラスは、コンテキストのカラースキームと等しい追加のprimaryカラーをサポートしています。

text-color-primary - 要素のテキストカラーをテーマカラーに変更する場合。
bg-color-primary - 要素の背景色をテーマカラーに変更する場合。
border-color-primary - 要素の枠線の色をテーマカラーに変更する場合。

カスタムカラースキーム

カスタムカラースキームを設定するには、app.colorsパラメーターでprimaryカラーを指定する必要があります。

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スタイルが動的に再生成されます。

このドキュメントを改善する

このページで

デフォルトテーマカラー
カラー
カラースキームの適用
ダークモード
ヘルパークラス
プライマリカラークラス
カスタムカラースキーム
カラースキームの変更