ユーザーエクスペリエンスを向上させるためにネイティブのカラースキーム設定をオーバーライドするにはどうすればよいですか?

ネイティブ カラー スキーム設定のオーバーライド

ダーク モードの実装は、さまざまなオペレーティング システムで広く採用されていることから重要になっています。 CSS メディア ルール @media (prefers-color-scheme: dark) を通じてネイティブ ブラウザーのサポートが存在しますが、ユーザーの好みに完全に対応していない場合や、Microsoft Edge などのサポートされていないブラウザーに対応していない可能性があります。

システム設定の分離ウェブサイトのテーマから

最適なユーザー制御を提供するには、ユーザーがシステムのカラースキーム設定をオーバーライドできるようにすることが重要です。これにより、特定の Web サイトで好みのテーマを選択できるようになります。これを実現するには、CSS 変数と JavaScript の組み合わせが利用されます。

CSS 構成

CSS 変数はテーマ パラメータを定義します:

<code class="css">:root {
  --font-color: #000;
  --link-color: #1C75B9;
  --link-white-color: #fff;
  --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
  --font-color: #c1bfbd;
  --link-color: #0a86da;
  --link-white-color: #c1bfbd;
  --bg-color: #333;
}</code>

柔軟性を確保するために、スタイルシート全体で変数が使用されます。

<code class="css">body {
  color: #000;
  color: var(--font-color);
  background: rgb(243,243,243);
  background: var(--bg-color);
}</code>

JavaScript の実装

JavaScript は、ユーザー設定の検出とテーマ間の切り替えにおいて重要な役割を果たします。

<code class="javascript">function detectColorScheme() {
  let theme = "light";

  if (localStorage.getItem("theme") == "dark") {
    theme = "dark";
  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    theme = "dark";
  }

  if (theme == "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
}

detectColorScheme();</code>

toggleTheme 関数はテーマの切り替えを処理します:

<code class="javascript">function switchTheme(e) {
  if (e.target.checked) {
    localStorage.setItem('theme', 'dark');
    document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
    document.documentElement.setAttribute('data-theme', 'light');
  }  
}</code>

この JavaScript はテーマの自動検出を保証し、ユーザーがチェックボックスでテーマをオーバーライドできるようにします:

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
  <input type="checkbox" id="checkbox_theme">
</label></code>

結論

CSS 変数と JavaScript を組み合わせることで、システム設定に関係なく、ユーザーが Web サイトの配色を制御できるようになります。このアプローチにより、ユーザー エクスペリエンスが向上し、個人の好みやさまざまなブラウザーの制限に対応できます。

以上がユーザーエクスペリエンスを向上させるためにネイティブのカラースキーム設定をオーバーライドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。