@octaviaflow/react-theme-settings

Theme settings components for the Octaviaflow Design System

Installation

npm install @octaviaflow/react-theme-settings

Peer Dependencies

This package requires the following peer dependencies:

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

Usage

ThemeSettings

Container component for theme settings UI.

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.

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.

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.

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

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

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.