【Redmine】View Customize pluginとdarkmode-jsでダークテーマで表示する

RedmineでView Customize pluginとdarkmode-jsを使ってダークテーマで表示したい！

概要

今回の記事では、RedmineでView Customize pluginとdarkmode-jsを使ってダークテーマで表示する手順を掲載する。

仕様書

環境

• Redmine version 5.0.5.stable
• Ruby version 3.1.4-p223 (2023-03-30) [x86_64-linux]
• Rails version 6.1.7.2
• Phusion Passenger 6.0.18
• View Customize plugin 3.4.0
• darkmode-js 1.5.7

手順書

Redmineのプラグイン「View Customize plugin」を使うので下記の記事を参考にインストールする。

トップメニューの「管理」->「表示のカスタマイズ」->「新しい表示のカスタマイズ
表示のカスタマイズ」にアクセスする。

「パスのパターン」は.*にすることですべてのページでスタイルが反映されるようになる。

「プロジェクトのパターン」は空。

「挿入位置」は「全ページのヘッダ」。

「コード」には下記を入力する。

<style>
    .darkmode-layer,
    .darkmode-toggle {
        z-index: 500;
    }

    .darkmode-toggle .darkicon {
        font-size: 13px;
        font-weight: bold;
        color: #fff;
    }

    .darkmode-toggle--white .darkicon:before {
        content: "Light";
        font-size: 12px;
        color: #000;
    }

    .darkmode-toggle--white .darkicon {
        font-size: 0px;
    }

    .darkmode-toggle,
    .darkmode-layer {
        width: 3.0rem !important;
        height: 3.0rem !important;
    }

    .darkmode-layer--simple {
        width: 100% !important;
        height: 100% !important;
    }

    .darkmode--activated #header {
        color: #fff !important;
        background-color: #222 !important;
    }

    .darkmode--activated #q,
    .darkmode--activated #projects-quick-search,
    .darkmode--activated #project-jump .drdn-content,
    .darkmode--activated #project-jump .drdn-trigger,
    .darkmode--activated #project-jump .drdn-items>* {
        color: #cccccc !important;
        background-color: #000 !important;
    }

    .darkmode--activated #project-jump .drdn-items>* {
        border: 1px solid #888 !important;
    }

    .darkmode--activated #project-jump .drdn-items>a:hover {
        background-color: #555 !important;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
    function addDarkmodeWidget() {
        const options = {
            bottom: '12px',
            right: '40px',
            left: 'unset',
            label: '<span class="darkicon">Dark</span>'
        }

        const ua = navigator.userAgent;
        if (ua.indexOf('Trident') !== -1) {
            //IE11の場合は表示しない
        } else {
            new Darkmode(options).showWidget();
        }
    }
    window.addEventListener('load', addDarkmodeWidget);
</script>

「有効」にチェックする。（デフォルトでチェックされてるはず）

「保存」するとRedmineがダークテーマになる。右下のボタンでダークテーマを切り替えれる。

まとめ（感想文）

目に優しい！多分！

引用・参考文献

下記の記事を参考にして、ヘッダーもダークテーマっぽくなるようアレンジしました。ありがとうございました。