ZEIT-UI React

Themes

@zeit-ui/react support Dark Mode now. 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 ZEITUIProvider 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 ZEITUIProvider 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, ZEITUIProvider, useTheme } from '@zeit-ui/react'

const [type, setType] = useState('light')
const currentTheme = useTheme()
const switchThemes = () => () => {
  const nextTheme = currentTheme.type === 'dark' ? 'light' : 'dark'
  setType(nextTheme)
}

const App = () => (
  <ZEITUIProvider theme={{ type }}>
    <CSSBaseline />
      <YourAppComponent onClick={switchThemes}/>
  </ZEITUIProvider>
)

Customizing theme

Customize theme is very simple in @zeit-ui/react, you just need to provide a new theme Object, and all the components will change automatically.

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

note:The more changes you custom, the more Components Re-Render.
import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react'

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

const App = () => (
  <ZEITUIProvider theme={myTheme}>
    <CSSBaseline />
      <YourAppComponent onClick={switchThemes}/>
  </ZEITUIProvider>
)

Customizing components

Overriding styles with className

You can override the style by define any className on the component

import { Button, Row } from '@zeit-ui/react'

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

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

Overriding styles with inline-style

Any inline-style works correctly on 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 '@zeit-ui/react'

const currentTheme = useTheme()

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