useTheme

This hooks can get the theme states of Bolio UI within any component, and can track changes in states. In the default scenario (you haven't changed the themeType), hooks gets the same value as Themes.getPresets.

Usually the components from Bolio are already added with theme states, you don't need to change it, this hooks just helps you to build your own components using Bolio UI's themes.

Notice in the example below that after we define the component using Theme, the properties of the custom component will change according to the current Bolio UI's theme, switching themes in the upper right corner of the website, the color of the components we create will also change with the theme.

General

APIs

const theme: BolioUIThemes = useTheme()

export type BolioUIThemes = {
  type: string
  font: BolioUIThemesFont
  layout: BolioUIThemesLayout
  palette: BolioUIThemesPalette
  breakpoints: BolioUIThemesBreakpoints
  expressiveness: BolioUIThemesExpressiveness
}

import {
  BolioUIThemes,
  BolioUIThemesFont,
  BolioUIThemesPalette,
  BolioUIThemesExpressiveness,
  BolioUIThemesLayout
} from '@bolio-ui/core'

const myFontTheme: BolioUIThemesFont = {}