[Javascript] vanillaJS 다크모드 구현하기

 

 

 

 

바닐라 JS로 간단하게 다크모드 구현하는 방법

 

1. CSS 파일에 색상 관리 변수 생성하기

 

:root {
    --text-strong: #14212B;
    --text-bold: #4B5966;
    --text-default: #5F6E76;
    --text-weak: #879298;
    --text-white-default: #FFFFFF;
    --text-white-weak: #FFFFFFB2;
    --text-point: #4362D0;
    --surface-default: #FFFFFF;
    --surface-alt: #F5F7F9;
    --surface-brand-default: #4362D0;
    --surface-brand-alt: #7890E7;
    --border-bold: #6E8091;
    --border-default: #D2DAE0;
}

[data-theme="dark"]{
    --text-strong: #FFFFFF;
    --text-bold: #F5F7F9;
    --text-default: #D2DAE0;
    --text-weak: #FFFFFFB2;
    --text-white-default: #FFFFFF;
    --text-white-weak: #FFFFFFB2;
    --text-point: #4362D0;
    --surface-default: #14212B;
    --surface-alt: #4B5966;
    --surface-brand-default: #4362D0;
    --surface-brand-alt: #7890E7;
    --border-bold: #FFFFFFB2;
    --border-default: #5F6E76;
}

 

 

 

2. 다크모드 토글 버튼 생성하기

<input type="checkbox" id="theme-toggle" hidden>
<label for="theme-toggle" class="theme-toggle-switch">
     <span class="theme-toggle-btn"></span>
</label>

 

 

3. 토글 버튼 클릭 이벤트 연결하기

import { handleThemeChange } from "../main/init.js";

const handleToggle = () => {
    const themeToggleBtn = document.querySelector('#theme-toggle');
    const curTheme = getTheme();

    if(curTheme) {
        document.documentElement.setAttribute("data-theme", curTheme);
    }

    themeToggleBtn.addEventListener('click', () => {
        let theme = document.documentElement.getAttribute("data-theme");
        theme = theme === "light" ? "dark" : "light";
        setTheme(theme);
        handleThemeChange();
    })
}


export const getTheme = () => localStorage.getItem("theme") || "light";


export function onThemeChange(callback) {
    document.addEventListener('themeChange', callback);
}

export function setTheme (theme) {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("theme", theme);
    document.dispatchEvent(new Event('themeChange'));
}

document.addEventListener("DOMContentLoaded", handleToggle);