Theming

CSS variables in global.css and theme context for light, dark, and system modes.

GhostUIProvider

import { GhostUIProvider, useGhostTheme } from 'ghost-ui-native';

<GhostUIProvider defaultTheme="system">
  <App />
</GhostUIProvider>

const { theme, setTheme, toggleTheme, resolvedTheme } = useGhostTheme();

CSS variables

global.css

:root {
  --background: 0 0% 99%;
  --foreground: 260 25% 10%;
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 100%;
  --radius: 0.75rem;
}

.dark {
  --background: 260 18% 7%;
  --foreground: 260 15% 96%;
  --primary: 262 90% 72%;
  --primary-foreground: 262 45% 12%;
}

Semantic classes

className="bg-background text-foreground border-border"
className="bg-primary text-primary-foreground"
className="text-muted-foreground"