@brudi/hui
now support Dark Mode. You can switch theme at any time through a very simple API, no third-party styles or configs.
Before using any Components, you must add HuiProvider
to the root node.
CssBaseline
provides basic CSS support, which is similar to normalize
.
Now you can change the theme as follows:
Make sure HuiProvider
and CssBaseline
are already on the root component.
Get the current theme of the page through hook useTheme
.
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 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.
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>
)
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.
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;
}
inline-style
Defining an inline-style
will also correctly override the component.
const MyPage = () => (
<Row>
<Button style={{ margin: '20px' }}>Click me!</Button>
</Row>
)
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>
)