기본적으로 사용자 시스템 기반으로 다크모드를 설정하려면 dark라는 접두사를 사용해서 쉽게 다크모드를 저용할 수 있음.
<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
<div>
<span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
</span>
</div>
<h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
<p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
</p>
</div>CSS의 미디어 쿼리인 prefers-color-scheme를 사용하면 사용자의 OS를 기반으로 한 다크모드를 활성화할 수 있음.
만약 토글링으로 해주고 싶다면?
추가적인 설정을 해줭함.
테일윈드 설정에서 darkMode속성을 활성화하고
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'selector',
// ...
}
아래처럼 html 태그에 dark라는 클래스를 토글 시켜주면 적용됨.
<!-- Dark mode not enabled -->
<html>
<body>
<!-- Will be white -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
<!-- Dark mode enabled -->
<html class="dark">
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
여기서 자바스크립트로 html태그에 토글을 해주면 됨.
if (theme === DarkModeTheme.dark) {
localStorage.setItem('theme', DarkModeTheme.light);
document.querySelector('html')?.classList.remove('dark');
setTheme(DarkModeTheme.light);
} else {
localStorage.setItem('theme', DarkModeTheme.dark);
document.querySelector('html')?.classList.add('dark');
setTheme(DarkModeTheme.dark);
}
만약 class 대신 속성을 사용하고 싶다면
아래처럼 원하는 속성명을 명시하고 앞에처럼 사용하면 끝!
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['selector', '[data-mode="dark"]'],
// ...
}
<html lang='en' data-mode='dark'>
<ThemeContextProvider>
<body className={'bg-white dark:bg-black transition-colors'}>
<Header />
<div className='dark:bg-black'>{children}</div>
<Footer />
</body>
</ThemeContextProvider>
</html>
'프론트엔드 > TailwindCSS' 카테고리의 다른 글
| dynamic 클래스가 안될 때 (0) | 2023.08.09 |
|---|