Wrap it once.

One provider, set at the root. ThemeProvider owns both layers — light / dark and the color scheme. Name Lumos and every component follows.

app/layout.tsx

// app/layout.tsx — one provider owns both layers
import { ThemeProvider } from '@tarva/ui/providers';

export default function RootLayout({ children }) {
  return (
    <ThemeProvider
      colorScheme="lumos-aesthetics-wellness"
      defaultTheme="system"
      enableSystem
    >
      {children}
    </ThemeProvider>
  );
}

The two layers

Mode

Light / dark, owned by next-themes on the class attribute. Every role resolves a value per mode.

Color scheme

The colorScheme prop, applied as data-color-scheme. Lumos is one scheme; swap it and the whole surface re-skins — no component changes.

Switch at runtime

Both providers expose hooks, so a settings toggle can flip mode or scheme live.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait