【JavaScript】クリックしてサイトをダークテーマとライトテーマに切り替える

2025年06月22日

WEBサイト制作

#HTML
#css
#JavaScript
#tips

こんにちは！
上毛印刷WEB制作担当のソーヤです。

捻くれ者のWEBデザイナーさんはいませんか？
そんな貴方に、WEBのテーマ切り替え機能を紹介します。

今回は、Cookieを使ってWEBサイトのデザインをガラッと変える機能を実装しました！

実装例

HTML例

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

今回は「js-cookie」というクッキー操作ライブラリを使用します。
上記をjsファイルの手前に記述してください。

<button id="js-dark">ダークテーマ</button>
<button id="js-light">ライトテーマ</button>

CSS例

CSSに関しては、あなたのWEBサイトに合わせたスタイルを記述してください。
今回は、dark.cssとlight.cssを作成しました。

・dark.css

.header-container,
nav ul.pc li .megaMenu{
    background-color: #333;
}
body,
.single-blog{
    background-color: #727272;
}
nav ul.pc li a,
.footer-container footer p,
.breadcrumbItem,
.breadcrumbItem a,
.blog-sidebar h4,
.breadcrumbItem a:after,
.footer-container footer .cv a,
.footer-container h6{
    color: #fff!important;;
}
.header-container h1 img,
.footer-container footer img,
.blog-sidebar h4:before{
    filter: invert(100%) sepia(0%) saturate(7490%) hue-rotate(317deg) brightness(120%) contrast(102%);
}

.footer-container{
    background-color: #333;
}

・light.css

.header-container,
nav ul.pc li .megaMenu{
    background-color: #b92d92;
}
body,
.single-blog{
    background-color: #66da24;
}
nav ul.pc li a,
.footer-container footer p,
.breadcrumbItem,
.breadcrumbItem a,
.blog-sidebar h4,
.breadcrumbItem a:after,
.footer-container footer .cv a,
.footer-container h6{
    color: #ff3434!important;;
}
.header-container h1 img,
.footer-container footer img,
.blog-sidebar h4:before{
    filter: invert(100%) sepia(0%) saturate(7490%) hue-rotate(317deg) brightness(120%) contrast(102%);
}

.footer-container{
    background-color: #1c68ff;
}

JavaScript例

document.addEventListener('click', function(event) {
    if (event.target.id.includes('js-dark')) {
        const noTheme = document.getElementById('no-theme');
        if(noTheme){
            noTheme.remove();
        }
        const darkTheme = document.createElement('link');
        darkTheme.rel = 'stylesheet';
        darkTheme.id = 'no-theme';
        darkTheme.href = '/dark.css?v=' + new Date().getTime();
        document.head.appendChild(darkTheme);
        Cookies.set('theme', 'dark', { expires: 7, path: '/' });
    }else if(event.target.id.includes('js-light')){
        const noTheme = document.getElementById('no-theme');
        if(noTheme){
            noTheme.remove();
        }
        const lightTheme = document.createElement('link');
        lightTheme.rel = 'stylesheet';
        lightTheme.id = 'no-theme';
        lightTheme.href = '/light.css?v=' + new Date().getTime();
        document.head.appendChild(lightTheme);
        Cookies.set('theme', 'light', { expires: 7, path: '/' });
    }
});                
if (Cookies.get('theme') === 'dark') {
    const darkTheme = document.createElement('link');
    darkTheme.rel = 'stylesheet';
    darkTheme.id = 'no-theme';
    darkTheme.href = '/dark.css?v=' + new Date().getTime();
    document.head.appendChild(darkTheme);
}else if(Cookies.get('theme') === 'light'){
    const lightTheme = document.createElement('link');
    lightTheme.rel = 'stylesheet';
    lightTheme.id = 'no-theme';
    lightTheme.href = '/light.css?v=' + new Date().getTime();
    document.head.appendChild(lightTheme);
}

冗長なコードですが、
処理がわかりやすいと思い、このままにしてますw

あと、一度テーマを変えるとクッキーを削除しないかぎりしばらく変な見た目になります。