useTheme

This hooks can get the theme states of Geist 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 Geist are already added with theme states, you don't need to change it, this hooks just helps you to build your own components using Geist'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 Geist'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: GeistUIThemes = useTheme()

export type GeistUIThemes = {
  type: string
  font: GeistUIThemesFont
  layout: GeistUIThemesLayout
  palette: GeistUIThemesPalette
  breakpoints: GeistUIThemesBreakpoints
  expressiveness: GeistUIThemesExpressiveness
}

import {
  GeistUIThemes,
  GeistUIThemesFont,
  GeistUIThemesPalette,
  GeistUIThemesExpressiveness,
  GeistUIThemesLayout,
} from '@geist-ui/core'

const myFontTheme: GeistUIThemesFont = { }