vartheme

Documentation

Build beautiful, themeable React interfaces with minimal effort. Vartheme handles the heavy lifting of CSS variables and state management.

Installation

Install the package via your preferred package manager.

BASH
1
npm install vartheme

Basic Usage

Simply wrap your root component with ThemeProvider. This provides the context for themes and handles automatic CSS variable injection.

TSX
1
import { ThemeProvider, ThemeToggle } from 'vartheme'
2


3
export default function App() {
4
  return (
5
    <ThemeProvider theme="ocean" mode="dark">
6
      <YourApp />
7
    </ThemeProvider>
8
  )
9
}

Add the built-in animated toggle anywhere:

TSX
1
import { ThemeToggle } from 'vartheme'
2


3
function Navbar() {
4
  return (
5
    <nav>
6
      <h1>My App</h1>
7
      <ThemeToggle size={48} />
8
    </nav>
9
  )
10
}

Themes

Vartheme comes with 5 hand-crafted color palettes.

Default
Modern Purple
Ocean
Deep Sea
Forest
Evergreen
Sunset
Evening Glow
Rose
Velvet Rose
TSX
1
// Easily switch between presets:
2
<ThemeProvider theme="rose">
3
<ThemeProvider theme="sunset">
4
<ThemeProvider theme="forest">

useThemeContext

Access theme state and controls from any component.

TSX
1
import { useThemeContext } from 'vartheme'
2


3
function CustomControls() {
4
  const { mode, theme, toggle, setTheme } = useThemeContext()
5


6
  return (
7
    <button onClick={toggle}>Toggle Appearance</button>
8
  )
9
}

CSS Variables

--vt-primaryThe core brand color
--vt-backgroundBase page color
--vt-surfaceCards and Modals
--vt-textPrimary text color
CSS
1
.card { background: var(--vt-surface); color: var(--vt-text); }

Tailwind Plugin

JS
1
// tailwind.config.js
2
const { varthemePlugin } = require('vartheme/tailwind')
3


4
module.exports = {
5
  plugins: [varthemePlugin],
6
}

Example usage:

TSX
1
<div className="bg-vt-surface text-vt-primary">Hello World</div>

TypeScript

TSX
1
import { ThemeName, ThemeColors } from 'vartheme'