ks.dgoon.lee log

dboard - dark/light theme 구현 v2 / v3


2024/01/21 16:29:03 #django #dev #bulletin board #dboard #javascript #jQuery #dark theme

V2

<script> function get_current_theme() { let current_theme = localStorage.getItem('theme'); if (current_theme == 'light' || current_theme == 'dark') { return current_theme; } localStorage.setItem('theme', 'light'); return 'light'; } function toggle_theme() { let current_theme = get_current_theme(); if (current_theme == "light") { current_theme = "dark"; } else if (current_theme == "dark") { current_theme = "light"; } else { current_theme = "light"; } localStorage.setItem('theme', current_theme); set_theme(current_theme); } function set_theme(theme) { if (theme == 'light') { $('#stylesheet').attr('href', "{% static 'core/style.css' %}") $('#toggle_theme').html('☽'); } else if (theme == 'dark') { $('#stylesheet').attr('href', "{% static 'core/style-dark.css' %}") $('#toggle_theme').html('☼'); } else { toast('잘못된 테마 설정입니다.'); } } set_theme(get_current_theme()); </script>

footer 에 위 코드 넣고, head 에 있는 <link ... href="PATH/TO/style.css">id="stylesheet"넣어줌. 그리고 어제 만든 theme change 버튼에 onclick='toggle_theme();'넣어주면 끝.

어제 만든 urls, views 변경은 모두 삭제. 서버와 통신 없이 클라이언트에서만 처리하는거니까 이게 더 순리에 맞는것 같다.




V3

django 어드민에 포함된 theme.js 를 찾아 보았다.

'use strict';
{
    window.addEventListener('load', function(e) {
        function setTheme(mode) {
            if (mode !== "light" && mode !== "dark" && mode !== "auto") {
                console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`);
                mode = "auto";
            }
            document.documentElement.dataset.theme = mode;
            localStorage.setItem("theme", mode);
        }
        function cycleTheme() {
            const currentTheme = localStorage.getItem("theme") || "auto";
            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
            if (prefersDark) {
                // Auto (dark) -> Light -> Dark
                if (currentTheme === "auto") {
                    setTheme("light");
                } else if (currentTheme === "light") {
                    setTheme("dark");
                } else {
                    setTheme("auto");
                }
            } else {
                // Auto (light) -> Dark -> Light
                if (currentTheme === "auto") {
                    setTheme("dark");
                } else if (currentTheme === "dark") {
                    setTheme("light");
                } else {
                    setTheme("auto");
                }
            }
        }
        function initTheme() {
            // set theme defined in localStorage if there is one, or fallback to auto mode
            const currentTheme = localStorage.getItem("theme");
            currentTheme ? setTheme(currentTheme) : setTheme("auto");
        }
        function setupTheme() {
            // Attach event handlers for toggling themes
            const buttons = document.getElementsByClassName("theme-toggle");
            Array.from(buttons).forEach((btn) => {
                btn.addEventListener("click", cycleTheme);
            });
            initTheme();
        }
        setupTheme();
    });
}

이걸 참고해서 내 구현도 auto 를 포함해서 cycle 돌도록 했다. auto 는 시스템 설정이 dark 를 선호하는지를 보고 dark or light 중 하나를 선택한다. 아래 부분이다.

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

이제 진짜 끝!



댓글 1개

2024/01/21 16:44:21 dgoon
localStorage.getItem('theme') - 장고 어드민에서도 요걸로 테마 가져오나보다. 장고 어드민 사이트와 dark/light 테마가 동기화되었다. 그렇다면 auto 도 같은 방식으로 처리하면 되겠네...
⤷ 댓글을 작성해 주세요. 비밀번호는 나중에 댓글을 수정하거나 삭제할 때 필요합니다.