サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法

サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていたが「Darkmode.js」というJavaScriptライブラリを用いることで簡単に実装できるとのこと。これを試してみたいのでサンプルと実装方法を以下にメモ。

Darkmode.js

公式サイト

https://darkmodejs.learn.uno/

GitHub

https://github.com/sandoche/Darkmode.js

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>

サンプル

https://taitan916.info/sample/Darkmode.js/

右下のアイコンをクリックするとダークモードになる筈。

実装方法

ソースコード

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
const options = {
    bottom: '32px',
    right: '32px',
    left: 'unset',
    time: '0.5s',
    mixColor: '#fff',
    backgroundColor: '#fff',
    buttonColorDark: '#100f2c',
    buttonColorLight: '#fff',
    saveInCookies: false,
    label: '',
    autoMatchOsTheme: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
</script>

ページ遷移orリロード時もモード状況を保持する場合

一度ダークモードに変更してもページ遷移やリロードした際、通常モードとして表示されるが、これを保持したい場合は以下のような形でcookieに保存させると良さそう。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
<script>
const options = {
    bottom: `32px`,
    right: `32px`,
    left: `unset`,
    time: `0.5s`,
    mixColor: `#fff`,
    backgroundColor: `#fff`,
    buttonColorDark: `#100f2c`,
    buttonColorLight: `#fff`,
    saveInCookies: false,
    label: ``,
    autoMatchOsTheme: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();

//cookieを読み取ってダークモードに変更
if( Number(Cookies.get('darkmode')) ){
    document.querySelector(`.darkmode-toggle`).click();
}
//アイコンクリック時にcookie保存
document.querySelector(`.darkmode-toggle`).onclick = (event) => {
    const cookie_value = ( darkmode.isActivated() ) ? 1 : 0;
    Cookies.set('darkmode', cookie_value);
};

</script>