一键在 Manus 中运行任何 Skill

开始使用

dark-mode-theming

Dark mode and theming patterns. CSS variables, Tailwind dark mode, system preference, user toggle, Next.js themes.

在 Manus 中运行

星标6

分支1

更新时间2026年4月3日 15:32

来源

skeletorflet

skeletorflet/opencode-kit

打开 GitHub 仓库查看创作者相关仓库

安装命令

下载

在 Manus 中运行

适用职业SOC

网页开发工程师计算机与数学类职业15-1254L4

SKILL.md

readonly

name	dark-mode-theming
description	Dark mode and theming patterns. CSS variables, Tailwind dark mode, system preference, user toggle, Next.js themes.

Dark Mode & Theming

Dark mode done right: not just inverting colors.

1. CSS Variables (Foundation)

/* 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;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
}

/* System preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* same as [data-theme="dark"] */
  }
}

2. Tailwind Dark Mode

// 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>
  );
}

3. Theme Toggle (next-themes)

// _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>
  );
}

4. Dark Mode Color Guidelines

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)

5. Images in Dark Mode

/* 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);
}

6. Anti-Patterns

❌ 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`

同仓库更多 Skills

同仓库

accessibility

skeletorflet/opencode-kit

Web accessibility (a11y). WCAG 2.1, ARIA, keyboard navigation, screen readers, testing tools.

2026-04-036

analytics-tracking

skeletorflet/opencode-kit

Analytics and event tracking. Product analytics, Mixpanel, PostHog, Segment, GDPR compliance, event taxonomy.

2026-04-036

animation-principles

skeletorflet/opencode-kit

UI animation patterns. CSS transitions, Framer Motion, GSAP, performance, accessibility.

2026-04-036

auth-patterns

skeletorflet/opencode-kit

Authentication and authorization patterns. JWT, sessions, OAuth 2.0, RBAC, ABAC, refresh tokens, security.

2026-04-036

background-jobs

skeletorflet/opencode-kit

Background job patterns. Cron jobs, queued jobs, scheduling, BullMQ, pg-boss, Sidekiq patterns.

2026-04-036

caching-strategies

skeletorflet/opencode-kit

Caching patterns. HTTP caching, Redis, CDN, browser cache, cache invalidation strategies.

2026-04-036

name	dark-mode-theming
description	Dark mode and theming patterns. CSS variables, Tailwind dark mode, system preference, user toggle, Next.js themes.

Dark Mode & Theming

Dark mode done right: not just inverting colors.

1. CSS Variables (Foundation)

/* 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;
  --color-surface: #1e293b;
  --color-border: #334155;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
}

/* System preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* same as [data-theme="dark"] */
  }
}

2. Tailwind Dark Mode

// 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>
  );
}

3. Theme Toggle (next-themes)

// _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>
  );
}

4. Dark Mode Color Guidelines

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)

5. Images in Dark Mode

/* 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);
}

6. Anti-Patterns

❌ 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`