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.