プラグインなしでダークモードをWordPressに搭載するカスタマイズ方法

以前の記事でWordPress テーマ 「THE SONIC」でダークモードを導入する手順を紹介しました。

重複する内容がありますが、より使いやすく作り直したので新しくダークモードを搭載する場合はこの記事を参考にしてください。

ライトモード

ライトモード (通常表示)

ダークモード

ダークモード

このカスタマイズでできること
  • 初回訪問時はパソコン・スマホの設定で表示
  • ボタンでダークモード切り替え
  • ブラウザを閉じて再訪問したときもダークモードを維持
  • 色は自分でカスタマイズ可能
  • さまざまなテーマで利用できる (動作確認は THESONICのみ)

以前のカスタマイズは、ページを移動した際にダークモードが切れてしまうので非常に使いにくい仕様でした。

今回のカスタマイズではブラウザの LocalStorage にダークモードの設定を保存することで、画面切り替え時や再訪問時にもダークモードを維持するようにしました。

THE SONIC」でのみ動作確認をしていますが、「darkmode.css」を用意することで他のテーマでも利用することができます。

カスタマイズする前には必ずバックアップをとりましょう。

目次

このカスタマイズの手順

ダークモード
  1. FTP(SFTP)でサーバーへ接続
  2. WordPress 子テーマのフォルダで必要なファイルを作成(Javascript、CSS)
  3. テーマのヘッダーにスタイルシート読み込み用のタグを入れる
  4. ウィジットの好きなところにダークモード切り替えボタンを設置

SFTPクライアントにはFFFTPやFilezillaがよく使われています。

Javascriptファイルを作成

外部スタイルシートを読み込むためのコードです。

/子テーマ/js/darkmode.jsとなるように darkmode.js を作成してください。

const darkTheme = "/wp-content/themes/the-sonic-child/darkmode.css";
const btn = document.querySelector("#mode-toggle");
const currentTheme = localStorage.getItem("mode");
const theme = document.querySelector("#theme-mode");
const isLight = window.matchMedia('(prefers-color-scheme: light)').matches;
const lightMode = () => {
    theme.href = "";
	btn.checked = false;
}
const darkMode = () => {
	theme.href = darkTheme;
    btn.checked = true;
}
if (currentTheme == "light") {
    lightMode();
}
else if (currentTheme == "dark") {
    darkMode();
}
// 消すと初回はライトモード
else {
	if (isLight) {
        lightMode();
	} else if (!isLight) {
        darkMode();
	}
}
const toggleDark = () => {
    if (theme.getAttribute("href") == "") {
        darkMode();
        } else {
            lightMode();
    }
    let style = "light";
    if (theme.getAttribute("href") == darkTheme) {
        darkMode();
        style = "dark";
    }
    localStorage.setItem("mode", style);
}
btn.addEventListener("click", toggleDark);
//開発モード
let keyPress = 81;
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key) {
    if (key.keyCode === keyPress) {
        toggleDark();
    }
}

記事を開いた時にまずダークモードの設定が保存してあるかを確認して、ない場合はPCやスマホの設定にしたがってダークモード、ライトモードを自動で表示するようにしています。

なお、ブラウザ・バージョンによっては対応していないことがあるので、その場合はライトモードで表示されます。

そして、読者自身でモードを切り替えられるボタンを配置します。モードを変更するとブラウザに保存されるのでページ切替時、次回訪問時もモードが維持されます。

初回表示時はライトモード(通常表示)にしたい場合は、以下のコードを削除して下さい。

else {
	if (isLight) {
        lightMode();
	} else if (!isLight) {
        darkMode();
	}
}

ヘッダーでスクリプトを読み込む

ヘッダー

<link type="text/css" rel="stylesheet" href id="theme-mode">
<script src="/wp-content/themes/the-sonic-child/js/darkmode.js" defer></script>

こちらのコードを<head></head>内に挿入します。

テーマのカスタマイズからコードをコピペしてください。

THE SONIC の場合は、WordPressの管理画面を開いて「外観 > カスタマイズ > サイトの基本設定 > アクセス計測・その他タグ挿入」です。

他テーマで使う場合はコードの /the-sonic-child/ の部分を子テーマの名前に変更してください。

ダークモードボタンを配置する

ダークモードボタンは1つのページにつき1つしか動作しない仕様になっています。

  1. PC用のボタン
  2. スマホ用ボタン
  3. スマホ用モバイルフッターボタン

好きなところに ダークモード・ライトモード切り替えボタンを配置しましょう。

カスタムHTML にコードをコピペしてください。

<div class="darkmode-pc">
<label>
    <input type="checkbox" id="mode-toggle">
    <span>ON</span>
    <span>OFF</span>
</label>
</div>

WordPress 管理画面の「外観 > ウィジット」からカスタムHTMLを選択して、好きなエリアへドラッグアンドドロップします。

こちらはスマホ用のボタンです。ウィジットは「モバイルフッター」などに配置しましょう。

<div class="darkmode-sp">
<label>
    <input type="checkbox" id="mode-toggle">
		<span></span>
</label>
</div>

スマホのダークモード切り替えボタン

ダークモード切り替えボタン用スタイル

子テーマの 「style.css」に以下のコードを追記します。

/*--------------------------------------
ダークモードトグル
--------------------------------------*/
.darkmode-pc label {
	cursor: pointer;
	user-select: none;
}
.darkmode-pc input[type=checkbox] {
	display: none;
	cursor: pointer;
}
.darkmode-pc label>input[type=checkbox]~span {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 64px;
	height: 32px;
	font-size: 14px;
	border-style: none;
	border-radius: 15px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.darkmode-pc label>input[type=checkbox]:checked+span {
	display: flex;
	padding-left: 8px;
	color: white;
	background-color: #273646;
}
.darkmode-pc label>input[type=checkbox]:checked+span+span {
	display: none;
}
.darkmode-pc label>input[type=checkbox]+span {
	display: none;
}
.darkmode-pc label>input[type=checkbox]+span+span {
	display: flex;
	padding-right: 8px;
	color: gray;
	background-color: lightgray;
}
.darkmode-pc label>input[type=checkbox]:checked+span::after,
.darkmode-pc label>input[type=checkbox]+span+span::before {
	display: block;
	width: 28px;
	height: 28px;
	margin: 3px;
	border-radius: 50%;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	content: "?";
}
.darkmode-pc label>input[type=checkbox]:checked+span::after {
	background-color: #888;
	filter: grayscale(.8);
}
.darkmode-pc label>input[type=checkbox]+span+span::before {
	background-color: #555;
}
/*スマホダークモードアイコン*/
.darkmode-sp {
	position: fixed;
	bottom: 160px;
	right: 12px;
	transition: 1s;
}
.darkmode-sp label>input[type=checkbox] {
	display: none;
}
.darkmode-sp span::before {
	transition: 1s;
}
.darkmode-sp label>input[type=checkbox]:checked+span:before,
.darkmode-sp label>input[type=checkbox]+span:before {
	display: block;
	width: 58px;
	height: 58px;
	margin: 3px;
	border-radius: 50%;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
	font-size: 28px;
	line-height: 58px;
	text-align: center;
	opacity: .8;
	content: "?";
}
.darkmode-sp label>input[type=checkbox]:checked+span::before {
	filter: grayscale(.8);
	background: #888;
}
.darkmode-sp label>input[type=checkbox]+span::before {
	background: #555;
}

モバイルフッターメニューにボタンを追加

THE SONIC のモバイルフッターにダークモードボタンを置くこともできます。モバイルフッターを利用しているのであればこちらのほうがおすすめです。

ダークモードボタン

モバイルフッターの設置方法は公式サイトを参照してください。

WordPress 管理画面から「外観 > メニュー」にダークモード用のメニューを追加します。

  • URL > 空欄 (登録時は#を入れておく)
  • ナビゲーションラベル (下記のコード)
<a id="mode-toggle"><i class="fas fa-moon"></i>ナイト</a>

そして、このコードを style.css に追記してください。

/*モバイルフッターダークモードアイコン*/
.mobile-footer-menu a:empty {
	display: none;
}
.mobile-footer-menu #mode-toggle i {
	transform: rotate(240deg);
}

darkmode.css を作成

ダークモード表示用のスタイルシートを作ります。

「/子テーマ/darkmode.css」となるように配置しましょう。

色の変更方法

この記事のカスタマイズではダークモードを4色で表現しています。

まずは、下のコードをエディタにコピーしましょう。そして上の方の文字列でカラーをします。

上から順に濃い色を指定しましょう。

  • deepest-bg-color (一番濃い色)
  • deep-bg-color (濃い色)
  • middle-bg-color (中間色)
  • pale-bg-color (薄い色)

000000 などの16進数で色を指定する必要がありますが、よく分からない場合はHTMLカラーピッカーで色コードを確認してみましょう。

こんな感じで斜めに連続するように色を設定するときれいになりますよ。

紹介しているコードでは比較的明るい色にしていますが、もっと暗い色にすることも可能です。

THE SONIC 用の darkmode.css

@charset "UTF-8";
:root {
    /*一番濃い背景色*/
    --deepest-bg-color: #1A242F;
    /*濃い背景色*/
    --deep-bg-color:  #34495E;
    /*中間背景色*/
    --middle-bg-color: #506780;
    /*薄い背景色*/
    --pale-bg-color: #8297AC;
}
/*--------------------------------------
ダークモードリンク色調整
--------------------------------------*/
.entry-letterbody a { /*リンク*/
    color: #00cccc !important;
}
a { /*リンク*/
    color: #fff !important;
}
.mkj-content-in .mkj-list li a {
    color: #fff !important;
}
.tsnc-btn:link,
.wp-block-button a {
    color: #fff !important;
}
p.has-background{ /*デフォルトボックス背景色*/
    color: #333 !important;
}
/*--------------------------------------
ヘッダーナビ
--------------------------------------*/
.nav-style-def .sub-menu {
    background: var(--deepest-bg-color) !important;
}
/*--------------------------------------
画像を暗くする
--------------------------------------*/
.entry-content img {
    filter: brightness(80%) grayscale(20%) !important;
    -webkit-filter:brightness(80%) grayscale(20%)  !important;
    -moz-filter:brightness(80%) grayscale(20%) !important;
    -ms-filter:brightness(80%) grayscale(20%) !important;
    transition: 500ms;
}
.entry-content img:hover {
    filter: brightness(100%) grayscale(0%) !important;
    -webkit-filter:brightness(100%) grayscale(0%)  !important;
    -moz-filter:brightness(100%) grayscale(0%) !important;
    -ms-filter:brightness(100%) grayscale(0%) !important;
}
/*--------------------------------------
THE SONIC
--------------------------------------*/
#header, .footer-in-under{
    background: var(--deepest-bg-color) !important;
}
body { /*全体背景色*/
    background-color: var(--middle-bg-color) !important;
    color: #fff !important; /*本文色*/
    transition: 1s; /*モード切り替えまでの時間*/
}
.entry-header { /*ブログタイトル*/
    background: var(--deep-bg-color) !important;
}
.entry-content {
    background: var(--deep-bg-color) !important;
}
.has-tsnc-main-color-color {
    color: #fff !important;
}
.entry-footer {
    background: var(--deep-bg-color) !important;
}
.widget ul {
    background: var(--deep-bg-color) !important;
}
.widget .widget-content {
    background: var(--deep-bg-color) !important;
}
.widget .tagcloud {
    background: var(--deep-bg-color) !important;
}
.tagcloud .tag-cloud-link {
    background: var(--middle-bg-color) !important;
    color: #fff !important;
}
.kiji-num {
    background: var(--middle-bg-color) !important;
    color: #fff !important;
}
.comment-reply-title:before {
    color : #fff !important;
}
.entry-snsbox {
  background: var(--middle-bg-color) !important;
}
.share-btn {
    color: var(--deepest-bg-color) !important;
}
.side-writer-mark3 .pf-text + .pf-share {
    background: var(--pale-bg-color);
}
.writer-mark1 .writer-img,
.writer-mark2 .writer-in {
  border-color: var(--deepest-bg-color) !important;
}
.pf-share>p {
  color : var(--deepest-bg-color) !important;
}
.pf-custom-btn {
  background : var(--deepest-bg-color) !important;
}
button.urlcopy-btn {
    color: var(--deepest-bg-color) !important;
}
.breadcrumb {
  color: var(--deepest-bg-color) !important;
}
.gotop {
  background: var(--middle-bg-color)!important;
}
/*================================
デザインパターン 見出しh2 h3 h4
================================*/
/*mark1*/
.heading-h2-mark1 h2,
.heading-h3-mark1 h3,
.heading-h4-mark1 h4 {
    background: var(--deepest-bg-color) !important;
}
/*mark2*/
.heading-h2-mark2 h2,
.heading-h3-mark2 h3,
.heading-h4-mark2 h4 {
    border-color: var(--deepest-bg-color) !important;
}
/*mark3*/
.heading-h2-mark3 h2 {
    border-color: var(--deepest-bg-color) !important;
}
.heading-h3-mark3 h3,
.heading-h4-mark3 h4 {
    border-color: var(--deepest-bg-color) !important;
}
/*mark4*/
.heading-h2-mark4 h2,
.heading-h3-mark4 h3,
.heading-h4-mark4 h4 {
    border-color: var(--deepest-bg-color) !important;
}
.heading-h2-mark5 h2:before,
.heading-h3-mark5 h3:before,
.heading-h4-mark5 h4:before {
    border-color: var(--deepest-bg-color) !important;
}
/*mark6*/
.heading-h2-mark6 h2,
.heading-h3-mark6 h3,
.heading-h4-mark6 h4 {
    border-color: var(--deepest-bg-color) !important;
}
/*--------------------------------------
コメント欄
--------------------------------------*/
.writer-in:before, .writer-text {
    background: var(--middle-bg-color) !important;
}
#comments textarea, #comments input {
    background: var(--pale-bg-color) !important;
}
.comment-form-comment label {
    background: var(--deep-bg-color) !important;
}
.comment-form-comment {
    border-color: var(--deep-bg-color) !important;
}
#comments-list, #comments-list li {
    background: var(--pale-bg-color) !important;
}
article footer.comment-meta {
    background: var(--middle-bg-color) !important;
}
.comment-content, .reply {
    background: var(--deep-bg-color) !important;
    color: #fff !important;
}
/*--------------------------------------
引用
--------------------------------------*/
.wp-block-quote,
.wp-block-quote.is-style-large {
    background: var(--middle-bg-color) !important;
    color: #fff !important;
}
/*--------------------------------------
ランキング
--------------------------------------*/
.ranking-item {
    background: var(--deep-bg-color) !important;
}
.ranking-title {
    background: var(--deepest-bg-color) !important;
}
.ranking-set{
    background: var(--middle-bg-color) !important;
}
/*--------------------------------------
カウントダウン
--------------------------------------*/
.count {
    background: var(--middle-bg-color) !important;
    border-color:  var(--middle-bg-color) !important;
}
/*--------------------------------------
タイムライン
--------------------------------------*/
.is-style-process-mark1 .process-step {
    box-shadow: 0 0 1px 1px var(--deepest-bg-color) !important;
}
.process-label {
    background: var(--deepest-bg-color) !important;
}
.is-style-process-mark1 .process-step:not(:last-child):after {
    border-top-color: var(--pale-bg-color) !important;
}
/*--------------------------------------
目次
--------------------------------------*/
.mkj, .mkj-title {
    border: none !important;
    background: var(--deepest-bg-color) !important;
}
.mkj-openclose {
    background: var(--middle-bg-color) !important;
    color: #fff !important;
}
.mkj-list > li:before {
    background: var(--deepest-bg-color) !important;
}
.mkj-list ol li:before {
    background: var(--deepest-bg-color) !important;
    border-color: var(--deepest-bg-color) !important;
}
.widget-title-in {
    background: var(--deepest-bg-color) !important;
    color: #fff !important;
}
.widget-title {
    background: var(--deepest-bg-color) !important;
}
#mkj .mkj-content {
    background: var(--middle-bg-color) !important;
}
div#tsnc-sidebar-tracking-widget .mkj-side-style {
    background: var(--deep-bg-color) !important;
}
.mkj-content:after {
  color: var(--deepest-bg-color) !important;
}
/*--------------------------------------
段落
--------------------------------------*/
.is-style-para-mark1 {
    border-color: var(--middle-bg-color) !important;
}
.is-style-para-mark2 {
    background: var(--middle-bg-color) !important;
}
.is-style-para-mark3 {
    border-color: var(--middle-bg-color) !important;
}
.is-style-para-mark4 {
    border-color: var(--pale-bg-color) !important;
    background: var(--middle-bg-color) !important;
}
.is-style-para-mark5 {
    border-color: var(--middle-bg-color) !important;
}
/*--------------------------------------
マーク付き段落
--------------------------------------*/
.is-style-para-mark6,
.is-style-para-icon-mark1,
.is-style-para-icon-mark2,
.is-style-para-icon-mark3,
.is-style-para-icon-mark4,
.is-style-para-icon-mark5,
.is-style-para-icon-mark6 {
    color: #333 !important;
}
/*--------------------------------------
タイトルボックス
--------------------------------------*/
.is-style-titlebox-mark1 {
    background: var(--deepest-bg-color) !important;
}
.is-style-titlebox-mark1 .ob-title {
    color: #fff !important;
}
.is-style-titlebox-mark2 {
    background: var(--middle-bg-color) !important;
}
.is-style-titlebox-mark2 .ob-title {
    color: #fff !important;
}
.is-style-titlebox-mark2 .ob-contents {
    background: var(--deepest-bg-color) !important;
}
.is-style-titlebox-mark2 .ob-title-before {
    background: var(--pale-bg-color) !important;
}
.is-style-titlebox-mark3 {
    border-color: var(--middle-bg-color) !important;
}
.is-style-titlebox-mark3 .ob-title {
    background: var(--deepest-bg-color) !important;
}
.is-style-titlebox-mark3 .ob-title-after {
    border-top-color: var(--deepest-bg-color) !important;
    border-right-color: var(--deep-bg-color) !important;
    border-left-color: var(--deep-bg-color) !important;
}
.is-style-titlebox-mark4 {
    border-color: var(--deepest-bg-color) !important;
}
.is-style-titlebox-mark4 .ob-title {
    background: var(--deepest-bg-color) !important;
}
.is-style-titlebox-mark5 {
    border-color: var(--deepest-bg-color) !important;
}
.is-style-titlebox-mark5 .ob-title {
    background: var(--deepest-bg-color) !important;
    color: #fff !important;
}
.is-style-titlebox-mark6 {
    border-color: var(--deepest-bg-color) !important;
}
.is-style-titlebox-mark6 .ob-title {
    background: var(--pale-bg-color) !important;
    border-color: var(--deepest-bg-color) !important;
    color: var(--deepest-bg-color) !important;
}
.is-style-titlebox-mark6 .ob-title-after {
    border-right-color: var(--deepest-bg-color) !important;
}
/*--------------------------------------
コメントボックス
--------------------------------------*/
.comment-box.is-style-commentbox-mark4 {
  background: var(--deep-bg-color) !important;
}
/*--------------------------------------
内部記事外部記事
--------------------------------------*/
.link-card {
    border-color: var(--deepest-bg-color) !important;
}
.inlink-linkarea, .exlink-linkarea {
    background-color: var(--middle-bg-color) !important;
}
.inlink-title, .exlink-title, .exlink-site {
    color: #fff !important;
}
.exlink-label, .inlink-label {
    background-color: var(--deepest-bg-color) !important;
}
.comment-box {
    border-color: var(--pale-bg-color) !important;
}
/*--------------------------------------
前後記事、関連記事
--------------------------------------*/
.kanren-kiji-title {
    color: #fff !important;
}
.prev-kiji-in, .next-kiji-in, .main-kiji {
    background: var(--deep-bg-color) !important;
}
.prevnext-text, .kiji-text{
    color: #fff !important;
}
.prevnext-title {
    background: var(--deepest-bg-color) !important;
}
/*--------------------------------------
ソース・コード
--------------------------------------*/
pre {
    background: var(--deepest-bg-color) !important;
    color: #fff !important;
    border-color: var(--deepest-bg-color) !important;
}
/*--------------------------------------
検索欄
--------------------------------------*/
.search-submit {
  background: var(--deepest-bg-color) !important;
}
.search-field {
  color: #000;
  border-color: var(--deepest-bg-color) !important;
  background: var(--pale-bg-color) !important;
}
.search-field::placeholder {
  color: #000 !important;
}
/*--------------------------------------
CTA エリア
--------------------------------------*/
.imgarea-text-in {
    background: rgba(30, 50, 80, 0.6) !important;
}
/*--------------------------------------
トップページ、カテゴリラベル
--------------------------------------*/
.main-h2, .main-title  {
    background: var(--deep-bg-color) !important;
    color: #fff !important;
    border-color: var(--deepest-bg-color) !important;
}
.entry-404-eyeimg {
    background: var(--deepest-bg-color) !important;
}
.notpage-title{
    color: var(--deep-bg-color) !important;
}
#content-in .kiji-cat{
    background: var(--deepest-bg-color) !important;
    color: #fff !important;
}
li a.page-numbers {
    background: var(--pale-bg-color) !important;
}
/*--------------------------------------
トップページタブ
--------------------------------------*/
.main-tab-two.kiji-list-tab-mark1 {
    border-color: var(--deepest-bg-color)!important;
}
.main-tab1, .main-tab2 {
    background: var(--deep-bg-color)!important;
    color: #fff !important;
}
.active_tab {
    background: var(--pale-bg-color)!important;
}
/*--------------------------------------
アコーディオン
--------------------------------------*/
.tsnc-accordion-title:after, .tsnc-accordion-title:before {
    background: #fff !important;
}
/*--------------------------------------
グループ
--------------------------------------*/
.is-style-group-mark1 {
    border-color: var(--middle-bg-color) !important;
}
.is-style-group-mark2 {
    background: var(--middle-bg-color) !important;
}
.is-style-group-mark3 {
    border-color: var(--middle-bg-color) !important;
}
.is-style-group-mark4 {
    border-color: var(--middle-bg-color) !important;
    background: var(--deep-bg-color) !important;
}
.is-style-group-mark5 {
    border-color: var(--middle-bg-color) !important;
    background: var(--deep-bg-color) !important;
}
.is-style-group-mark6 {
    border-color: var(--middle-bg-color) !important;
}
.is-style-group-mark6 {
    background-image: repeating-linear-gradient(-45deg, var(--middle-bg-color), var(--middle-bg-color) 2px, var(--deepest-bg-color) 2px, var(--deepest-bg-color) 4px) !important;
}
.is-style-group-mark7 {
    border-color: var(--middle-bg-color) !important;
    outline-color: var(--pale-bg-color) !important;
 }
.is-style-group-mark8 {
    border-color: var(--middle-bg-color) !important;
}
.is-style-group-mark8:after {
    background: linear-gradient(45deg, var(--deepest-bg-color) 50%, var(--deep-bg-color) 50%) !important;
}
.is-style-group-mark11 {
    background: var(--middle-bg-color) !important;
}
.is-style-group-mark12 {
    background: var(--middle-bg-color) !important;
}
.is-style-group-mark12 {
    box-shadow: 0 1px 2px 1px rgba(255,255,255,0.2) !important;
}
.is-style-group-mark13 {
    color: #333 !important;
}
.is-style-group-mark13:after {
    background: linear-gradient(135deg, #fddb77 50%, var(--deep-bg-color) 50%) !important;
}
.is-style-group-mark14,
.is-style-group-mark15 {
    background: var(--middle-bg-color) !important;
}
/*--------------------------------------
テーブル
--------------------------------------*/
table,
th,
td {
    border-color: var(--deepest-bg-color) !important;
}
.wp-block-table.is-style-stripes table tbody tr:nth-child(odd) {
    background-color: var(--middle-bg-color) !important;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: var(--pale-bg-color) !important;
}
.wp-block-table.is-style-regular th,
.wp-block-table.is-style-stripes th
{
    background-color: var(--deepest-bg-color) !important;
    color: #fff !important;
}
.is-style-table-simple th{
    color: #fff !important;
    background: var(--deepest-bg-color) !important;
}
.is-style-table-pop th {
    background-color: var(--deepest-bg-color) !important;
}
.is-style-table-pop td {
  background: var(--middle-bg-color) !important;
}
.is-style-table-simple thead tr th:nth-child(even) {
  background: var(--middle-bg-color) !important;
}
/*--------------------------------------
ハンバーガーメニュー
--------------------------------------*/
.widget-content {
    color: #fff !important;
}
.hamburger-in-content {
    background: var(--deepest-bg-color) !important;
}
/*--------------------------------------
アコーディオン
--------------------------------------*/
.entry-content .tsnc-accordion {
    border-color: var(--deepest-bg-color)!important;
    background: var(--middle-bg-color)!important;
}
.entry-content .tsnc-accordion-title:before, .tsnc-accordion-title:after {
    background: var(--deepest-bg-color)!important;
}
.entry-content .tsnc-accordion-content {
    background: var(--middle-bg-color)!important;
}
/*--------------------------------------
人気の記事
--------------------------------------*/
.widget-content .rank-kiji-content {
    color: #fff !important;
}
/*--------------------------------------
ふきだし
--------------------------------------*/
.huki-text {
  color: #333 !important;
}
/*--------------------------------------
シェアボタン
--------------------------------------*/
.share-btn i {
	background: var(--deepest-bg-color) !important;
}
/*--------------------------------------
モバイルフッター
--------------------------------------*/
.mobile-footer-menu {
  background: var(--deepest-bg-color) !important;
}
.mobile-footer-menu-item {
  border-top: var(--middle-bg-color) !important;
}
/*--------------------------------------
コピーボックス
--------------------------------------*/
.is-style-titlebox-mark7 {
    border-color: var(--middle-bg-color) !important;
}
.is-style-titlebox-mark7 .ob-title {
    background: var(--middle-bg-color) !important;
}
.is-style-titlebox-mark7 .ob-title-after {
    background: var(--pale-bg-color) !important;
    color: #fff !important;
}
.two-box-set .wp-block-columns,
.two-box-set .wp-block-column:not(:first-child) {
  border-color: var(--deepest-bg-color) !important;
}
/*--------------------------------------
メリット・デメリット
--------------------------------------*/
.is-style-titlebox-mark8,
.is-style-titlebox-mark9,
.is-style-titlebox-mark10 {
    border-color: var(--deepest-bg-color) !important;
}

このコードは THE SONIC用ですが、darkmode.css を作成することで他テーマでも使えます。細部まで対応させるのは結構大変ですが、主要な背景色のみ変更するなら簡単なので挑戦してみてください。

こんな色にもできる

パープル

標準以外のブロックをダークモードに

/*--------------------------------------
Rinker
--------------------------------------*/
div.yyi-rinker-contents {
    background: var(--deep-bg-color)!important;
    border-color: var(--deepest-bg-color)!important;
}
div.yyi-rinker-contents a {
    color: #fff !important;
}
/*--------------------------------------
レビューボックス
--------------------------------------*/
.bl_reviewPies {
  background: var(--deepest-bg-color) !important;
}
.bl_reviewPies .el_reviewPie_total {
	border: 8px solid var(--deepest-bg-color) !important;
}
.textwidget.custom-html-widget {
	background: transparent !important;
}
p.el_reviewPie_totalLabel {
  color: #333 !important;
}

おまけ:開発モード

ダークモード・ライトモード切り替えにいちいちスイッチ押すのが面倒ですよね。

darkmode.js に以下のコードを追記すると、キーボードの「q (キュー)」を押すとダークモード切り替えができます。

//開発モード
let keyPress = 81;
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key) {
    if (key.keyCode === keyPress) {
        toggleDark();
    }
}

表示デモサイト

動かない場合は?

ダークモードアイコンは1ページに1つ

仕様によりダークモード切り替えアイコンは1つのページつき1つしか動作しません。

アイコンが反応しない場合は、ページ内のハンバーガーメニューや隠れたウィジット内にアイコンを設定していないか確認しててください。

最適化プラグインを見直す

Javascript、CSS最適化をするプラグインを使っている場合はオフにするか、「darkmode.js」を除外すると正常に動作します。

キャッシュを削除する

ブラウザのキャッシュを削除して、キャッシュ系のプラグインを使っている場合は一度キャッシュを削除してください。

ダークモード情報は LocalStorageに保存

ダークモード・ライトモードの設定はブラウザの LocalStorage に保存されます。

テスト環境などでデータを消したいときには Chromeのデベロッパーツールを開いて「Application > Storage > LocalStorage」にあるキーをDeleleキーで削除できます。

ローカルストレージ

参考URL

  • https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
  • https://qiita.com/lookman/items/ec0d524639e43dcca0c0

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

気になるガジェットやサービスをレビュー!日常生活のアップデートを目標に役に立つ情報を掲載していきます。

仕事のご依頼などはお問い合わせからどうぞ。

目次