Theming

grannyshot-ui uses semantic tokens for all colors, enabling seamless dark mode support.

ThemeProvider

Wrap your app to enable theme switching:

import { ThemeProvider } from '@grannyshot/ui'
 
<ThemeProvider defaultTheme="system">
  {children}
</ThemeProvider>

Options: light, dark, system

useTheme Hook

Access and control the current theme:

import { useTheme } from '@grannyshot/ui'
 
function ThemeToggle() {
  const { theme, resolvedTheme, setTheme } = useTheme()
 
  return (
    <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
      {resolvedTheme === 'dark' ? 'Light' : 'Dark'}
    </button>
  )
}

Semantic Tokens

All components use semantic color tokens that automatically adapt to the theme:

Background

Foreground

Accent (Emerald)

Status

CSS Variable Prefix

All CSS variables use the --gs- prefix:

var(--gs-colors-accent)
var(--gs-colors-fg)
var(--gs-spacing-4)

Persistence

Theme preference is stored in localStorage under the key grannyshot-theme.