@lacspace/theme

Dark / light / system

v1.0.1React Kit — hooks, state, data & UX zero deps · react 18+TypeScript

On this page

When to use it
Overview
Install
Quick example
Key API
Tips
Watch out for
Works well with
More in React Kit — hooks, state, data & UX

When to use it

Adding dark / light / system theming to any React app — Next.js App Router included — with no flash of the wrong theme on first paint. A framework-agnostic next-themes alternative.

Overview

A tiny ThemeProvider (with a built-in no-flash script), a useTheme hook and getThemeScript(). Persists to storage, follows the OS, toggles a class or data-attribute — a framework-agnostic next-themes-lite.

Install

$ npm install @lacspace/theme

Quick example

@lacspace/themets

const { theme, setTheme } = useTheme()

Key API

<ThemeProvider …>defaultTheme, storageKey, themes, attribute, enableSystem, disableTransitionOnChange, enableNoFlashScript (built-in no-flash).

useTheme()→ { theme, setTheme, resolvedTheme, systemTheme, themes }.

getThemeScript(options?)Self-contained no-flash IIFE string (advanced; the provider injects one by default).

Tips

Just wrap your app in `<ThemeProvider>` — it renders a tiny no-flash script for you, so the correct theme is applied before first paint with nothing else to wire up. Add `suppressHydrationWarning` to your `<html>`.

Read/set with `useTheme()` → `{ theme, setTheme, resolvedTheme }`. `resolvedTheme` turns "system" into the concrete "light"/"dark".

Use `attribute="class"` for Tailwind's `dark:` variant, or a `data-theme` attribute for CSS custom-property theming.

Set `disableTransitionOnChange` to avoid every transition firing at once when the theme flips.

Watch out for

The package ships `"use client"`, so `getThemeScript()` is a client export — don't call it from a Server Component. You rarely need it: `<ThemeProvider>` already injects the no-flash script. To inject it yourself, set `enableNoFlashScript={false}` and render `getThemeScript()` from a client component or plain HTML.

If you inject the script manually, match its `storageKey`, `attribute` and `defaultTheme` to the provider's, or the pre-paint script and React will disagree.

Works well with

@lacspace/hotkeysKeyboard shortcuts @lacspace/uiReact kit that feels alive

Looking for the complete API and more examples? The npm page and GitHub README carry the full reference — or grab the PDF.

Lacspace

@lacspace/theme

Dark / light / system

v1.0.1React Kit — hooks, state, data & UX zero deps · react 18+TypeScript

Download PDF npm Source

On this page

When to use it
Overview
Install
Quick example
Key API
Tips
Watch out for
Works well with
More in React Kit — hooks, state, data & UX

When to use it

Adding dark / light / system theming to any React app — Next.js App Router included — with no flash of the wrong theme on first paint. A framework-agnostic next-themes alternative.

Overview

Install

$ npm install @lacspace/theme

Quick example

@lacspace/themets

const { theme, setTheme } = useTheme()

Key API

<ThemeProvider …>defaultTheme, storageKey, themes, attribute, enableSystem, disableTransitionOnChange, enableNoFlashScript (built-in no-flash).

useTheme()→ { theme, setTheme, resolvedTheme, systemTheme, themes }.

getThemeScript(options?)Self-contained no-flash IIFE string (advanced; the provider injects one by default).

Tips

Read/set with `useTheme()` → `{ theme, setTheme, resolvedTheme }`. `resolvedTheme` turns "system" into the concrete "light"/"dark".

Use `attribute="class"` for Tailwind's `dark:` variant, or a `data-theme` attribute for CSS custom-property theming.

Set `disableTransitionOnChange` to avoid every transition firing at once when the theme flips.

Watch out for

If you inject the script manually, match its `storageKey`, `attribute` and `defaultTheme` to the provider's, or the pre-paint script and React will disagree.

Works well with

@lacspace/hotkeysKeyboard shortcuts @lacspace/uiReact kit that feels alive

Looking for the complete API and more examples? The npm page and GitHub README carry the full reference — or grab the PDF.

When to use it

Overview

Install

Quick example

Key API

Tips

Watch out for

Works well with

More in React Kit — hooks, state, data & UX

When to use it

Overview

Install

Quick example

Key API

Tips

Watch out for

Works well with

More in React Kit — hooks, state, data & UX