useTheme()

function useTheme<T>(fragment?): ThemeValues<T>;

Reads a specific Reactor theme fragment and refreshes when the selected theme changes. The fragment argument keeps the result type-safe for module supplied theme fragments.

Type Parameters

Type Parameter

Default type

T extends ThemeFragment<ThemeFragmentStructure>

ThemeFragment<{ button: { colors: { background: string; border: string; color: string; colorHover: string; icon: string; }; label: string; }; buttonLink: { colors: { background: string; border: string; color: string; colorHover: string; icon: string; }; label: string; }; buttonPrimary: { colors: { background: string; border: string; color: string; colorHover: string; icon: string; }; label: string; }; canvas: { colors: { background: string; grid: string; }; label: string; }; cards: { colors: { foreground: string; tagBackground: string; tagLabelBackground: string; tagLabelForeground: string; }; label: string; }; changelog: { colors: { codeBackground: string; codeForeground: string; }; label: string; }; combobox: { colors: { background: string; backgroundSelected: string; border: string; headerBackground: string; headerForeground: string; shadowColor: string; text: string; textSelected: string; }; label: string; }; dnd: { colors: { hintColor: string; hoverColor: string; }; label: string; }; floating: { colors: { background: string; backgroundInactive: string; border: string; shadowColor: string; }; label: string; }; footer: { colors: { background: string; }; label: string; }; forms: { colors: { checkbox: string; checkboxChecked: string; description: string; groupBorder: string; groupLabelForeground: string; inputBackground: string; inputBorder: string; inputForeground: string; toggleHandleColor: string; toggleOnColor: string; }; label: string; }; graphs: { colors: { fillStop1: string; fillStop2: string; fillStop3: string; grid: string; line: string; thresholdLine: string; }; label: string; }; guide: { colors: { accent: string; accentText: string; tooltipBackground: string; }; label: string; }; header: { colors: { background: string; backgroundLogo: string; backgroundLogoHover: string; foreground: string; primary: string; secondary: string; }; label: string; }; icons: { colors: { color: string; dualIconBackground: string; }; label: string; }; meta: { colors: { background: string; foreground: string; }; label: string; }; mobileNavigation: { colors: { background: string; border: string; foreground: string; selectedBackground: string; selectedForeground: string; }; label: string; }; panels: { colors: { background: string; divider: string; iconBackground: string; itemIconColorSelected: string; scrollBar: string; searchBackground: string; searchForeground: string; tabBackgroundSelected: string; tabForeground: string; tabForegroundSelected: string; titleBackground: string; titleForeground: string; trayBackground: string; trayButton: string; trayButtonSelected: string; }; label: string; }; status: { colors: { failed: string; failedForeground: string; loading: string; success: string; }; label: string; }; surfaces: { colors: { depth0Background: string; depth0Border: string; depth1Background: string; depth1Border: string; depth2Background: string; depth2Border: string; depth3Background: string; depth3Border: string; selectedBorder: string; }; label: string; }; table: { colors: { border: string; columnBackground: string; columnForeground: string; even: string; groupBackground: string; groupBorder: string; odd: string; pills: string; pillsSpecial: string; selectedEven: string; selectedOdd: string; text: string; }; label: string; }; tabs: { colors: { selectedAccentSingle: string; selectedBackground: string; }; label: string; }; text: { colors: { primary: string; secondary: string; }; label: string; }; tooltips: { colors: { background: string; }; label: string; }; trees: { colors: { labelColor: string; overflowBackground: string; selectedBackground: string; }; label: string; }; workspace: { colors: { background: string; overlayBackground: string; overlayBackgroundHover: string; overlayBorder: string; overlayBorderHover: string; overlayDividerColor: string; overlayDividerHover: string; }; label: string; }; workspaceSubMenu: { colors: { background: string; backgroundUnPinned: string; foreground: string; }; label: string; }; }>

Parameters

Parameter	Type
fragment?	T

Returns

ThemeValues<T>