Theme

// Import tokens
import { colors, spacing, borderRadius, fontSize } from '@mdk/core'

// Import utilities
import {
  getSystemTheme,
  applyTheme,
  getStoredTheme,
  setStoredTheme,
} from '@mdk/core'

// Import types
import type { Theme, ThemeConfig } from '@mdk/core'

import { colors } from '@mdk/core'

colors.primary[500]  // 'hsl(222, 47%, 50%)'
colors.gray[900]     // 'hsl(222, 47%, 11%)'

import { spacing } from '@mdk/core'

spacing[4]   // '1rem' (16px)
spacing[8]   // '2rem' (32px)

import { borderRadius } from '@mdk/core'

borderRadius.md    // '0.375rem'
borderRadius.full  // '9999px'

import { fontSize } from '@mdk/core'

fontSize.base  // '1rem'
fontSize.lg    // '1.125rem'

type Theme = 'light' | 'dark' | 'system'

import { getSystemTheme } from '@mdk/core'

const systemTheme = getSystemTheme()  // 'light' or 'dark'

import { applyTheme } from '@mdk/core'

applyTheme('dark')   // Sets dark mode
applyTheme('light')  // Sets light mode
applyTheme('system') // Uses system preference

import { getStoredTheme } from '@mdk/core'

const storedTheme = getStoredTheme()  // Theme | null
const customKey = getStoredTheme('my-theme-key')

import { setStoredTheme } from '@mdk/core'

setStoredTheme('dark')
setStoredTheme('light', 'my-theme-key')  // Custom storage key

import { useEffect, useState } from 'react'
import {
  applyTheme,
  getStoredTheme,
  setStoredTheme,
  getSystemTheme,
} from '@mdk/core'
import type { Theme } from '@mdk/core'

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState<Theme>(() => {
    return getStoredTheme() || 'system'
  })

  useEffect(() => {
    applyTheme(theme)
    setStoredTheme(theme)
  }, [theme])

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

:root {
  --mdk-color-primary: hsl(222, 47%, 50%);
  --mdk-color-background: hsl(210, 40%, 98%);
  --mdk-color-foreground: hsl(222, 47%, 11%);
  /* ... more properties */
}

.dark {
  --mdk-color-background: hsl(222, 47%, 11%);
  --mdk-color-foreground: hsl(210, 40%, 98%);
}