最新のブラウザには、ユーザーがテーマの好みをlightまたはdarkに設定したかどうかを、prefers-color-schemeキーワードを使用して検出する方法があります。
この値は、メディアクエリで使用して、ウェブサイトのスタイルをそれに応じて変更できます。
@media (prefers-color-scheme: dark) {
:root {
/* Update CSS variables */
}
}
ただし、ウェブサイトがこの設定を変更することはできません。そのため、data-themeHTML属性またはtheme-darkCSSクラスを追加することをお勧めします。
これがBulmaがダークテーマを定義する方法です
@media (prefers-color-scheme: dark) {
:root {
/* Update CSS variables */
}
}
[data-theme=dark],
.theme-dark {
/* Update CSS variables */
}
これらのルールを使用すると
- ユーザー設定が設定されていない場合、ウェブサイトはデフォルトでライトになります
- ユーザーが設定を
lightに設定した場合もライトになります - ユーザーが設定を
darkに設定した場合、ウェブサイトはダークになります
ページ内でダークモードを強制する #
HTML属性またはCSSクラスを使用するだけで、HTMLの一部でダークモードを有効にできます
<div>
This is in Light Mode if the user hasn't set a preference, or if their preference is set to <code>light</code>.
</div>
<div data-theme="dark">
This is in Dark Mode
</div>
<div class="theme-dark">
This is also in Dark Mode
</div>
ウェブページ全体でダークモードを強制する #
ウェブページ全体でダークモードを有効にする場合は、<html>要素に属性またはクラスを設定するだけです
<html data-theme="dark">
<!-- Or -->
<html class="theme-dark">
ダークテーマの作成方法 #
これがsass/themes/dark.scssファイルの内容です
@use "sass/utilities/initial-variables" as iv;
@use "sass/utilities/css-variables" as cv;
@use "sass/utilities/derived-variables" as dv;
@use "sass/themes/setup";
// The main lightness of this theme
$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;
// The main scheme color, used to make calculations
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
@mixin dark-theme {
// Required: update the lightness colors and hover/active states
@include cv.register-vars(
(
"scheme-brightness": "dark",
"scheme-main-l": $scheme-main-l,
"scheme-main-bis-l": $scheme-main-l + 2%,
"scheme-main-ter-l": $scheme-main-l + 4%,
"background-l": $background-l,
"border-weak-l": 21%,
"border-l": 24%,
"text-weak-l": 53%,
"text-l": $text-l,
"text-strong-l": 93%,
"text-title-l": 100%,
"hover-background-l-delta": 5%,
"active-background-l-delta": 10%,
"hover-border-l-delta": 10%,
"active-border-l-delta": 20%,
"hover-color-l-delta": 5%,
"active-color-l-delta": 10%,
)
);
// Required: update the "on scheme" colors since the main scheme color is changed
// from white (100% lightness)
// to black (11% lightness in this case)
@each $name, $color in dv.$colors {
@include cv.generate-on-scheme-colors($name, $color, $scheme-main);
}
// Optional: update the shadow color
@include cv.register-hsl("shadow", white);
}
このmixinは、CSS変数とその新しい値のリストを出力します。
prefer-color-schemeメディアクエリでこのテーマを使用するには、次のように記述します
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@include cv.system-theme($name: "dark") {
@include dark.dark-theme;
}
[data-theme=dark]および.theme-darkセレクターでこのテーマを使用するには、次のように記述します
@use "sass/utilities/css-variables" as cv;
@use "sass/themes/dark";
@use "sass/themes/setup";
@include cv.bulma-theme($name: "dark") {
@include dark.dark-theme;
@include setup.setup-theme;
}
bulma-theme() mixin
このmixinを使用すると、適切なHTML属性セレクターとCSSクラスセレクターの両方を使用してCSSルールセットを生成できます。名前は$nameパラメーターで定義されます。
@use "sass/utilities/css-variables" as cv;
@include cv.bulma-theme($name: "my-theme") {
// Your code
}
これにより、次のように出力されます
[data-theme=my-theme],
.theme-my-theme {
/* Your code */
}
system-theme() mixin
このmixinは、@media (prefers-color-scheme: $name)メディアクエリを生成します。
@use "sass/utilities/css-variables" as cv;
@include cv.system-theme($name: "dark") {
// Your code
}
これにより、次のように出力されます
@media (prefers-color-scheme: dark) {
:root {
/* Your code */
}
}
register-vars()関数
すべてのBulma CSS変数は、bulma-というプレフィックスが付いています。このプレフィックスは、$cssvars-prefix: "bulma-";Sass変数で定義されています。
このプレフィックスを使用してすべてのCSS変数を記述するのは面倒な場合があるため、Bulmaは新しい変数を登録するためのSass関数を提供しています：register-vars()。
この関数は、name: valueペアのSassマップを受け入れます。
@use "sass/utilities/css-variables" as cv;
$scheme-main-l: 11%;
$background-l: 14%;
$text-l: 71%;
@include cv.bulma-theme($name: "my-theme") {
@include cv.register-vars(
(
"scheme-brightness": "dark",
"scheme-main-l": $scheme-main-l,
"scheme-main-bis-l": $scheme-main-l + 2%,
"scheme-main-ter-l": $scheme-main-l + 4%,
"background-l": $background-l,
"border-weak-l": 21%,
"border-l": 24%,
"text-weak-l": 53%,
"text-l": $text-l,
"text-strong-l": 93%,
"text-title-l": 100%,
"hover-background-l-delta": 5%,
"active-background-l-delta": 10%,
"hover-border-l-delta": 10%,
"active-border-l-delta": 20%,
"hover-color-l-delta": 5%,
"active-color-l-delta": 10%,
)
);
}
明度の更新
ダークモードの場合、Bulmaはメインのスキームカラーの色相と彩度を保持します。ただし、背景、境界線、テキストの色、およびホバー/アクティブ状態の明度を反転します。
| 明度名 | ライトモード（デフォルト） | ダークモード（デフォルト） | ||
|---|---|---|---|---|
--bulma-scheme-main-l |
100% |
11% |
||
--bulma-scheme-main-bis-l |
98% |
13% |
||
--bulma-scheme-main-ter-l |
98% |
15% |
||
--bulma-background-l |
96% |
14% |
||
--bulma-border-weak-l |
93% |
21% |
||
--bulma-border-l |
86% |
24% |
||
--bulma-text-weak-l |
48% |
53% |
||
--bulma-text-l |
29% |
71% |
||
--bulma-text-strong-l |
21% |
93% |
||
--bulma-text-title-l |
14% |
100% |
||
--bulma-hover-background-l-delta |
5% |
5% |
||
--bulma-active-background-l-delta |
10% |
10% |
||
--bulma-hover-border-l-delta |
10% |
10% |
||
--bulma-active-border-l-delta |
20% |
20% |
||
--bulma-hover-color-l-delta |
5% |
5% |
||
--bulma-active-color-l-delta |
10% |
10% |
||
generate-on-scheme-colors()関数
スキームカラーは、次の目的で使用されるカラーです
- 背景
- 境界線
- テキストシェード
- 強調テキスト
- 弱強調テキスト
- タイトルテキスト
- および通常のテキスト
7つの主要な各色について、デフォルトのBulmaテーマはスキーム上の色合いを生成します。つまり、メインのスキームカラーに適切に見える各色の色合いです。
ライトモードでは、次のようになります
リンク |
var(--bulma-link-on-scheme) |
|---|---|
プライマリ |
var(--bulma-primary-on-scheme) |
情報 |
var(--bulma-info-on-scheme) |
成功 |
var(--bulma-success-on-scheme) |
警告 |
var(--bulma-warning-on-scheme) |
危険 |
var(--bulma-danger-on-scheme) |
ダークモードではこれらの色の明度を反転するため、ページの背景は白から黒に変わります。したがって、7つの主要なすべての色の-on-schemeカラーを更新する必要があります。
ダークモードでは、次のようになります
リンク |
var(--bulma-link-on-scheme) |
|---|---|
プライマリ |
var(--bulma-primary-on-scheme) |
情報 |
var(--bulma-info-on-scheme) |
成功 |
var(--bulma-success-on-scheme) |
警告 |
var(--bulma-warning-on-scheme) |
危険 |
var(--bulma-danger-on-scheme) |
独自のテーマを作成している場合は、各色のgenerate-on-scheme-colors()を使用して、新しい-on-schemeカラーを自動的に生成できます。3つのパラメータを取ります
$nameは文字列です。例："primary"$colorは色の値です。例：$scheme-mainは、テーマのメインスキームカラー（ページ背景として使用されるもの）です。例：#fff
完全なコードは次のようになります
@use "sass/utilities/css-variables" as cv;
@use "sass/utilities/derived-variables" as dv;
$scheme-main-l: 11%;
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
@include cv.bulma-theme($name: "my-theme") {
@each $name, $color in dv.$colors {
@include cv.generate-on-scheme-colors($name, $color, $scheme-main);
}
}
setup-theme()関数
Bulmaでは、一部のCSS変数は他のCSS変数を参照します。たとえば、--bulma-scheme-mainは次のように定義されています
:root {
--bulma-scheme-main: hsl(
var(--bulma-scheme-h)
var(--bulma-scheme-s)
var(--bulma-scheme-main-l)
);
}
CSS変数の仕組みにより、--bulma-scheme-main-lの値を更新する場合は、--bulma-scheme-mainを再度定義する必要があります。それがsetup-theme()が行うことです。
[data-theme=my-theme],
.theme-my-theme {
--bulma-scheme-main-l: 7%;
--bulma-scheme-main: hsl(
var(--bulma-scheme-h)
var(--bulma-scheme-s)
var(--bulma-scheme-main-l)
);
}
独自のテーマを作成する場合は、独自のCSS変数を設定した後に、この関数を呼び出すだけです
@use "sass/themes/setup";
@include cv.bulma-theme($name: "my-theme") {
// Set your own CSS variables,
// either manually:
--bulma-scheme-main-l: 7%;
// or using Bulma's register-vars() function:
@include register-vars((
"bulma-scheme-main-l": 7%,
));
// Then, setup the new theme.
@include setup.setup-theme();
}