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

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

Mary-Kate Olsen

リリース： 2024-10-26 08:25:02

オリジナル

314 人が閲覧しました

How to Override the Native Color-Scheme Setting for a Better User Experience?

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

ダークモードの実装は、さまざまなオペレーティングシステムで広く採用されていることから重要になっています。 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 サイトの他の関連記事を参照してください。