Tailwind css dark mode
Tailwind CSS에서 dark모드 적용은 너무나 매끄럽다.
기존에 디폴트 모드에서 다크모드 적용을 해보았다.
아래내용은 정석은 아니고, 머리속 생각으로 적용한
방법이다.
index.html
<body class="bg-white dark:bg-neutral-800">
<div id="root"></div>
</body>
index.js (global settings)
if (localStorage.theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
darkModeController.jsx
function handleChange() {
const checked = !isChecked;
if (checked) {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
} else {
document.documentElement.classList.remove('dark');
localStorage.removeItem('theme');
}
setIsChecked(checked);
}
class example
<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>dark:class 의 규칙으로 다크 모드 클래스를 설정한다. 대부분 bg, text color을 설정하게 된다.
다크모드가 적용된 내용은 https://delog.io의 서브
메뉴에서 확인 해볼 수 있다.
'Program > Front-end' 카테고리의 다른 글
| twitter card with csr (2) | 2022.12.29 |
|---|---|
| [Marked] html안에 image가 있을 경우 (2) | 2022.12.26 |
| mobile에서 textarea 자동줌 해결 with 1rem 16px (0) | 2022.12.25 |
| web3 개발자가본 SSR vs CSR (3) | 2022.12.24 |
| listitem [Markdown 다루기 with Marked, Tailwind CSS] (0) | 2022.12.22 |
댓글