npm package: @octaviaflow/theme-settings
Description: Octaviaflow - Theme Settings Component
Latest version: 1.0.0

# @octaviaflow/react-theme-settings

> Theme settings components for the Octaviaflow Design System

## Installation

```bash
npm install @octaviaflow/react-theme-settings
```

## Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install @octaviaflow/react @octaviaflow/themes @octaviaflow/icons-react react react-dom
```

## Usage

### ThemeSettings

Container component for theme settings UI.

```tsx
import { ThemeSettings } from '@octaviaflow/react-theme-settings';

function App() {
  return (
    <ThemeSettings legendText="Choose your theme">
      {/* Theme controls go here */}
    </ThemeSettings>
  );
}
```

### ThemeSwitcher

Switch between light, dark, and system theme modes.

```tsx
import { ThemeSwitcher } from '@octaviaflow/react-theme-settings';
import { useState } from 'react';

function App() {
  const [theme, setTheme] = useState('system');

  return (
    <ThemeSwitcher
      value={theme}
      onChange={setTheme}
      labelLight="Light mode"
      labelDark="Dark mode"
      labelSystem="System preference"
    />
  );
}
```

### ThemeSetDropdown

Select theme color combinations.

```tsx
import { ThemeSetDropdown } from '@octaviaflow/react-theme-settings';
import { useState } from 'react';

function App() {
  const [themeSet, setThemeSet] = useState('white/g90');

  return (
    <ThemeSetDropdown
      id="theme-set"
      value={themeSet}
      onChange={setThemeSet}
      label="Select theme set"
      titleText="Theme color combination"
    />
  );
}
```

### useThemeSetting Hook

React hook to get the current theme based on user settings and system preferences.

```tsx
import { useThemeSetting } from '@octaviaflow/react-theme-settings';

function App() {
  const theme = useThemeSetting('system', 'white/g90', false);
  
  // theme will be 'white', 'g10', 'g90', or 'g100'
  // Updates automatically when system preference changes
  
  return <div data-theme={theme}>Content</div>;
}
```

## Complete Example

```tsx
import {
  ThemeSettings,
  ThemeSwitcher,
  ThemeSetDropdown,
  useThemeSetting,
} from '@octaviaflow/react-theme-settings';
import { useState } from 'react';

function App() {
  const [themeSetting, setThemeSetting] = useState('system');
  const [themeSet, setThemeSet] = useState('white/g90');
  
  // Get reactive theme based on settings
  const currentTheme = useThemeSetting(themeSetting, themeSet, false);

  return (
    <div data-theme={currentTheme}>
      <ThemeSettings legendText="Customize your theme">
        <ThemeSwitcher
          value={themeSetting}
          onChange={setThemeSetting}
        />
        <ThemeSetDropdown
          id="theme-set"
          value={themeSet}
          onChange={setThemeSet}
          label="Color scheme"
          titleText="Select theme colors"
        />
      </ThemeSettings>
    </div>
  );
}
```

## Components

### ThemeSettings

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | ReactNode | - | Theme control components |
| className | string | - | Additional CSS class |
| legendText | string | 'Theme settings' | Form group legend |

### ThemeSwitcher

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | 'light' \| 'system' \| 'dark' | - | Current theme mode |
| onChange | (theme) => void | - | Theme change handler |
| labelLight | string | 'Light' | Light mode label |
| labelDark | string | 'Dark' | Dark mode label |
| labelSystem | string | 'System' | System mode label |
| className | string | - | Additional CSS class |

### ThemeSetDropdown

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| id | string | - | Dropdown ID (required) |
| value | ThemeSetType | - | Current theme set |
| onChange | (themeSet) => void | - | Theme set change handler |
| label | string | - | Dropdown label |
| titleText | string | - | Dropdown title |
| className | string | - | Additional CSS class |

### useThemeSetting

```tsx
useThemeSetting(
  themeSetting: 'light' | 'system' | 'dark',
  themeSet: 'white/g90' | 'g10/g90' | 'white/g100' | 'g10/g100',
  complement: boolean
): 'white' | 'g10' | 'g90' | 'g100'
```

## License

Apache-2.0

## Source

Adapted from Carbon Labs ThemeSettings component for the Octaviaflow Design System.