<!-- 表示を切り替えてみたい要素  --><pclass="msg light">light mode</p><pclass="msg dark">dark mode</p><!-- モード切替スイッチ --><divclass="switch"><labelclass="switch-label"><inputtype="checkbox"id="js_mode_toggle"><spanclass="switch-mode"id="js_rotate"></span></label></div>

/* デフォルトはダークモード表示 */body{margin:0;padding:1em2em;color:#AAAE8D;background-color:#1D1D2C;transition-duration:1s;transition-property:color,background-color;}.msg{font-size:30px;font-weight:bold;}.dark{display:blcok;}.light{display:none;}/* ライトモードのとき */.js-mode-light{color:#000;background-color:whitesmoke;}.js-mode-light.light{display:block;}.js-mode-light.dark{display:none;}/* モード切り替えボタン */input[type="checkbox"]{display:none;}.switch{position:fixed;top:.5em;right:.5em;font-size:60px;}.switch-label{cursor:pointer;}.switch-mode{position:absolute;top:-120px;right:-120px;display:block;width:200px;height:200px;transform:rotate(0);transition:transform1s;}/* 月と太陽を対角線上に設置しておく。
   設定したspanを回したら太陽がひっくり返ってしまったので、transform scaleで上下反転した */.switch-mode::before{content:"🌙";position:absolute;left:0;bottom:0;}.switch-mode::after{content:"🌄";position:absolute;right:0;top:0;transform:scale(1,-1);}

// 要素やクラスを指定しておくconstcheckToggle=document.getElementById('js_mode_toggle');constrotateIcon=document.getElementById('js_rotate');constclassLight='js-mode-light';// デバイスがライトモードかどうかチェックconstisLight=window.matchMedia('(prefers-color-scheme: light)').matches;// ローカルストレージに保存するための適当なKey名constkeyLocalStorage='whike-theme-mode';// ローカルストレージの情報を取得constlocalTheme=localStorage.getItem(keyLocalStorage);// 絵文字を回転させる角度letnowRotate=0;// ローカルストレージの中身と、端末がライトモードかどうか（ie,edgeには無意味）をチェックif(localTheme==='light'){// ローカルストレージの情報が優先rotateInfinite();changeMode('light');}elseif(localTheme==='dark'){changeMode('dark');}elseif(isLight){rotateInfinite();changeMode('light');}// チェックボックスでの切り替え、選択をローカルストレージに保存// モード切替スイッチが変更されたら発動checkToggle.addEventListener('change',function(e){// 絵文字大回転rotateInfinite();// チェックされたらライトモード、されなければダークモードにし、ローカルストレージにどちらを選んだか保存するif(e.target.checked){changeMode('light');localStorage.setItem(keyLocalStorage,'light');}else{changeMode('dark');localStorage.setItem(keyLocalStorage,'dark');}});/**
 * テーマ切り替え
 * @param {String} mode 'light' もしくは 'dark'
 */functionchangeMode(mode){// 引数にしたがってbodyにクラスをつける// チェックボックス経由で変更かかったときはいいんだけど、ローカルストレージとかからモードを変えた場合にチェック状態がおかしくなるので、合わせておくif(mode==='light'){document.body.classList.add(classLight);checkToggle.checked=true;}elseif(mode==='dark'){document.body.classList.remove(classLight);checkToggle.checked=false;}}/**
 * 月と太陽アイコン無限回転
 * 呼ばれるたびに180度角度が追加されていく
 */functionrotateInfinite(){nowRotate+=180;rotateIcon.style.transform='rotate('+nowRotate+'deg)';}

.dark{display:block;}.light{display:none;}@media(prefers-color-scheme:light){.dark{display:none;}.light{display:block;}}