CSSとJSとPHPでダークモード切り替ボタンを作る。何もないけどヨロシク。designmarkupetc.ARCHIVES20192018CSSとJSとPHPでダークモード切り替ボタンを作る。実装のポイントダークモードの実装JavascriptCSSHTML・PHPまとめダークモードとは?ダークモードとはメニューや背景の配色を、白基調から黒基調に変更させる機能。OSだとMojave、Winだとwindows10から搭載された。長時間PC作業をしている人にとっては目の疲れが軽くなるのとバッテリーの持ちがいいとか。デフォルトダークモードダークモードの問題ダークモードは今の所、OSに関する画面にしか適用できず、ブラウザでgoogle検索などすると、今までダークな画面で作業していたにもかかわらずいきなり、白を基調とした検索画面がドン!と出てくるので目が眩しくて辛い。最近ではYoutubeやtwitterなどはサイト側で「ダークテーマ」や「ダークモード」という切り替えボタンがを設置している。このサイト側で設置できるダークモード切り替えボタンをこのブログでも実装したい!ってことで備忘録。実装のポイントモードを切り替えた後にページ遷移してもダークモードが引き継がれるモード切り替え時のチラツキをなくするダークモードの実装Javascriptページ遷移してもモードが引き継がれるようにする為に、jquery.cookie.jsを使ってダークモードの切り替えのクッキーを保存させる。jquery.cookie.jsのダウンロードはこちら。jQueryとjquery.cookie.jsを読み込む。HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)クッキーを保存する関数を作成。bodyタグのクラスにdarkmodeがある場合はisActiveという値がクッキーに保存され、ない場合はnotActiveという値が保存される。クッキーの保存期間は365日。クッキーの有効範囲はサイト全体なので’/’を指定。特定のディレクトリのみに適用させたい場合はpath:’/hoge/’となる。});}次にサイトに設置するモード切り替えボタンを設置。ボタンをクリックすることでbodyダグにdarkmodeを挿入したり取り除いたりさせる。その後に作成した関数setMyCookie();をいれてクッキーをクリックのタイミングごとに保存させる。setMyCookie();});CSSダークモード用(.darkmode)のCSSを用意して、通常モードのCSSを上書きする。CSSの記述位置によって反映しない場合があるので、記述の最後に入れるか、!importantで強制的に適用させる。//ここにダークモード時のCSSをまとめて記述。}}HTML・PHPjquery.cookie.jsで保存したクッキーの値をphpで取得して判別、クラスの追加を行う。この部分をjqueryでクラスの追加・削除を行うと、ダークモードにしてページ遷移した時にレンダリングの読み込みの関係で一瞬(0.2秒くらい)jqueryが適用されず、クラスが付与されていないデフォルトモードが表示されるので、phpで行うのがポイント。?>">切り替えスイッチの記述。class="switch_mode"></div>まとめこのブログで必要なのかわからないけどこのサイトに設置しました。思ってたよりも簡単にできて、挙動としても問題なく動いているのでよければお試しあれ。2019年05月16日markupPREV【続】空のaタグでボタンを作るCSSについてNEXTfunctions.phpからカスタム投稿タイプを登録する方法markupCSSとJSとPHPでダークモード切り替ボタンを作る。【Sass(SCSS)】#{$this}を使って入れ子の親(Block)のセレクタ名を継承2018年12月24日HTMLサイトの共通部分(ヘッダーやフッター)をPHPでパーツ化し、現在のページのメニューにクラスを追加する方法。nanimonaikedo.プライバシーポリシ。