Result
ダークモードにも使えるテーマスイッチです。サンプルは簡単なものですがスタイルはCSSで制御しているので応用は効くと思います。
JavaScriptは切り替えとlocalStorageへの保存に利用されています。
javascript
//デフォルト設定const pressedButtonSelector = '[data-theme][aria-pressed="true"]';const defaultTheme = 'green';//buttonにセットしたカスタムデータ属性に準じてテーマ切り替えconst applyTheme = (theme) => { const target = document.querySelector(`[data-theme="${theme}"]`); document.documentElement.setAttribute("data-selected-theme", theme); document.querySelector(pressedButtonSelector).setAttribute('aria-pressed', 'false'); target.setAttribute('aria-pressed', 'true');};const handleThemeSelection = (event) => { const target = event.target; const isPressed = target.getAttribute('aria-pressed'); const theme = target.getAttribute('data-theme'); if(isPressed !== "true") { applyTheme(theme); localStorage.setItem('selected-theme', theme); }}//テーマに変更があるかチェックし、変更があればlocalStorageに保存const setInitialTheme = () => { const savedTheme = localStorage.getItem('selected-theme'); if(savedTheme && savedTheme !== defaultTheme) { applyTheme(savedTheme); }};setInitialTheme();const themeSwitcher = document.querySelector('.theme-switcher');const buttons = themeSwitcher.querySelectorAll('button');buttons.forEach((button) => { button.addEventListener('click', handleThemeSelection);}); |
css
:root,[data-selected-theme="green"] { --color-background: #A4F3A2; --color-text: #034435; --color-accent: #00CC66;}[data-selected-theme="blue"] { --color-background: #55dde0; --color-text: #2B4150; --color-accent: #00D4E7;}[data-selected-theme="pink"] { --color-background: #DFB2F4; --color-text: #463546; --color-accent: #F06EFC;}[data-selected-theme="orange"] { --color-background: #FA7D61; --color-text: #1E1E24; --color-accent: #F3601C;} |
設定されたdata-selected-theme属性はhtmlタグに追加されるので、テーマのカスタマイズもしやすいかと思います。
html
<div class="container"> <h1>テーマ選択</h1><div class="theme-switcher"> <button data-theme="green" aria-pressed="true">緑</button> <button data-theme="blue" aria-pressed="false">青</button> <button data-theme="pink" aria-pressed="false">ピンク</button> <button data-theme="orange" aria-pressed="false">オレンジ</button></div> |
切り替えのスイッチです。
via
以下で詳しく解説されています。
Building an accessible theme picker with HTML, CSS and JavaScript.
