Free online CSS dark mode generator. Visually configure dark mode colors including background, text, links, cards. Real-time preview of dark mode effect. Generates complete CSS with CSS variables and @media prefers-color-scheme. Perfect for frontend developers adding dark mode to websites. Client-side only.
Sample text to preview dark mode appearance.
This is a sample link
prefers-color-scheme是CSS媒体查询特性，用于检测用户系统是否设置为浅色或深色模式。语法为：@media (prefers-color-scheme: dark) { ... }。当用户开启系统暗黑模式时，其中的CSS样式会自动生效，实现无缝的主题适配。
使用CSS变量实现暗黑模式的核心思路是：在:root中定义默认（浅色）颜色变量，在@media (prefers-color-scheme: dark)中覆盖为深色值。页面中使用var(--bg-color)引用变量。切换主题只需修改变量值，无需改动每个元素。
在Chrome DevTools中按Ctrl+Shift+E（或点击Elements面板右上角的Toggle Rendering），找到Emulate CSS media feature prefers-color-scheme选项，选择dark/light即可模拟。也可以直接在系统设置中切换深色模式。