Shoelace에서는 DarkMode를 사용하는 방법을 제공하고있다.
단, 아래의 단계가 필요하다.
우선 Shoelace에서 제공하는 Light & Dark Theme를 위한 CSS를 받아준다
<!-- shoelace Light & Dark Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/light.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/dark.css">
전역으로 사용하는 reset.css에 다음과 같이 Light-Theme일때의 색상과 Dark-Theme일때의 색상을 명시해준다
reset.css
/* 라이트 모드 컬러 */
.sl-theme-light {
/* background - color */
--bg-color: #ffffff;
/* text - color */
--text-body-color: #555555;
--text-title-color: #1d1d1d;
--text-disable-color: #8e8e8e;
/* border color */
--border-gray-color: rgb(136, 136, 136);
/* button color */
--button-primary-color : rgb(59, 105, 255);
/* icon color */
--icon-color: var(--sl-color-neutral-700);
}
/* 다크 모드 컬러 */
.sl-theme-dark {
/* background - color */
--bg-color: #202020;
/* text - color */
--text-body-color: #bdbdbd;
--text-title-color: #eeeeee;
--text-disable-color: #8e8e8e;
/* border color */
--border-gray-color: #888;
/* button color */
--button-primary-color :rgb(75, 132, 255);
/* icon color */
--icon-color: var(--sl-color-neutral-900);
}
위에서 선언한 컬러를 전역으로 사용하기위해 동일하게 reset.css에서 아래와같이 기본 html 요소들에 스타일을 적용시킨다.
reset.css
/* 실제 적용되는 부분 */
body {
background-color: var(--bg-color);
color: var(--text-body-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
h1,h2,h3,h4,h5,p,span,small,div{
color: var(--text-title-color);
}
페이지에서 Theme의 변경을 저장하고 적용시키기 위해서는 JS가 필요하다.
아래의 script를 추가하여 페이지에서 적용될 수 있게 한다.
/** 라이트 모드 , 다크 모드를 바꾸기위한 script */
/* DOM */
const html = document.documentElement;
const darkModeSwitch = document.getElementById('darkModeSwitch');
/* function */
const getLocalStorage_darkMode = () => {
let mode = window.localStorage.getItem('isDarkMode');
if(mode === null){ //localStorage가 없다 = 첫 방문
/* 초기 테마 설정 (시스템 테마 감지) */
mode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
if(darkModeSwitch !== null)
{
darkModeSwitch.checked = mode === 'dark' ? true : false;
}
setTheme(mode)
}
const getCurrentTheme = () => {
// 현재 테마 확인
return html.classList.contains('sl-theme-dark') ? 'dark' : 'light';
};
const setTheme = (mode) => {
// 테마 설정 함수
html.classList.remove('sl-theme-light', 'sl-theme-dark');
html.classList.add(`sl-theme-${mode}`);
window.localStorage.setItem('isDarkMode', mode);
};
/* Event */
darkModeSwitch?.addEventListener('sl-change', () => {
// 토글 이벤트 연결
const isDarkMode = darkModeSwitch.checked;
setTheme(isDarkMode ? 'dark' : 'light');
});
/* init */
getLocalStorage_darkMode()