스벨트킷에서 daisyUI 테마를 이용해 Dark mode를 적용해 보자!
1. 테마 변경을 위해 theme-change 설치
npm install theme-change
2. 원하는 daisyUI 테마 선택
daisyUI themes — Tailwind CSS Components ( version 4 update is here )
How to use daisyUI themes?
daisyui.com
- 다크 테마 "dim" / 라이트 테마 "pastel" 선택
3. tailwind.config.cjs 파일 수정
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'],
plugins: [require("daisyui")],
daisyui: {
themes: [
'pastel',
'dim'
],
}
}- daisyui의 themes 속성에 선택한 테마 값 입력
4. src/app.html 파일 수정
<html lang="en" data-theme="pastel">
...
</html>- 기본 값으로 사용할 테마, 즉 라이트 테마를 data-theme 값으로 설정
5. 테마 컨트롤러 컴포넌트 생성
Tailwind Theme Controller Component — Tailwind CSS Components ( version 4 update is here )
Tailwind Theme Controller examples: If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value. component
daisyui.com
- 라이트 테마 <-> 다크 테마를 전환시켜 줄 테마 컨트롤러 컴포넌트 생성
6. 다크모드 체크 값과 bind 할 writable 스토어 생성
나는 src/lib/stores 경로에 레이아웃 스토어를 생성했다.
import { writable } from "svelte/store";
export let darkmode = writable(false); // 다크 모드- layoutStore.js
7. 테마 컨트롤러 컴포넌트 수정
<script lang="ts">
import { darkmode } from './../stores/layoutStore.js';
let chk = false;
$: modeSet = chk ? "pastel" : "dim";
$: modeValue = chk ? "pastel" : "dim";
</script>
<input type="checkbox" bind:checked={$darkmode} value={modeSet} aria-label={modeValue} class="toggle theme-controller"/>- 위에서 생성한 darkmode 스토어를 checkbox와 바인딩 >> bind:checked={$darkmode}
- value={modeSet} aria-label={modeValue} : 현재 checkbox 값이 false면 pastel 값을, true면 dim 값을 가짐
- 리액티브 구문($ :)을 이용해 선언해야 테마 즉각 반영
8. src/routes/+layout.svelte 파일에 themeChange() 적용
<script>
import "../app.css";
import { onMount } from 'svelte';
import { themeChange } from 'theme-change';
onMount(async () => {
themeChange();
});
</script>
~ 테스트 ~
이제 테마 컨트롤러를 클릭해 다크 테마 작동을 확인한다.
다크 테마가 적용된 채로 새로고침을 눌러 본다.
기본 테마인 라이트 테마로 바뀔 것이다.
다크 테마를 설정했을 때, 로컬스토리지에 저장해 두어야 테마를 기억한다.
9. 테마 컨트롤러 컴포넌트에 로컬스토리지에 저장하는 기능 추가
let changeMode = () => {
if ($darkmode === false) {
localStorage.setItem('mode', 'dark');
} else {
localStorage.setItem('mode', 'light');
}
}- 모드가 전환될 때마다 로컬스토리지에 { "mode": "dark" } 또는 { "mode": "light" } 값 설정
- bind:checked={$darkmode} 값을 줬던 input checkbox에 위 함수 적용 on:change={changeMode}
10. src/routes/+layout.svelte 파일 수정
<script>
import "../app.css";
import {onMount} from 'svelte';
import { themeChange } from 'theme-change';
import { darkmode } from '$lib/stores/layoutStore';
onMount(async () => {
$darkmode = localStorage.getItem('mode') === "dark";
// darkmode로 저장되어 있으면 dark 테마 설정
themeChange();
});
</script>- onMount를 이용해 컴포넌트가 마운트 될 때 다크테마 설정 여부 확인
- 다크모드 체크 값과 바인딩 해 주었던 값 $darkmode = 로컬스토리지에 "mode" 값이 "dark"라면 true를 반환
이제 사용자의 테마 설정 값을 불러와 적용시킬 수 있다.
'⋆ ₊ Svelte ₊ ⋆' 카테고리의 다른 글
| [SvelteKit] daisyUI 설치 및 설정 (0) | 2024.01.11 |
|---|---|
| [SvelteKit] Tailwind 설치 및 설정 (0) | 2024.01.11 |
| [SvelteKit] 스벨트킷 설치 및 초기 설정 (0) | 2023.12.19 |