Components
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
- screens
- sm
- md
- lg
- xl
- 2xl
- components
- Accordion
- ActionBar
- Autocomplete
- Badge
- BooleanField
- Breadcrumbs
- Button
- Calendar
- Card
- Checkbox
- CloseButton
- Collapsible
- ComboBox
- ContextualHelp
- DateField
- DatePicker
- DateRangePicker
- Dialog
- Divider
- Drawer
- EmptyState
- ErrorState
- Field
- FileField
- Headline
- HelpText
- IconButton
- Input
- Keyboard
- Label
- LegacyTable
- Link
- List
- ListBox
- Loader
- Menu
- Modal
- NumberField
- Page
- Pagination
- Panel
- Popover
- ProgressCircle
- Radio
- RangeCalendar
- SectionMessage
- SegmentedControl
- Select
- SelectList
- Sidebar
- Slider
- Switch
- Table
- Tabs
- Tag
- TagField
- Text
- TextArea
- Toast
- ToggleButton
- Tooltip
- TopNavigation
- Tray
- Underlay
import { List } from '@marigold/components';import { ThemeProvider, useTheme } from '@marigold/system';export default () => { const theme = useTheme(); return ( <ThemeProvider theme={theme}> <div className="w-full overflow-auto"> {Object.entries(theme).map(([key, value]) => ( <List key={key}> <strong>{key}</strong> {Object.keys(value).map(item => ( <List.Item key={crypto.randomUUID()}> {item} <br /> </List.Item> ))} </List> ))} </div> </ThemeProvider> );};Last update: 4 months ago