Theming

Raw UI supports light and dark themes by default, you can also create your own themes.

Switch themes

To switch in the default themes you only need to set the value of themeType, you can follow the steps below:

1. Make sure RawUIProvider are already on the root component.
2. Update the value of themeType, and the theme of all components will follow automatically.

import { RawUIProvider } from 'raw-ui';
 
const App = () => {
  const [themeType, setThemeType] = useState('light');
 
  const switchThemes = () => {
    setThemeType(lastValue => (lastValue === 'dark' ? 'light' : 'dark'));
  }
 
  return (
    <RawUIProvider themeType={themeType}>
      <YourComponent onClick={switchThemes} />
    </RawUIProvider>
  )
};

Dark Mode

Raw UI has implemented automatic palette color conversion to support dark mode(50 -> 950, 100 -> 900, ..., 900 -> 100, 950 -> 50), and you can also define the colors for dark mode yourself.

Customizing theme

Customizing a theme is very simple in Raw UI, you just need to provide a new theme object, and all the components will change automatically.

import { RawUIProvider, Theme } from 'raw-ui';
 
const myTheme = Theme.createFromLight({
  type: 'myTheme',
  palette: {
    neutral: {
      50: '#ffffff'
    },
  },
});
 
const App = () => (
  <RawUIProvider themes={[myTheme]} themeType="myTheme">
    <YourAppComponent />
  </RawUIProvider>
);

Function Theme.createFromLight allows you to fork a new theme based on Light Theme, Of course, you can also create a new theme based on the dark style: Theme.createFromDark, Or create a theme based on your own theme:

const myBaseTheme = { ... }
 
const myTheme = Theme.createFromCustom(myBaseTheme, {
  type: 'myTheme',
  palette: {
    neutral: {
      50: '#ffffff'
    },
  },
})

Get types

When you need to know the detailed type definition when modifying the theme, you can refer to the existing type file, which corresponds to project that support TypeScript, you can refer to the type directly in the package:

import {
  RawUITheme,
  RawUIThemePalette,
  RawUIThemeTokens,
  RawUIThemeZIndex
} from 'raw-ui';
 
const myPalette: Partial<RawUIThemePalette> = {
  ...
};
 
const myTokens: Partial<RawUIThemeTokens> = {
  ...
};
 
const myZIndex: Partial<RawUIThemeZIndex> = {
  ...
};
 
const myTheme: RawUITheme = {
  type: 'myTheme',
  palette: myPalette,
  tokens: myTokens,
  zIndex: myZIndex
};

Build components

You can use the preset theme hooks to get the theme states to create your own components.

import { useTheme } from 'raw-ui';
 
const MyComponent = () => {
  const theme = useTheme();
 
  return (
    <div style={{ color: theme.palette.blue['500'] }}>
      <span>hello world!</span>
    </div>
  )
};

Theme APIs

import { Theme } from 'raw-ui';

Theme contains some static methods that are useful when working with custom themes:

• Theme.createFromCustom - create a new theme object.
• Theme.createFromDark - create a new theme object based on Dark Theme.
• Theme.createFromLight - create a new theme object based on Light Theme.
• Theme.isAvailableThemeType - Check if the name of the theme is available.
• Theme.hasUserCustomTheme - Check if a list of themes has a custom.
• Theme.getPresetThemes - Get a default list of themes.
• Theme.getPresetStaticTheme - Get the theme loaded by Raw UI default.