Appearance

Manage appearance and integrate modes into your app.

Basic Usage

By default, the root ThemeProvider appearance is light. To set a different appearance pass it via the appearance prop. This will force the theme to use the specified setting.

<ThemeProvider appearance="dark">
  <App />
</ThemeProvider>

Preview

Switching Appearance

You can switch appearance by following code.

import { updateThemeAppearanceClass } from '@woozdesign/ui';
const { appearance, onAppearanceChange } = useThemeContext();
const toggleAppearance = () => {
  if (appearance === 'light') {
    updateThemeAppearanceClass('dark');
    onAppearanceChange('dark');
  } else if (appearance === 'dark') {
    updateThemeAppearanceClass('light');
    onAppearanceChange('light');
  }
};