Dottiv1.1

Theming

Customize Dotti's appearance with built-in themes, custom themes, and design tokens.

Current Theme

You're currently viewing the light theme.

Theme Colors

Components Preview

Secondary text example
Muted background

Setup

Wrap your application with ThemeProvider to enable theming:

import { ThemeProvider } from 'dotti'
import 'dotti/styles.css'

function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
    </ThemeProvider>
  )
}

Using Themes

Access theme information and controls with the useTheme hook:

import { useTheme } from 'dotti'

function ThemeControls() {
  const { theme, setTheme, toggleTheme } = useTheme()
  
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <button onClick={() => setTheme('light')}>Light</button>
      <button onClick={() => setTheme('dark')}>Dark</button>
    </div>
  )
}

Custom Themes

Create custom themes by extending or overriding the default color palette:

import { createCustomTheme, ThemeProvider } from 'dotti'

const customTheme = createCustomTheme({
  colors: {
    accent: '#00FF88', // Neon green
    background: '#0A0A0A',
    foreground: '#FFFFFF',
    primary: '#FFFFFF',
    secondary: '#A3A3A3',
    muted: '#171717',
    border: '#404040',
    success: '#00C851',
    warning: '#FFB800',
    error: '#FF4444',
    info: '#33B5E5'
  },
  isDark: true
})

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your app with custom theme */}
    </ThemeProvider>
  )
}

Design Tokens

Dotti uses CSS custom properties that you can use in your own styles:

--dotti-background

Main background color

var(--dotti-background)
--dotti-foreground

Primary text color

var(--dotti-foreground)
--dotti-accent

Brand/accent color

var(--dotti-accent)
--dotti-primary

Primary UI elements

var(--dotti-primary)
--dotti-secondary

Secondary text/elements

var(--dotti-secondary)
--dotti-muted

Subtle backgrounds

var(--dotti-muted)
--dotti-border

Border colors

var(--dotti-border)
--dotti-success

Success states

var(--dotti-success)
--dotti-warning

Warning states

var(--dotti-warning)
--dotti-error

Error states

var(--dotti-error)
--dotti-info

Info states

var(--dotti-info)
Using CSS Variables
:root {
  /* Light theme variables */
  --dotti-background: #FFFFFF;
  --dotti-foreground: #000000;
  --dotti-accent: #FF6F00;
  /* ... other variables */
}

.dark {
  /* Dark theme variables */
  --dotti-background: #000000;
  --dotti-foreground: #FFFFFF;
  --dotti-accent: #FF6F00;
  /* ... other variables */
}

/* Use in your custom CSS */
.my-component {
  background: var(--dotti-background);
  color: var(--dotti-foreground);
  border-color: var(--dotti-accent);
}

Tailwind Integration

Use Dotti's design tokens in your Tailwind configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // Theme-aware colors
        background: 'var(--dotti-background)',
        foreground: 'var(--dotti-foreground)',
        accent: 'var(--dotti-accent)',
        // ... other Dotti colors
      }
    }
  }
}