BrandCn

Dark Mode Support

All BrandCn themes include built-in dark mode support with proper color contrast and accessibility.

How It Works

BrandCn themes use CSS variables for both light and dark modes. The dark mode styles are applied when the .dark class is added to the HTML element.

:root {
  /* Light mode */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}

.dark {
  /* Dark mode */
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

Using with shadcn/ui

If you're using shadcn/ui, dark mode is handled automatically through their theme provider:

// app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider"

export function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Manual Toggle

You can also manually toggle dark mode by adding/removing the class:

// Toggle dark mode
document.documentElement.classList.toggle('dark')

// Check if dark mode is enabled
const isDark = document.documentElement.classList.contains('dark')

Accessibility

All BrandCn themes are designed with accessibility in mind. Dark mode colors maintain proper contrast ratios for WCAG compliance.

  • Minimum 4.5:1 contrast ratio for text
  • 3:1 contrast ratio for large text and UI components
  • No pure black (#000) or pure white (#fff) - reduces eye strain

Note

Dark mode is automatically applied based on user system preferences when using the shadcn/ui theme provider. You can also allow users to manually override this setting.