v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

カラーテーマ

    デフォルトのテーマカラー

    デフォルトのテーマカラーは以下のように設定されています。

    #007aff です。

    カラー

    Framework7には、すぐに使える15種類の追加カラーテーマが用意されています。

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

    カラーテーマの適用

    カラーテーマの適用は簡単です。必要な親要素にcolor-theme-[color]クラスを追加するだけです。親要素としては、body、app root、view、page、navbar、toolbar、list-blockなどが挙げられます。例えば、以下のようになります。

    <body class="color-theme-red">
    ...
</body>

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

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

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

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

    適用されたカラーテーマは、リンク、ボタン、フォーム要素、アイコンなどの装飾的な要素にのみ影響することに注意してください。基本的なテキストカラーや他のブロックの背景色は変更されません。

    ダークテーマ

    Framework7には、ダークテーマのレイアウトも用意されています。ダークテーマを適用するには、必要な親要素に「theme-dark」クラスを追加する必要があります。親要素としては、body、app root、view、page、navbar、toolbar、list-blockなどが考えられます。例えば、以下のようになります。

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

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

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

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

    ヘルパークラス

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

    • color-[color] - 個々のボタン、リンク、アイコンの色を変更したい場合。

      <a class="button color-red">Red button</a>

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

    原色クラス

    ヘルパークラスは、コンテキストカラーテーマと同じ色である、追加の「プライマリ」カラーをサポートしています。

    • text-color-primary - 要素のテキストカラーをテーマカラーに変更します。

    • bg-color-primary - 要素の背景色をテーマカラーに変更します。

    • border-color-primary - 要素のボーダーカラーをテーマカラーに変更します。

    カスタムカラーテーマ

    カスタムカラーテーマを設定するには、いくつかのCSS変数を指定する必要があります。

    • --f7-theme-color - テーマカラーのHEX値です。
    • --f7-theme-color-shade - テーマカラーを8%濃くします。例えば、ボタンが押されている状態では必須です。
    • --f7-theme-color-tint - テーマの色を8%明るくします。例えば、押されたボタンの状態では、必須です。
    • --f7-theme-color-rgb - テーマカラーのRGB値です。半透明の要素に必要です。

    例えば、カスタムテーマカラーが#f00(赤)であれば、以下の変数をCSSに追加するだけでOKです。

    :root {
  --f7-theme-color: #f00;
  --f7-theme-color-shade: #d60000;
  --f7-theme-color-tint: #ff2929;
  --f7-theme-color-rgb: 255, 0, 0;
}

    また、新しいcolorThemeCSSPropertiesユーティルがあり、必要なCSS変数を生成することができます。

    /* Generate CSS variables for red theme color */
app.utils.colorThemeCSSProperties('#f00');

    これは次のようなオブジェクトを返します。

    {
  "--f7-theme-color": "#f00",
  "--f7-theme-color-rgb": "255, 0, 0",
  "--f7-theme-color-shade": "#d60000",
  "--f7-theme-color-tint": "#ff2929"
}

    カラーテーマの生成

    logo_applelogo_androiddevice_desktop

    レイアウトテーマ

    ナビゲーションバーのスタイル

    カラー

    生成されたスタイル

    以下のCSSスタイルをアプリのスタイルにコピーしてください。

    /*
      Change color or navigation bars style to see genearted styles
    */

    CSS 変数

    /*====================
  Primary Theme
  ==================== */
.text-color-primary {
  --f7-theme-color-text-color: var(--f7-theme-color);
}
.bg-color-primary {
  --f7-theme-color-bg-color: var(--f7-theme-color);
}
.border-color-primary {
  --f7-theme-color-border-color: var(--f7-theme-color);
}
.ripple-color-primary {
  --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
}
/*====================
  Colors List
  ==================== */
:root {
  --f7-color-red: #ff3b30;
  --f7-color-red-rgb: 255, 59, 48;
  --f7-color-red-shade: #ff1407;
  --f7-color-red-tint: #ff6259;
  --f7-color-green: #4cd964;
  --f7-color-green-rgb: 76, 217, 100;
  --f7-color-green-shade: #2cd048;
  --f7-color-green-tint: #6ee081;
  --f7-color-blue: #2196f3;
  --f7-color-blue-rgb: 33, 150, 243;
  --f7-color-blue-shade: #0c82df;
  --f7-color-blue-tint: #48a8f5;
  --f7-color-pink: #ff2d55;
  --f7-color-pink-rgb: 255, 45, 85;
  --f7-color-pink-shade: #ff0434;
  --f7-color-pink-tint: #ff5676;
  --f7-color-yellow: #ffcc00;
  --f7-color-yellow-rgb: 255, 204, 0;
  --f7-color-yellow-shade: #d6ab00;
  --f7-color-yellow-tint: #ffd429;
  --f7-color-orange: #ff9500;
  --f7-color-orange-rgb: 255, 149, 0;
  --f7-color-orange-shade: #d67d00;
  --f7-color-orange-tint: #ffa629;
  --f7-color-purple: #9c27b0;
  --f7-color-purple-rgb: 156, 39, 176;
  --f7-color-purple-shade: #7e208f;
  --f7-color-purple-tint: #b92fd1;
  --f7-color-deeppurple: #673ab7;
  --f7-color-deeppurple-rgb: 103, 58, 183;
  --f7-color-deeppurple-shade: #563098;
  --f7-color-deeppurple-tint: #7c52c8;
  --f7-color-lightblue: #5ac8fa;
  --f7-color-lightblue-rgb: 90, 200, 250;
  --f7-color-lightblue-shade: #32bbf9;
  --f7-color-lightblue-tint: #82d5fb;
  --f7-color-teal: #009688;
  --f7-color-teal-rgb: 0, 150, 136;
  --f7-color-teal-shade: #006d63;
  --f7-color-teal-tint: #00bfad;
  --f7-color-lime: #cddc39;
  --f7-color-lime-rgb: 205, 220, 57;
  --f7-color-lime-shade: #bac923;
  --f7-color-lime-tint: #d6e25c;
  --f7-color-deeporange: #ff6b22;
  --f7-color-deeporange-rgb: 255, 107, 34;
  --f7-color-deeporange-shade: #f85200;
  --f7-color-deeporange-tint: #ff864b;
  --f7-color-gray: #8e8e93;
  --f7-color-gray-rgb: 142, 142, 147;
  --f7-color-gray-shade: #79797f;
  --f7-color-gray-tint: #a3a3a7;
  --f7-color-white: #ffffff;
  --f7-color-white-rgb: 255, 255, 255;
  --f7-color-white-shade: #ebebeb;
  --f7-color-white-tint: #ffffff;
  --f7-color-black: #000000;
  --f7-color-black-rgb: 0, 0, 0;
  --f7-color-black-shade: #000000;
  --f7-color-black-tint: #141414;
}
/*====================
  Color Themes
  ==================== */
.color-theme-red {
  --f7-theme-color: #ff3b30;
  --f7-theme-color-rgb: 255, 59, 48;
  --f7-theme-color-shade: #ff1407;
  --f7-theme-color-tint: #ff6259;
}
.color-theme-green {
  --f7-theme-color: #4cd964;
  --f7-theme-color-rgb: 76, 217, 100;
  --f7-theme-color-shade: #2cd048;
  --f7-theme-color-tint: #6ee081;
}
.color-theme-blue {
  --f7-theme-color: #2196f3;
  --f7-theme-color-rgb: 33, 150, 243;
  --f7-theme-color-shade: #0c82df;
  --f7-theme-color-tint: #48a8f5;
}
.color-theme-pink {
  --f7-theme-color: #ff2d55;
  --f7-theme-color-rgb: 255, 45, 85;
  --f7-theme-color-shade: #ff0434;
  --f7-theme-color-tint: #ff5676;
}
.color-theme-yellow {
  --f7-theme-color: #ffcc00;
  --f7-theme-color-rgb: 255, 204, 0;
  --f7-theme-color-shade: #d6ab00;
  --f7-theme-color-tint: #ffd429;
}
.color-theme-orange {
  --f7-theme-color: #ff9500;
  --f7-theme-color-rgb: 255, 149, 0;
  --f7-theme-color-shade: #d67d00;
  --f7-theme-color-tint: #ffa629;
}
.color-theme-purple {
  --f7-theme-color: #9c27b0;
  --f7-theme-color-rgb: 156, 39, 176;
  --f7-theme-color-shade: #7e208f;
  --f7-theme-color-tint: #b92fd1;
}
.color-theme-deeppurple {
  --f7-theme-color: #673ab7;
  --f7-theme-color-rgb: 103, 58, 183;
  --f7-theme-color-shade: #563098;
  --f7-theme-color-tint: #7c52c8;
}
.color-theme-lightblue {
  --f7-theme-color: #5ac8fa;
  --f7-theme-color-rgb: 90, 200, 250;
  --f7-theme-color-shade: #32bbf9;
  --f7-theme-color-tint: #82d5fb;
}
.color-theme-teal {
  --f7-theme-color: #009688;
  --f7-theme-color-rgb: 0, 150, 136;
  --f7-theme-color-shade: #006d63;
  --f7-theme-color-tint: #00bfad;
}
.color-theme-lime {
  --f7-theme-color: #cddc39;
  --f7-theme-color-rgb: 205, 220, 57;
  --f7-theme-color-shade: #bac923;
  --f7-theme-color-tint: #d6e25c;
}
.color-theme-deeporange {
  --f7-theme-color: #ff6b22;
  --f7-theme-color-rgb: 255, 107, 34;
  --f7-theme-color-shade: #f85200;
  --f7-theme-color-tint: #ff864b;
}
.color-theme-gray {
  --f7-theme-color: #8e8e93;
  --f7-theme-color-rgb: 142, 142, 147;
  --f7-theme-color-shade: #79797f;
  --f7-theme-color-tint: #a3a3a7;
}
.color-theme-white {
  --f7-theme-color: #ffffff;
  --f7-theme-color-rgb: 255, 255, 255;
  --f7-theme-color-shade: #ebebeb;
  --f7-theme-color-tint: #ffffff;
}
.color-theme-black {
  --f7-theme-color: #000000;
  --f7-theme-color-rgb: 0, 0, 0;
  --f7-theme-color-shade: #000000;
  --f7-theme-color-tint: #141414;
}
/*====================
  Color Overrides
  ==================== */
.color-red {
  --f7-theme-color: #ff3b30;
  --f7-theme-color-rgb: 255, 59, 48;
  --f7-theme-color-shade: #ff1407;
  --f7-theme-color-tint: #ff6259;
}
.text-color-red {
  --f7-theme-color-text-color: #ff3b30;
}
.bg-color-red {
  --f7-theme-color-bg-color: #ff3b30;
}
.border-color-red {
  --f7-theme-color-border-color: #ff3b30;
}
.ripple-color-red,
.ripple-red {
  --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
}
.color-green {
  --f7-theme-color: #4cd964;
  --f7-theme-color-rgb: 76, 217, 100;
  --f7-theme-color-shade: #2cd048;
  --f7-theme-color-tint: #6ee081;
}
.text-color-green {
  --f7-theme-color-text-color: #4cd964;
}
.bg-color-green {
  --f7-theme-color-bg-color: #4cd964;
}
.border-color-green {
  --f7-theme-color-border-color: #4cd964;
}
.ripple-color-green,
.ripple-green {
  --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
}
.color-blue {
  --f7-theme-color: #2196f3;
  --f7-theme-color-rgb: 33, 150, 243;
  --f7-theme-color-shade: #0c82df;
  --f7-theme-color-tint: #48a8f5;
}
.text-color-blue {
  --f7-theme-color-text-color: #2196f3;
}
.bg-color-blue {
  --f7-theme-color-bg-color: #2196f3;
}
.border-color-blue {
  --f7-theme-color-border-color: #2196f3;
}
.ripple-color-blue,
.ripple-blue {
  --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
}
.color-pink {
  --f7-theme-color: #ff2d55;
  --f7-theme-color-rgb: 255, 45, 85;
  --f7-theme-color-shade: #ff0434;
  --f7-theme-color-tint: #ff5676;
}
.text-color-pink {
  --f7-theme-color-text-color: #ff2d55;
}
.bg-color-pink {
  --f7-theme-color-bg-color: #ff2d55;
}
.border-color-pink {
  --f7-theme-color-border-color: #ff2d55;
}
.ripple-color-pink,
.ripple-pink {
  --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
}
.color-yellow {
  --f7-theme-color: #ffcc00;
  --f7-theme-color-rgb: 255, 204, 0;
  --f7-theme-color-shade: #d6ab00;
  --f7-theme-color-tint: #ffd429;
}
.text-color-yellow {
  --f7-theme-color-text-color: #ffcc00;
}
.bg-color-yellow {
  --f7-theme-color-bg-color: #ffcc00;
}
.border-color-yellow {
  --f7-theme-color-border-color: #ffcc00;
}
.ripple-color-yellow,
.ripple-yellow {
  --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
}
.color-orange {
  --f7-theme-color: #ff9500;
  --f7-theme-color-rgb: 255, 149, 0;
  --f7-theme-color-shade: #d67d00;
  --f7-theme-color-tint: #ffa629;
}
.text-color-orange {
  --f7-theme-color-text-color: #ff9500;
}
.bg-color-orange {
  --f7-theme-color-bg-color: #ff9500;
}
.border-color-orange {
  --f7-theme-color-border-color: #ff9500;
}
.ripple-color-orange,
.ripple-orange {
  --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
}
.color-purple {
  --f7-theme-color: #9c27b0;
  --f7-theme-color-rgb: 156, 39, 176;
  --f7-theme-color-shade: #7e208f;
  --f7-theme-color-tint: #b92fd1;
}
.text-color-purple {
  --f7-theme-color-text-color: #9c27b0;
}
.bg-color-purple {
  --f7-theme-color-bg-color: #9c27b0;
}
.border-color-purple {
  --f7-theme-color-border-color: #9c27b0;
}
.ripple-color-purple,
.ripple-purple {
  --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
}
.color-deeppurple {
  --f7-theme-color: #673ab7;
  --f7-theme-color-rgb: 103, 58, 183;
  --f7-theme-color-shade: #563098;
  --f7-theme-color-tint: #7c52c8;
}
.text-color-deeppurple {
  --f7-theme-color-text-color: #673ab7;
}
.bg-color-deeppurple {
  --f7-theme-color-bg-color: #673ab7;
}
.border-color-deeppurple {
  --f7-theme-color-border-color: #673ab7;
}
.ripple-color-deeppurple,
.ripple-deeppurple {
  --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
}
.color-lightblue {
  --f7-theme-color: #5ac8fa;
  --f7-theme-color-rgb: 90, 200, 250;
  --f7-theme-color-shade: #32bbf9;
  --f7-theme-color-tint: #82d5fb;
}
.text-color-lightblue {
  --f7-theme-color-text-color: #5ac8fa;
}
.bg-color-lightblue {
  --f7-theme-color-bg-color: #5ac8fa;
}
.border-color-lightblue {
  --f7-theme-color-border-color: #5ac8fa;
}
.ripple-color-lightblue,
.ripple-lightblue {
  --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
}
.color-teal {
  --f7-theme-color: #009688;
  --f7-theme-color-rgb: 0, 150, 136;
  --f7-theme-color-shade: #006d63;
  --f7-theme-color-tint: #00bfad;
}
.text-color-teal {
  --f7-theme-color-text-color: #009688;
}
.bg-color-teal {
  --f7-theme-color-bg-color: #009688;
}
.border-color-teal {
  --f7-theme-color-border-color: #009688;
}
.ripple-color-teal,
.ripple-teal {
  --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
}
.color-lime {
  --f7-theme-color: #cddc39;
  --f7-theme-color-rgb: 205, 220, 57;
  --f7-theme-color-shade: #bac923;
  --f7-theme-color-tint: #d6e25c;
}
.text-color-lime {
  --f7-theme-color-text-color: #cddc39;
}
.bg-color-lime {
  --f7-theme-color-bg-color: #cddc39;
}
.border-color-lime {
  --f7-theme-color-border-color: #cddc39;
}
.ripple-color-lime,
.ripple-lime {
  --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
}
.color-deeporange {
  --f7-theme-color: #ff6b22;
  --f7-theme-color-rgb: 255, 107, 34;
  --f7-theme-color-shade: #f85200;
  --f7-theme-color-tint: #ff864b;
}
.text-color-deeporange {
  --f7-theme-color-text-color: #ff6b22;
}
.bg-color-deeporange {
  --f7-theme-color-bg-color: #ff6b22;
}
.border-color-deeporange {
  --f7-theme-color-border-color: #ff6b22;
}
.ripple-color-deeporange,
.ripple-deeporange {
  --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
}
.color-gray {
  --f7-theme-color: #8e8e93;
  --f7-theme-color-rgb: 142, 142, 147;
  --f7-theme-color-shade: #79797f;
  --f7-theme-color-tint: #a3a3a7;
}
.text-color-gray {
  --f7-theme-color-text-color: #8e8e93;
}
.bg-color-gray {
  --f7-theme-color-bg-color: #8e8e93;
}
.border-color-gray {
  --f7-theme-color-border-color: #8e8e93;
}
.ripple-color-gray,
.ripple-gray {
  --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
}
.color-white {
  --f7-theme-color: #ffffff;
  --f7-theme-color-rgb: 255, 255, 255;
  --f7-theme-color-shade: #ebebeb;
  --f7-theme-color-tint: #ffffff;
}
.text-color-white {
  --f7-theme-color-text-color: #ffffff;
}
.bg-color-white {
  --f7-theme-color-bg-color: #ffffff;
}
.border-color-white {
  --f7-theme-color-border-color: #ffffff;
}
.ripple-color-white,
.ripple-white {
  --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-black {
  --f7-theme-color: #000000;
  --f7-theme-color-rgb: 0, 0, 0;
  --f7-theme-color-shade: #000000;
  --f7-theme-color-tint: #141414;
}
.text-color-black {
  --f7-theme-color-text-color: #000000;
}
.bg-color-black {
  --f7-theme-color-bg-color: #000000;
}
.border-color-black {
  --f7-theme-color-border-color: #000000;
}
.ripple-color-black,
.ripple-black {
  --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}