UseThemeReturn

Defined in: src/hooks/useTheme/useTheme.types.ts:38

Properties

getToken

getToken: (path) => string

Defined in: src/hooks/useTheme/useTheme.types.ts:52

Resolve a single token to its current CSS-var value, e.g. '#007acc'.

Falls back to the dark-theme default when the underlying CSS variable is unset or when no DOM is available (SSR). Returns an empty string only for paths that don’t resolve to a leaf in the theme contract. Repeated calls for the same path are cached for the life of the hook instance.

Parameters

path

string

Returns

string

---

getVar

getVar: (path) => string

Defined in: src/hooks/useTheme/useTheme.types.ts:62

Get the var(--etui-...) reference for a token, e.g. 'var(--etui-color-accent-primary)'. Useful for inline styles that must follow theme changes automatically.

SSR-safe — the returned string is constructed from the contract and works identically in browser and server rendering. Returns an empty string only for paths that don’t resolve to a leaf in the contract.

Parameters

path

string

Returns

string

---

values

values: object

Defined in: src/hooks/useTheme/useTheme.types.ts:42

Resolved theme values — CSS variable values read from :root.

borderRadius

borderRadius: object

borderRadius.lg

lg: string = '6px'

borderRadius.md

md: string = '4px'

borderRadius.none

none: string = '0px'

borderRadius.sm

sm: string = '2px'

colors

colors: object

colors.accent

accent: object

colors.accent.error

error: string = '#f44336'

colors.accent.primary

primary: string = '#007acc'

colors.accent.secondary

secondary: string = '#005a9e'

colors.accent.success

success: string = '#4caf50'

colors.accent.warning

warning: string = '#ff9800'

colors.backdrop

backdrop: string = 'rgba(0, 0, 0, 0.6)'

colors.background

background: object

colors.background.elevated

elevated: string = '#404040'

colors.background.inset

inset: string = 'rgba(0, 0, 0, 0.2)'

colors.background.primary

primary: string = '#1a1a1a'

colors.background.secondary

secondary: string = '#2d2d2d'

colors.background.tertiary

tertiary: string = '#3a3a3a'

colors.border

border: object

colors.border.default

default: string = '#4a4a4a'

colors.border.error

error: string = '#f44336'

colors.border.focus

focus: string = '#007acc'

colors.border.success

success: string = '#4caf50'

colors.surface

surface: object

colors.surface.active

active: string = '#404040'

colors.surface.default

default: string = '#2d2d2d'

colors.surface.disabled

disabled: string = '#1f1f1f'

colors.surface.hover

hover: string = '#363636'

colors.surface.row

row: string = 'transparent'

colors.surface.rowHover

rowHover: string = 'rgba(255, 255, 255, 0.03)'

colors.surface.whiteOverlay

whiteOverlay: string = 'rgba(255, 255, 255, 0.1)'

colors.text

text: object

colors.text.disabled

disabled: string = '#555555'

colors.text.muted

muted: string = '#888888'

colors.text.primary

primary: string = '#ffffff'

colors.text.secondary

secondary: string = '#cccccc'

demo

demo: object

demo.canvas

canvas: object

demo.canvas.gradientEnd

gradientEnd: string = '#091010'

demo.canvas.gradientMid

gradientMid: string = '#031a1a'

demo.canvas.gradientStart

gradientStart: string = '#061f21'

shadows

shadows: object

shadows.focus

focus: string = '0 0 0 2px rgba(0, 122, 204, 0.4)'

shadows.lg

lg: string = '0 4px 8px rgba(0, 0, 0, 0.4)'

shadows.md

md: string = '0 2px 4px rgba(0, 0, 0, 0.3)'

shadows.separatorBottom

separatorBottom: string = '0 1px 2px rgba(0, 0, 0, 0.18)'

shadows.separatorLeft

separatorLeft: string = '-1px 0 2px rgba(0, 0, 0, 0.18)'

shadows.separatorRight

separatorRight: string = '1px 0 2px rgba(0, 0, 0, 0.18)'

shadows.sm

sm: string = '0 1px 2px rgba(0, 0, 0, 0.2)'

shadows.thumb

thumb: string = '0 0 2px rgba(0, 0, 0, 0.5)'

shadows.xl

xl: string = '0 8px 16px rgba(0, 0, 0, 0.5)'

shell

shell: object

shell.dock

dock: object

shell.dock.borderBarBg

borderBarBg: string = '#2d2d2d'

shell.dock.borderBarSize

borderBarSize: string = '28px'

shell.dock.dropOverlay

dropOverlay: string = 'rgba(0, 122, 204, 0.2)'

shell.dock.splitterColor

splitterColor: string = '#4a4a4a'

shell.dock.splitterHoverColor

splitterHoverColor: string = '#007acc'

shell.dock.splitterSize

splitterSize: string = '4px'

shell.dock.tabActiveBg

tabActiveBg: string = '#1a1a1a'

shell.dock.tabActiveText

tabActiveText: string = '#ffffff'

shell.dock.tabBg

tabBg: string = '#2d2d2d'

shell.dock.tabHeight

tabHeight: string = '28px'

shell.dock.tabHoverBg

tabHoverBg: string = '#363636'

shell.dock.tabText

tabText: string = '#cccccc'

shell.menuBar

menuBar: object

shell.menuBar.activeBg

activeBg: string = '#005a9e'

shell.menuBar.bg

bg: string = '#2d2d2d'

shell.menuBar.height

height: string = '28px'

shell.menuBar.hoverBg

hoverBg: string = '#363636'

shell.menuBar.shortcutText

shortcutText: string = '#888888'

shell.menuBar.text

text: string = '#ffffff'

shell.statusBar

statusBar: object

shell.statusBar.bg

bg: string = '#007acc'

shell.statusBar.height

height: string = '22px'

shell.statusBar.heightMd

heightMd: string = '26px'

shell.statusBar.text

text: string = '#ffffff'

shell.toolbar

toolbar: object

shell.toolbar.bg

bg: string = '#2d2d2d'

shell.toolbar.height

height: object

shell.toolbar.height.md

md: string = '40px'

shell.toolbar.height.sm

sm: string = '32px'

shell.toolbar.separator

separator: string = '#4a4a4a'

spacing

spacing: object

spacing.lg

lg: string = '12px'

spacing.md

md: string = '8px'

spacing.sm

sm: string = '4px'

spacing.xl

xl: string = '16px'

spacing.xs

xs: string = '2px'

spacing.xxl

xxl: string = '24px'

spacing.xxxl

xxxl: string = '32px'

transitions

transitions: object

transitions.fast

fast: string = '100ms ease-out'

transitions.normal

normal: string = '200ms ease-out'

transitions.slow

slow: string = '300ms ease-out'

typography

typography: object

typography.fontFamily

fontFamily: object

typography.fontFamily.mono

mono: string = 'SF Mono, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'

typography.fontFamily.sans

sans: string = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'

typography.fontSize

fontSize: object

typography.fontSize.lg

lg: string = '14px'

typography.fontSize.md

md: string = '12px'

typography.fontSize.sm

sm: string = '11px'

typography.fontSize.xl

xl: string = '16px'

typography.fontSize.xs

xs: string = '10px'

typography.fontSize.xxs

xxs: string = '9px'

typography.fontWeight

fontWeight: object

typography.fontWeight.medium

medium: string = '500'

typography.fontWeight.normal

normal: string = '400'

typography.fontWeight.semibold

semibold: string = '600'

typography.lineHeight

lineHeight: object

typography.lineHeight.normal

normal: string = '1.4'

typography.lineHeight.relaxed

relaxed: string = '1.6'

typography.lineHeight.tight

tight: string = '1.2'

zIndex

zIndex: object

zIndex.base

base: string = '1'

zIndex.dropdown

dropdown: string = '1000'

zIndex.modal

modal: string = '1100'

zIndex.popover

popover: string = '1000'

zIndex.tooltip

tooltip: string = '1000'

---

variant

variant: ThemeVariant

Defined in: src/hooks/useTheme/useTheme.types.ts:40

Current root-theme variant. See ThemeVariant for detection rules.