Result
Webアプリやスマホアプリ等でよくあるダークモードをCSSだけで実現しよう、というもの
力業というわけでもなく、割と実践的でした。とはいえシンプルな方法なのである程度利用シーンは限られます
css
:root{ /*基本のスタイル*/ --bg: #f8fafc ; --panel-bg: #FFFFFF ; --panel- border : #CCCCCC ; --panel-title: #343f44 ; --panel-text: #54666d ; --btn: #3eb0ef ; } .toggleDark{ /*ライトモード時のトグルボタン*/ display : block ; color : #222 ; } .toggleLight{ /*ダークモードからライトへ戻す際のボタン。非表示にしておく*/ display : none ; color : white ; } #toggleMode:checked ~ .toggleDark{ /*チェックが入ったら非表示*/ display : none ; } #toggleMode:checked ~ .toggleLight{ /*チェックが入ったら表示*/ display : block ; } #container{ /*メインコンテナ*/ position : absolute ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; background-color : var(--bg); z-index : 1 ; padding : 50px 20px ; } #toggleMode:checked ~ #container{ /*トグルボタンが押されたら変数をオーバーライド*/ --bg: #020202 ; --panel-bg: #111413 ; --panel- border : #1f2322 ; --panel-title: #8e9294 ; --panel-text: #505456 ; --btn: #2962fe ; background-color : var(--bg); } /*各所の基本設定。CSS変数の部分だけトグルボタンで切り替わる事*/ .panel .content{ width : 70% ; float : left ; padding : 20px ; background-color : var(--panel-bg); height : 300px ; border-radius : 0 10px 10px 0 ; border-top : 1px solid var(--panel-border); border-right : 1px solid var(--panel-border); border-bottom : 1px solid var(--panel-border); box-sizing : border-box ; } .panel .content h 2 { margin-top : 20px ; margin-bottom : 0 ; color : var(--panel-title); } .panel .content p{ margin-top : 10px ; font-weight : 300 ; color : var(--panel-text); } .panel .content button{ border : 0 ; border-radius : 3px ; background-color : var(--btn); padding : 10px 20px ; color : white ; cursor : pointer ; } |
2つのCSS変数を用意し、checkboxで実装したトグルボタンにチェックが入ったら切り替える、という流れ
そのため、各マテリアルの色の設定箇所にはCSS変数で用意、:checkedになったら一括で切り替えられます
html
< input type = "checkbox" id = "toggleMode" > < label for = "toggleMode" class = "toggleDark" >暗くする</ label > < label for = "toggleMode" class = "toggleLight" >明るくする</ label > < div id = "container" > < div class = "panel" > < div class = "image" style = "background-image:url('hoge.jpg')" ></ div > < div class = "content" > < h2 >foobar</ h2 > < p >piyopiyo</ p > < button >hogehoge</ button > </ div > </ div > </ div > |
can i use
CSS変数のブラウザ対応状況です