菜单
Dark mode and theming patterns. CSS variables, Tailwind dark mode, system preference, user toggle, Next.js themes.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/skeletorflet/opencode-kit --skill dark-mode-theming命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | dark-mode-theming |
| description | Dark mode and theming patterns. CSS variables, Tailwind dark mode, system preference, user toggle, Next.js themes. |
Dark mode done right: not just inverting colors.
/* Light theme (default) */
:root {
--color-background: #ffffff;
--color-surface: #f9fafb;
--color-border: #e5e7eb;
--color-text-primary: #111827;
--color-text-secondary: #6b7280;
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-danger: #ef4444;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
}
/* Dark theme */
[data-theme="dark"],
.dark {
--color-background: #0f172a;
: ;
: ;
: ;
: ;
: ;
: ;
: (,,,);
}
(: dark) {
() {
}
}
// tailwind.config.ts
export default {
darkMode: "class", // or "media" for system-only
theme: {
extend: {
colors: {
background: "var(--color-background)",
surface: "var(--color-surface)",
},
},
},
};
// Component using dark mode classes
function Card({ children }: { children: React.ReactNode }) {
return (
<div className="
bg-white dark:bg-gray-800
border border-gray-200 dark:border-gray-700
text-gray-900 dark:text-gray-100
rounded-xl p-6 shadow-sm dark:shadow-gray-900
">
{children}
</div>
);
}
// _app.tsx or layout.tsx
import { ThemeProvider } from "next-themes";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider
attribute="class" // Sets class="dark" on <html>
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
);
}
// Toggle component
import { useTheme } from "next-themes";
function ThemeToggle() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return <div className="w-9 h-9" />; // Prevent hydration mismatch
return (
<button
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
aria-label="Toggle theme"
>
{theme === "dark" ? <SunIcon /> : <MoonIcon />}
</button>
);
}
Don\'t just invert:
├── Dark backgrounds: #0f172a, #1e293b (not pure #000000)
├── Text on dark: #f1f5f9 (not pure #ffffff - too harsh)
├── Reduce saturation of colors in dark mode
├── Increase shadows (they disappear on dark bg)
└── Borders need more contrast (not less)
Elevation in dark mode:
├── Light: shadows create elevation
├── Dark: lighter backgrounds create elevation
├── Level 0: #0f172a
├── Level 1: #1e293b (cards)
├── Level 2: #293548 (modals)
└── Level 3: #334155 (tooltips)
/* Invert logos/icons designed for light backgrounds */
.logo-light-mode {
display: block;
}
.logo-dark-mode {
display: none;
}
.dark .logo-light-mode {
display: none;
}
.dark .logo-dark-mode {
display: block;
}
/* Or use CSS filter for simple cases */
.dark img.invert-on-dark {
filter: invert(1) hue-rotate(180deg);
}
| ❌ Don't | ✅ Do |
|---|---|
| Pure #000000 background | Dark navy/slate (#0f172a) |
| Pure #ffffff text on dark | Slightly dimmed white (#f1f5f9) |
| Flash of wrong theme on load | Use next-themes with suppressHydrationWarning |
| Same shadows as light mode | Adjust shadow opacity for dark |
| Ignore images/icons | Provide dark variants |
| No system preference support | Default to prefers-color-scheme |