useTheme

Hook that applies a theme

The useTheme is a hook that gets you the current theme and all of its attributes and properties.

The useTheme hook returns the current theme, if there isn't a theme it uses the defaultTheme

const theme = useTheme();

Import

To import the hook you just have to use this code below.

import { useTheme } from '@marigold/system';

Examples

Get all the Theme Properties

Here is an example which shows you the chosen theme from the theme switcher on the top of the page. With the useTheme hook you can get the particular values for the available properties.

    name
  • 0
  • 1
  • 2
  • 3
    screens
  • sm
  • md
  • lg
  • xl
  • 2xl
    root
  • variants
    colors
  • brand
  • accent
  • gray
  • white
  • black
  • green
  • yellow
  • red
  • blue
  • text
  • bg
  • border
  • outline
    shadow
  • surface
  • surface-raised
  • surface-overlay
  • surface-sunken
    height
  • component
  • component-sm
  • component-lg
    components
  • Accordion
  • Badge
  • Body
  • Button
  • Calendar
  • Card
  • Checkbox
  • ComboBox
  • DateField
  • DatePicker
  • Dialog
  • Divider
  • Field
  • Footer
  • Header
  • Headline
  • HelpText
  • Image
  • Input
  • Label
  • Link
  • List
  • ListBox
  • Menu
  • Message
  • NumberField
  • Popover
  • Radio
  • Select
  • Slider
  • Switch
  • Table
  • Tabs
  • Tag
  • Text
  • TextArea
  • Tooltip
  • Underlay
  • inputBox
  • inputDisabled
  • inputError
  • inputHeight
  • inputSpacing