Dark Mode
UnoCSS มีวิธีการจัดการ dark mode ที่ยืดหยุ่น โดยสามารถใช้ prefix
dark:เพื่อกําหนด style ที่จะใช้เมื่ออยู่ใน dark mode
Basic Usage
html
<div class="text-black dark:text-white">
Text will be black in light mode and white in dark mode
</div>Media Query (Default)
โดยค่าเริ่มต้น UnoCSS จะใช้ @media (prefers-color-scheme: dark) ในการตรวจจับ dark mode
css
/* Generated CSS */
.text-black {
color: #000;
}
@media (prefers-color-scheme: dark) {
.dark\:text-white {
color: #fff;
}
}Class Mode
สามารถเปลี่ยนเป็นใช้ class .dark แทนการใช้ media query ได้โดยการกําหนด config:
ts
// uno.config.ts
import { defineConfig } from "unocss";
export default defineConfig({
darkMode: "class",
});html
<!-- ใช้ class .dark ที่ root element -->
<html class="dark">
<body>
<div class="text-black dark:text-white">
Text will be white when .dark class is present
</div>
</body>
</html>