Themes

@brudi/hui now support Dark Mode. You can switch theme at any time through a very simple API, no third-party styles or configs.

Switch themes

note:

Before using any Components, you must add HuiProvider to the root node.

note:

CssBaseline provides basic CSS support, which is similar to normalize.

Now you can change the theme as follows:

  1. Make sure HuiProvider and CssBaseline are already on the root component.

  2. Get the current theme of the page through hook useTheme.

  3. Update the value of theme.type, and the theme of all components will follow automatically.

import { CssBaseline, HuiProvider } from 'packages/hui/dist/index'

const App = () => {
  const [themeType, setThemeType] = useState('dark')
  const switchThemes = () => {
    setThemeType(lastThemeType => (lastThemeType === 'dark' ? 'light' : 'dark'))
  }
  return (
    <HuiProvider theme={{ type: themeType }}>
      <CssBaseline />
      <YourComponent onClick={switchThemes} />
    </HuiProvider>
  )
}

Customizing theme

Customizing a theme is very simple in @brudi/hui, you just need to provide a new theme Object, and all the components will change automatically. Here is a complete sample project for reference.

Of course, if a component doesn't use your customized variables, it doesn't make any additional changes or rendering.

note:

The more changes you customise, the more Components will Re-Render.

import { CssBaseline, HuiProvider } from 'packages/hui/dist/index'

const myTheme = {
  palette: {
    success: '#000',
  },
}

const App = () => (
  <HuiProvider theme={myTheme}>
    <CssBaseline />
    <YourAppComponent onClick={switchThemes} />
  </HuiProvider>
)

View all types of Theme definitions

If you are using TypeScript, you can import various preset types:

import {
  HuiThemes,
  HuiThemesFont,
  HuiThemesPalette,
  HuiThemesExpressiveness,
  HuiThemesLayout,
} from '@brudi/hui'

// usage:
const myStyles: HuiThemes = {
  /* ... */
}
const myPalette: Partial<HuiThemesPalette> = {
  /* ... */
}

If you don't use TypeScript, to learn more about preset types, see here.

Customizing components

Overriding styles with className

You can override the style by defining a className on the component.

import { Button, Row } from '@brudi/hui'

const MyPage = () => (
  <Row>
    <Button className="page-button">Click me!</Button>
  </Row>
)

// in css file:
.page-button {
  padding: 0;
}

Overriding styles with inline-style

Defining an inline-style will also correctly override the component.

const MyPage = () => (
  <Row>
    <Button style={{ margin: '20px' }}>Click me!</Button>
  </Row>
)

Build your own Components with theme

Sometimes you want to create new components, but you want to be consistent with the current theme. Now you can try using theme variables in your components

import { useTheme } from '@brudi/hui'

const currentTheme = useTheme()

const MyComponent = () => (
  <div style={{ color: currentTheme.palette.success }}>
    <span>hello world!</span>
  </div>
)