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.
Preview
Code
- 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