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.




const theme: UIThemes = useTheme()

export type UIThemes = {
  type: string
  font: UIThemesFont
  palette: UIThemesPalette
  breakpoints: UIThemesBreakpoints
  expressiveness: UIThemesExpressiveness

Get preset types

import { UIThemes, UIThemesFont, UIThemesPalette, UIThemesExpressiveness } from 'himalaya'

const myFontTheme: UIThemesFont = {}