このページはGitLabのダークモードの開発者についてのページです。ダークモードを有効にする方法については、シンタックスハイライトのテーマを変更するをご覧ください。

ダークモードの仕組み

短いバージョンです：カラーパレットを逆にして、いくつかのBootstrap変数を上書きします。

以下に注意してください。

  • ダークモードパレットはapp/assets/stylesheets/themes/_dark.scss で定義されています。これをapplication.scssの_前に_読み込んでapplication_dark.css
    • _dark.scss で2種類の変数を定義しています：
      • SCSS 変数は、フレームワーク、コンポーネント、ユーティリティクラスで使用されます。
      • CSS 変数は、app/assets/stylesheets/page_bundles ディレクトリ内のすべての色に使用されます。
  • app/views/layouts/_head.html.haml その後、ユーザーのテーマ設定に基づいてapplication またはapplication_dark を読み込みます。

すべてのpage_bundle ファイルの_dark.css バリアントを個別に生成したくないので、フォールバックとして CSS 変数と SCSS 変数を使用しています。これは、page_bundles CSS を生成するときに、_variables.scssから変数値を取得するため、SCSS 変数がライトモードの値を持つからです。

_dark.scss で定義された CSS 変数はブラウザで利用できるため、ダークモード用の正しい色を持っています。

color: var(--gray-500, $gray-500);

ユーティリティクラス

ユーティリティ・クラスには、反転された値を含む別のutilities_dark.css ファイルを生成します。そのため、gl-text-white のようなクラスは、ダークモードでは#333 のテキスト色を指定します。これは、色を追加したいたびに複数のクラスを追加する必要がないことを意味します。

現在のところ、ダークモードでのみユーティリティクラスを設定することはできません。近いうちにこのイシューに対応したいと思います。

ライトモードとダークモードで異なる値を使用

ほとんどの場合、ライトモードとダークモードで同じ値を使うことができます。それが不可能な場合は、ダークモードがbody に追加する.gl-dark クラスを使用してオーバーライドを追加できます：

color: $gray-700;
.gl-dark & {
  color: var(--gray-500);
}
note
SCSSフォールバックに異なる値を使用することは避けてください。
// avoid where possible
// --gray-500 (#999) in dark mode
// $gray-700 (#525252) in light mode
color: var(--gray-500, $gray-700);

ライトモードに CSS 変数を追加する予定です。そうなれば、SCSS フォールバックに異なる値を指定しても機能しなくなります。

SCSS変数を使用するタイミング

SCSS では CSS では（簡単に）できないことがいくつかあります：

  • lighten
  • darken
  • color-yiq (色のコントラスト)

これらが必要な場合は、SCSS変数を使うべきです。