useTheme

Overview

This hook is used to get and set the theme, and store the themeMode into localStorage.

Documentation and Examples

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useTheme.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useTheme.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useTheme.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useTheme.json

This hook is used to get and set the theme, and store the themeMode into localStorage.

Examples

Default usage

API

const { theme, themeMode, setThemeMode } = useTheme({
  localStorageKey?: string;
});

Params

| Property | Description | Type | Default | | -- | -- | | ---- | | theme | current display theme | "light" \| "dark" | if themeMode is "system" then equals to system setting，otherwise equals to themeMode | | themeMode | selected theme mode | "light" \| "dark" \| "system" | equals to localStorage "themeMode", otherwise equals to "system" | | setThemeMode | select theme mode | (mode: "light" \| "dark" \| "system") => void | |