Svelte로 간단한 다크 모드 토글 만들기
라이트/다크 모드 토글이 지금 어디에나 있다는 것을 눈치채셨을 것입니다. 거의 every popular website 사용자가 선호하는 테마를 선택할 수 있습니다. 그렇다면 Svelte 앱에 테마 토글을 어떻게 추가합니까?
운 좋게도 매우 쉽습니다. 수행해야 할 작업은 다음과 같습니다.
1. 토글 구성 요소 추가
새 구성 요소
DarkModeToggle.svelte
를 만들고 그 안에 새 확인란을 추가합니다.<input type="checkbox" on:click={toggleTheme} />
확인란은 widely supported이고 부울 상태를 나타내기 때문에 이와 같은 토글에 대해 꽤 좋은 선택입니다. 우리의 경우
false
는 "light off"(= "dark")를 나타내고 true
는 "on"을 나타냅니다.앱에 새 구성 요소를 추가합니다.
2. 토글 테마
다음으로
toggleTheme
핸들러를 구현해야 합니다. 구성 요소에 script
태그를 추가합니다.<script>
const STORAGE_KEY = 'theme';
const DARK_PREFERENCE = '(prefers-color-scheme: dark)';
const THEMES = {
DARK: 'dark',
LIGHT: 'light',
};
const prefersDarkThemes = () => window.matchMedia(DARK_PREFERENCE).matches;
const toggleTheme = () => {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored) {
// clear storage
localStorage.removeItem(STORAGE_KEY);
} else {
// store opposite of preference
localStorage.setItem(STORAGE_KEY, prefersDarkThemes() ? THEMES.LIGHT : THEMES.DARK);
}
// TODO: apply new theme
};
</script>
...
보시다시피 여기에서 많은 일이 진행되고 있습니다.
localStorage
를 사용하여 사용자의 테마 기본 설정을 저장합니다. 다른 모든 경우에는 선호도를
localStorage
에 저장합니다. 3. 테마 적용
마지막으로 새 테마를 적용해야 합니다. 파일에 다른 함수를 추가하고
toggleTheme
끝에 호출합니다. const applyTheme = () => {
const preferredTheme = prefersDarkThemes() ? THEMES.DARK : THEMES.LIGHT;
currentTheme = localStorage.getItem(STORAGE_KEY) ?? preferredTheme;
if (currentTheme === THEMES.DARK) {
document.body.classList.remove(THEMES.LIGHT);
document.body.classList.add(THEMES.DARK);
} else {
document.body.classList.remove(THEMES.DARK);
document.body.classList.add(THEMES.LIGHT);
}
};
const toggleTheme = () => {
...
applyTheme();
};
지금까지 좋아 보인다! 그러나 우리는 여전히 일부 극단적인 경우를 처리하지 않습니다.
onMount
에서 두 상황을 모두 처리할 수 있습니다. import { onMount } from 'svelte';
...
onMount(() => {
applyTheme();
window.matchMedia(DARK_PREFERENCE).addEventListener('change', applyTheme);
});
마지막으로 중요한 것은 상태가 테마와 일치하도록 확인란을 조정하는 것입니다.
<input type="checkbox" checked={currentTheme !== THEMES.DARK} on:click={toggleTheme} />
이제 남은 일은 다음과 같습니다.
4. 사용자 정의 CSS 작성
이제 다크 모드에 대한 사용자 정의 스타일을 작성할 수 있습니다.
@media (prefers-color-scheme: dark) {
body:not(.light) {
/* Your stuff here... */
}
}
body.dark {
/* And also here... */
}
으아악 우리는 끝났어! 🎉
완전히 작동하는 예제에 관심이 있다면 내 webapp Manicure ( source code )을 확인하십시오. 또한 토글 스타일을 지정하는 방법에 대한 아이디어를 제공할 수도 있습니다.
Reference
이 문제에 관하여(Svelte로 간단한 다크 모드 토글 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lenaschnedlitz/create-a-simple-dark-mode-toggle-with-svelte-4b3g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)