Marigold
Getting StartedFoundationsComponentsPatternsReleases
Discover new Tutorials!

Components

Overview

Application

MarigoldProvider
RouterProvider

Layout

Aside
Aspect
Breakout
Center
Columns
Container
Grid
Inline
updated
Inset
Scrollable
Split
Stack
Tiles

Form

Autocomplete
updated
Button
updated
Calendar
Checkbox
updated
ComboBox
updated
DateField
DatePicker
Form
Multiselect
NumberField
Radio
updated
SearchField
Select
Slider
updated
Switch
TextArea
updated
TextField
TimeField

Collection

SelectList
Table
updated
Tag

Navigation

Accordion
Breadcrumbs
beta
Pagination
Tabs

Overlay

ContextualHelp
Dialog
Menu
Toast
beta
Tooltip

Content

Badge
Card
Divider
Headline
Icon
Link
List
SectionMessage
SVG
Text
VisuallyHidden
XLoader

Formatters

DateFormat
updated
NumericFormat
updated

Hooks and Utils

cn
cva
extendTheme
useAsyncListData
useListData
useResponsiveValue
useTheme

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
    components
  • Accordion
  • Badge
  • Breadcrumbs
  • Button
  • Calendar
  • Card
  • Checkbox
  • CloseButton
  • Collapsible
  • ComboBox
  • ContextualHelp
  • DateField
  • DatePicker
  • Dialog
  • Divider
  • Drawer
  • Field
  • Headline
  • HelpText
  • IconButton
  • Input
  • Label
  • Link
  • List
  • ListBox
  • Menu
  • Modal
  • MultiSelect
  • NumberField
  • Pagination
  • Popover
  • ProgressCycle
  • Radio
  • SectionMessage
  • Select
  • Slider
  • Switch
  • Table
  • Tabs
  • Tag
  • Text
  • TextArea
  • Toast
  • Tooltip
  • Underlay
  • XLoader
Last update: April 30, 2024
Build with 🥵, 🧡 and
v15.2.0