# カラー選択からライトモードとダークモードに切り替えた話
おはようございます.カラー選択からライトモードとダークモードに切り替えた話を書いています.カラー選択、実は結構自分は気に入っていたのだけどあまり使用されないだろうなぁという思いも前から思っていたのだけど、そのままにしていました.
切り替えたのは[ある動画](https://www.youtube.com/watch?v=55uUK-iJeNM)を視聴して、その中でライトモード、ダークモードの仕様に全てのブラウザが対応したことを語っていたので、だったらこの際ライトモードダークモードに変更しようと思い立ちました.
休日の終わりごろに思い立って、サービスとギャラリー以外はライトモードダークモードに切り替えが終わりました.ただ、一つ課題があって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();
});
```
明日へ続く
[  普通って何だろう🤔
](https://zip358.com/2026/02/10/%e6%99%ae%e9%80%9a%e3%81%a3%e3%81%a6%e4%bd%95%e3%81%a0%e3%82%8d%e3%81%86%f0%9f%a4%94.html)
[  紹介料はポイントで貰ってきたけど.
](https://zip358.com/2026/02/09/%e7%b4%b9%e4%bb%8b%e6%96%99%e3%81%af%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%e3%81%a7%e8%b2%b0%e3%81%a3%e3%81%a6%e3%81%8d%e3%81%9f%e3%81%91%e3%81%a9.html)
[  AIは能力の鏡だとさ.そうかも知れない.
](https://zip358.com/2026/02/08/ai%e3%81%af%e8%83%bd%e5%8a%9b%e3%81%ae%e9%8f%a1%e3%81%a0%e3%81%a8%e3%81%95-%e3%81%9d%e3%81%86%e3%81%8b%e3%82%82%e7%9f%a5%e3%82%8c%e3%81%aa%e3%81%84.html)
[  考え過ぎずに行動力.逆算出来れば凄いけどね.
](https://zip358.com/2026/02/07/%e8%80%83%e3%81%88%e9%81%8e%e3%81%8e%e3%81%9a%e3%81%ab%e8%a1%8c%e5%8b%95%e5%8a%9b-%e9%80%86%e7%ae%97%e5%87%ba%e6%9d%a5%e3%82%8c%e3%81%b0%e5%87%84%e3%81%84%e3%81%91%e3%81%a9%e3%81%ad.html)
[  ネガティブ思考は駄目なのか本当にそう？
](https://zip358.com/2026/02/06/%e3%83%8d%e3%82%ac%e3%83%86%e3%82%a3%e3%83%96%e6%80%9d%e8%80%83%e3%81%af%e9%a7%84%e7%9b%ae%e3%81%aa%e3%81%ae%e3%81%8b%e6%9c%ac%e5%bd%93%e3%81%ab%e3%81%9d%e3%81%86%ef%bc%9f.html)