DarkMode(2):ダークモードソリューション-css色変数実装Dark Mode

ダークモード実現、最初の設計は、前のテーマモードを参考にします.複数セットのテーマ/配色/肌とは、私たちによく見られる肌交換機能です.肌を変える簡単な実現はcssを交換して異なるスタイルで異なる肌の色を表現することです.
以前は違う色の肌を作っていましたが、ダークモードはその中の1つのブラックダークテーマを作ることができます.
一般的な方法はless、sass、post-cssで、色を変数から抽出します.次に、異なるスタイルをパッケージ化して出力します.すなわち、次のようになります.

CSS前処理は直接に複数セットのテーマスタイルを生成する

色値

の代わりにLess,stylusまたはsassの変数を使用する.

複数のトピックカラー構成

を構成する.

grunt/gulp/webpackなどのツールを利用して複数セットのテーマスタイル

を出力する.

ページのロード後、ユーザのニーズに応じて異なるスタイルリスト

をロードする.
「Webpackスキンケア機能マルチテーマ/配色スタイルパッケージソリューション」をお勧めします.プロファイル:
https://github.com/hiyangguo/webpack-mutiple-theme-bundle-css-demo/blob/master/webpack.config.js
ここはlessを例にして、sassの配置、少し修正すればいいので、ここでは贅沢をしないで、googleはすべて検索することができるはずで、この編を推薦するのもついでに探します
この方式はbootstrap時代に流行し、phpコンパイルlessやjavaコンパイル:java-jar jsも使われた.jar less-rhino-1.4.0.js listing3.less > listing3.css

Webpack loader modifyVars複数のスタイルを生成

Webpack自体はlessファイルをパッケージ化する機能を備えておらず、最終的にこの部分の機能を実現したのはless-loaderであり、このローダはlessをCSSに変換し、webpackではファイルやモジュールごとに有効なJSモジュールであるため、css-loaderがCSSスタイルファイルをJSモジュールに変換する必要がある.
この時私たちはすでに生成したdist/styleを持っています.js、このモジュールではスタイルを文字列にエクスポートして配列に保存するだけで、style-loaderが配列をstyleラベルに変換する必要があります.
less-loaderは主体のカスタマイズを実現するのに役立ち、この2つの構成を通じて、一部のスタイルを変数から抽出し、異なる変数を通じて異なるテーマに組み合わせることができます.

globalVars:lessファイルの上部に@VariableName:xxを1行追加することに相当します.

modifyVars:lessファイルの下部に変数@variable:xxを1行追加することに相当します.

例えばant-designカスタムトピック、公式demo:https://ant.design/docs/react/customize-theme-cn
実はこれは第1の方法とあまり差がなくて、現在フェイスブックyoutubeなど、すべてcss変数を採用して実現します

メディアクエリーとcss変数の実装

今利用できる

CSSのメディアクエリー方法:prefers-color-scheme方法はW 3 Cドラフト仕様にもあります.https://caniuse.com/?search=prefers-color-scheme

CSS変数:CSS variables、CSS custom properties CSS変数IEを除いて、その他の各ブラウザはすべて支持するのが比較的に良いです:https://caniuse.com/?search=variables

両者を組み合わせると,ページトピック追従システムが自動的に深浅モードを切り替えることができる.

CSSのメディア照会

prefers-color-schemeは、ユーザがシステムのテーマ色を明るい色または暗い色に設定したかどうかを検出するためのCSSメディア特性である.異なるトピックモードでCSSスタイルを設定すると、ブラウザは現在のシステムトピックに基づいて対応するCSSスタイルを自動的にロードします.lightは浅い色のトピック、darkは濃い色のトピック、no-preferenceはトピックが得られない場合の適切なスキームを表します.
CSS

@media (prefers-color-scheme: light) {
    .article {
        background:#fff;
        color: #000;
    }
}
@media (prefers-color-scheme: dark) {
    .article {
        background:#000;
        color: white;
        }
}
@media (prefers-color-scheme: no-preference) {
    .article {
        background:#fff;
        color: #000;
    }
}

リンクラベル

一般的にlinkラベルで解決することをお勧めします

CSS変数+メディアクエリー

window.matchMedia (https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia)メソッドは、指定したメディアクエリー文字列の解析結果をクエリーするために使用できます.CSS変数とmatchMediaのクエリ結果を組み合わせて、対応するCSSトピックの色を設定します.この方法はより柔軟で,テーマ色を単独で抽出して適合させることができる.
CSS変数の役割ドメインはCSSの「積層」ルールと一致し、最も優先度の高い宣言が有効になります.だからbodyに「dark」クラス名が存在する場合:root.darkは有効になります.そうしないと、rootは有効になります.

.article { 
  color: var(--text-color, #eee); 
  background: var(--text-background, #fff); 
} 
:root { 
  --text-color: #000; 
  --text-background: #fff; 
} 
:root .dark { 
  --text-color: #fff; 
  --text-background: #000; 
}

matchMediaマッチングトピックメディア、濃い色モードマッチング(prefers-color-scheme:dark)、浅い色モードマッチング(prefers-color-scheme:light)を使用します.
テーマモードを傍受して、濃い色のモードの時bodyのためにクラス名darkを追加して、CSS変数の応答式の配置の特徴によって、自動的にdarkクラス名の下のCSSを発効します.

const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)'); 
//            
if (darkMode && darkMode.matches) { 
  document.body.classList.add('dark'); 
} 
//          
darkMode && darkMode.addEventListener('change', e => { 
  if (e.matches) { 
    document.body.classList.add('dark'); 
  } else { 
    document.body.classList.remove('dark');  
  } 
});

では、CSS変数がサポートされていないIEブラウザについてはどうすればいいのでしょうか.互換性処理をしないとそのページがめちゃくちゃになるかもしれません.互換性のないブラウザに対してポケット処理を行う必要があります.ここでは、webpackなどの構築ツールでpost-cssのpostcss-css-variables(https://www.npmjs.com/package/postcss-css-variables)プラグインは、CSS変数に対応する色値を自動的に解析し、元のCSS定義の上に新しいCSSスタイルを追加し、CSS変数ブラウザをサポートしない互換性を実現します.

//     postcss.config.js 
module.exports = { 
  plugins: { 
    "postcss-css-variables": { 
      preserve: true, //    var()    
      preserveInjectedVariables: false, //             
      variables: require("./page.json"), // CSS   ，       
    } 
  } 
};

現在のWeb、Appプロジェクトの多くはサードパーティのオープンソースコンポーネントライブラリを参照しており、コンポーネントライブラリでは一般的にSass、LessなどのCSSプリプロセッサを使用してコンポーネントのベース色値として色変数を定義し、個別にプロファイルとして抽出します.したがって、プロジェクトがコンポーネントライブラリを使用する場合、ベースカラー値の変更に基づいてトピックをカスタマイズできます.では、プロジェクトに対する濃い色のパターンの適合案も同様で、主に3つのステップに分けられます.

コンポーネントライブラリ濃淡色テーマ適合

の項目の中の濃い浅い色の色は

に合う.

CSS変数のページへの注入を完了する

上のは変数を利用して、スタイルを制御します.

sass変数とcss変数の処理

$var-element:'--';
// sass variable map 
$colors: (
  color-black: #FFBB00
);

// loop over each name, color
:root {
  // each item in color map
  @each $name, $color in $colors {
    #{$var-element}#{$name}: #{$color};
  }
}

 
参考記事:
ダークモード適合ガイドhttps://www.zoo.team/article/dark-theme
 
 
当サイトの文章《DarkMode(2):濃い色のモードの解決方案——css色の変数はDark Modeを実現します》を転載して、出典を明記してください:https://www.zhoulujun.cn/html/webfront/style/darkMode/8558.html