カラー選択からライトモードとダークモードに切り替えた話

2025.09.22

Logging

おはようございます.カラー選択からライトモードとダークモードに切り替えた話を書いています.カラー選択、実は結構自分は気に入っていたのだけどあまり使用されないだろうなぁという思いも前から思っていたのだけど、そのままにしていました.

切り替えたのはある動画を視聴して、その中でライトモード、ダークモードの仕様に全てのブラウザが対応したことを語っていたので、だったらこの際ライトモードダークモードに変更しようと思い立ちました.

休日の終わりごろに思い立って、サービスとギャラリー以外はライトモードダークモードに切り替えが終わりました.ただ、一つ課題があってOS（オペレーションシステム）とブラウザのモード設定がチグハグだった場合、コメント欄などが見にくくなっています.

ここだけは今のところ保留にしています.

残りのサービスとギャラリーは近日中に変更しようと思っています.

一応、切り替えを行うソースコードを貼っときますね.

document.addEventListener('DOMContentLoaded', () => {
  const switchToggle = document.getElementById('flexSwitchCheckDefault');
  const htmlElement = document.documentElement;

  // ページの初期ロード時にテーマを設定
  function setInitialTheme() {
    // ローカルストレージに設定があれば、それを使う
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      htmlElement.setAttribute('data-theme', savedTheme);
      switchToggle.checked = savedTheme === 'dark';
    } else {
      // なければOSの設定を使う
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      htmlElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
      switchToggle.checked = isDarkMode;
    }
  }

  // スイッチが変更されたらテーマを切り替え、ローカルストレージに保存
  switchToggle.addEventListener('change', (event) => {
    const newTheme = event.target.checked ? 'dark' : 'light';
    htmlElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
  });

  // 初期テーマを設定
  setInitialTheme();
});

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2025年09月22 07:00日

タグ

```, オペレーション, カラー, ギャラリー, コード, ここ, こと, コメント, ごろ, サービス, システム, スイッチ, ストレージ, ソース, それ, ダーク, チグハグ, テーマ, ところ, ブラウザ, ページ, モード, ライド, ライトモードダークモード, ローカル, ロード, 一つ, 仕様, 以外, 休日, 使用, 保存, 保留, 全て, 切り替え, 初期, 動画, 場合, 変更, 対応, 思い, 明日, 残り, 自分, 視聴, 設定, 課題, 近日, 選択,