Skip to content
Typewriting Class

Dark Mode

With tw

Section titled “With tw”
import { tw } from 'typewritingclass'


tw.bg.white.dark(tw.bg.slate900)
tw.textColor.slate900.dark(tw.textColor.slate100)


// Multiple utilities in one dark() call
tw.bg.white.textColor.slate900
  .dark(tw.bg.slate900.textColor.slate100)

Combining with other modifiers

Section titled “Combining with other modifiers”
tw.bg.white
  .hover(tw.bg.blue50)
  .dark(tw.bg.slate900.hover(tw.bg.slate800))

Full example

Section titled “Full example”
import { tw } from 'typewritingclass'


const card = tw
  .p(6)
  .bg.white
  .rounded.lg
  .shadow.sm
  .hover(tw.shadow.md)
  .dark(tw.bg.slate800.shadow.none)


const title = tw
  .textColor.slate900
  .font.semibold
  .dark(tw.textColor.white)


const body = tw
  .textColor.slate600
  .dark(tw.textColor.slate400)

Manual theme switching

Section titled “Manual theme switching”

For toggle buttons beyond system preference, use createTheme() and setTheme():

import { createTheme, injectTheme, setTheme } from 'typewritingclass/theme'


const light = createTheme({ name: 'light', colors: { ... } })
const dark = createTheme({ name: 'dark', colors: { ... } })


injectTheme(light.cssText)
injectTheme(dark.cssText)


setTheme('dark') // sets <html data-theme="dark">

See Custom Themes for the full API.

With cx() + when()

Section titled “With cx() + when()”
import { cx, bg, textColor, when, dark } from 'typewritingclass'


cx(bg.white, textColor.slate900, when(dark)(bg.slate900, textColor.slate100))