MENU
  1. ホーム
  2. ブログ運営
  3. WordPress
  4. THE SONIC でダークモードを導入する手順 【プラグインなし】

THE SONIC でダークモードを導入する手順 【プラグインなし】

広告
WordPress

最近ではさまざまなアプリでダークモード(暗いデザイン)が採用されるケースが増えています。

ダークモードを採用するメリットとしては以下のようなものが考えられます。

よいところ
  • 目に優しい
  • バッテリー消費を抑制
  • かっこよさそう
気になるところ
  • ブログのコンテンツによっては合わない
  • WordPressテーマに沿ったカスタマイズが必要
  • 新しいデザイン(CSSを独自に追加など)したらアップデートが必要

WordPressでダークモードに対応する方法はいくつかあります。

  • デバイスOSの設定によってメディアクエリで切り分け
  • プラグインで対応 簡単
  • スタイルシートを分けてユーザーがボタンを押して切り替え

１つ目のメディアクエリ@media (prefers-color-scheme: dark) で切り分ける方法は機器の設定に合わせて切り替えられるので非常に使いやすいです。しかし、。

やり方はこちらで紹介しています。

iPhoneの場合は設定からライトモード、ダークモードを切り替えられます。

2つ目のWordPressのプラグインで対応する方法は、プラグインを導入するだけなので簡単です。しかし、ダークモードと言うより色が反転するだけだったりするので思ったようなデザインにはなりません。

WordPress.org 日本語
Blackout: Dark Mode Widget

今回は、ファーストビューは一律でライトモード(明るい表示)にしたいので便利なメディアクエリを使わずに、ユーザーがダークモードアイコンをタッチしたときのみダークモードに変更するようにします。

THE SONICはベータ版ながらpjaxに対応しているのでページを移動してもダークモードが維持されます。(なおこのブログではJavascriptとの相性のためpjaxは外しています)。

左が通常表示、右がダークモードに切り替えたときの表示です。

右下のボタンを押すことでダークモードとライトモードの切り替えができます。

ダークモード
目次

ヘッダーに ダークモード要素を追加

<head>タグの最下部にコードを追加

  • 外観
  • カスタマイズ
  • サイトの基本設定
  • アクセス計測・その他タグ挿入
  • <head>タグの最下部
カスタマイズ
サイトの基本設定
タグ挿入
ダークモード
<link rel="stylesheet" href="#" type="text/css" id="darkmode">
<script>
var changeStyle = function(url) {
var linkstyle = document.getElementById('darkmode');
linkstyle.href = url;
};
</script>

style.css を編集

子テーマ内の「style.css」にダークモードアイコンを表示するコードを追記します。

/*--------------------------------------
スマホダークモードアイコン
--------------------------------------*/
.dark_icon {
    position: fixed;
    bottom: 120px;
    right: 10px;
}
a.sp_dark_button {
    z-index: 999;
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #555;
    font-weight: bold;
    color: #fff;
    padding: 10px;
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    transition-duration: 500ms;
}
a.sp_dark_button:hover {
    opacity: 0.8;
    text-decoration: none;
    transform: rotate(180deg);
}
a.sp_light_button {
    z-index: 1;
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #aaa;
    padding: 10px;
    text-align: center;
    line-height: 32px;
    font-size: 20px;
}
a.sp_light_button:hover {
    background: #888;
    color: #fff;
    text-decoration: none;
}
.black-light { /*ライトモードのアイコン色*/
    color: #ffd773 !important;
}

darkmode.css を追加

子テーマフォルダ内に「darkmode.css」を新しく追加します。

https://XXX.com/wp-content/themes/the-sonic-chiid/darkmode.css

このカスタマイズでは、ダークモードを4つの色の濃さで表現しています。darkmode.css内の4色を好みのカラーコードに変更してください。(変数を追加すれば色を増やすことができます)

あわせて読みたい
HTMLカラーコード

CSS変数はInternet Explorerでは動作しないので、必要があればそれぞれプロパティの var(–xxx-bg-color)をカラーコードに置き換えます。

  1. –deepest-bg-color: 一番濃い色
  2. –deep-bg-color: 濃い色
  3. –middle-bg-color: 中間色
  4. –pale-bg-color: 薄い色
:root {
    /*一番濃い背景色*/
    --deepest-bg-color: #1A242F;
    /*濃い背景色*/
    --deep-bg-color:  #34495E;
    /*中間背景色*/
    --middle-bg-color: #506780;
    /*薄い背景色*/
    --pale-bg-color: #8297AC;
}
/*--------------------------------------
スマホライトモードアイコン
--------------------------------------*/
a.sp_dark_button {
    z-index: 1;
    display:none !important;
}
a.sp_light_button {
    z-index: 999;
    display: inline-block !important;
    background: #888 !important;
}
a.sp_light_button:hover {
    background: #555 !important;
    transform: rotate(-180deg);
    transition-duration: 500ms;
}
/*--------------------------------------
　ダークモードリンク色調整
--------------------------------------*/
.entry-letterbody a { /*リンク*/
    color: #00cccc !important;
}
a { /*リンク*/
    color: #fff !important;
}
.mkj-content-in .mkj-list li a {
    color: #fff !important;
}
.tsnc-btn:link {
	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;
}
.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;
}
/*================================
デザインパターン　見出し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;
}
.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-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 .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;
}
/*--------------------------------------
内部記事外部記事
--------------------------------------*/
.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;
}
/*--------------------------------------
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-mark4 {
    background: var(--deep-bg-color) !important;
}
.is-style-group-mark5 {
    background: var(--deep-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-mark8 {
    background: var(--pale-bg-color) !important;
}
.is-style-group-mark8:after {
    background: linear-gradient(45deg, var(--middle-bg-color) 50%, var(--deep-bg-color) 50%) !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;
}
.is-style-table-pop th {
    background-color: var(--deepest-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(--pale-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(--pale-bg-color)!important;
}
/*--------------------------------------
人気の記事
--------------------------------------*/
.widget-content .rank-kiji-content {
    color: #fff !important;
}

ウィジットにダークモードアイコンを追加

ウィジットのモバイルフッターに「カスタムHTML」を追加して、コードを入れます。

タイトルは不要で、モバイル表示チェックしておきましょう。記事のみダークモードボタンを表示したいとき表示条件で設定できます。

  • 外観
  • ウィジット
  • (モバイル) フッター
スマホウィジット

ウィジットを追加

<div class="dark_icon">
<a onclick="changeStyle('/wp-content/themes/the-sonic-child/darkmode.css');" class="sp_dark_button"><i class="fas fa-adjust fa-flip-horizontal black-light"></i> </a>
<a onclick="changeStyle('');" class="sp_light_button"><i class="fas fa-adjust fa-horizontal"></i></a>
</div>

これでダークモードの準備はできました。スマホでブログにアクセスして表示を確認してみましょう。

ユーザーの設定に合わせてダークモード

style.css にメディアクエリ 「prefers-color-scheme:dark」を記述することで、読者の設定に合わせてライトモード・ダークモードが自動的に切り替わります。切り替えボタンもいりません。

子テーマの style.css に ダークモード用のメディアクエリを挿入しましょう。ライトモード用の記述は特に不要です。

この darkmode.css の内容をまるごと下記コードの @media 〜 の中に入れます。

@media (prefers-color-scheme: dark) {
/*この中にダークモード適用したい要素を入れる*/
} /*削除しないように注意*/

これだけでオッケーです。ユーザーがOS上でダークモードを選択していると自動的にブログの表示もダークモードになります。

お好みでダークモード用のスタイルシートを別にする

style.css から darkmode.css を読み込む方法のほうが管理がしやすくなります。

  • style.css (ライトモード用)
  • darkmode.css (ダークモード用)

style.css のどこでもいいので darkmode.cssをインポートします。

@import url("/wp-content/themes/the-sonic-child/darkmode.css");

すでに作ってある darkmode.css の要素全てをメディアクエリで囲みましょう。

@media (prefers-color-scheme: dark) {
/* ダークモードの要素 */
}

外部スタイルシート化のメリットとしては、ダークモードを停止したいときには style.css の @import〜 を一行だけコメントアウトするだけでいいことです。style.cssに記述した場合はダークモード要素を全てコメントアウトする必要があります。

Mac
Mac
Win
Windows

SANGO の場合

darkmode.css の内容をテーマに合わせれば、他のWordPressテーマでも使うことができます。とはいえかなり作業が必要となりますのでうっかり手を出さないほうがいいかもしれません。

あわせて読みたい
WordPress にダークモードを実装 2通りのやり方【SANGO】

注意点

THE SONICのすべてのブロックに対応しているわけではないので、必要があればChromeの検証ツールなどを使いながら要素を追加してください。(!important を忘れずに)

また、違和感のないところは無理に暗くせずにそのまま残してあります。

吹き出し内のテキストはダークモードにすると文字色が白くなって見えなくなることがあります。各々吹き出しブロックで文字色を指定するとダークモード時もその文字色が適用されます。

この記事で紹介しているコードでは比較的淡いダークテーマになるので、もう少し黒っぽくしたい場合は、dakrmode.css の「–deep-bg-color」、「–middle-bg-color」に濃いめの色を指定するとよいでしょう。

WordPress
THE SONIC WordPress ダークモード

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

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

この記事を書いた人

ZIMA

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

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

関連記事

目次