import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta title="Theme/Dark Mode" />

<Title>Dark Mode</Title>
<Subtitle>
  Learn how to implement dark mode in your application using our semantic design
  tokens.
</Subtitle>

<SourceLinks
  links={[
    {
      label: 'shadcn/ui Dark Mode',
      href: 'https://ui.shadcn.com/docs/dark-mode/next',
    },
  ]}
/>
<LifecycleTag variant="Stable" />

## Overview

Our design system uses semantic CSS custom properties (tokens) that automatically adapt to dark mode when the `.dark` class is applied to your HTML element. All components in the `blocks` library are built with these tokens, ensuring consistent theming across light and dark modes.

## How It Works

When the `.dark` class is applied to your HTML element, all semantic tokens automatically switch to their dark mode values.

## ThemeToggle Component

For a ready-to-use UI toggle, see the [ThemeToggle](?path=/docs/theme-themetoggle--docs) component which provides a compact interface for switching between light, dark, and system themes.

## Example With NextJS

Use `next-themes` to manage theme state:

`pnpm add next-themes`

```tsx
import { ThemeProvider } from 'next-themes'

// Wrap your app with ThemeProvider
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

// Use ThemeToggle in your Shell
import { ThemeProvider, useTheme } from 'next-themes'
import { ThemeToggle } from '@chainlink/blocks'

const { theme, setTheme } = useTheme()

<SidebarFooter>
  <ThemeToggle darkModeToggle={{ theme, setTheme }} />
</SidebarFooter>

```