Skip to Content
Theming

Theming

Theming is token-driven and shared across web and native packages.

Available token themes

Total themes: 23

  • default
  • emerald
  • sapphire
  • rose
  • amber
  • violet
  • teal
  • slate
  • zinc
  • stone
  • indigo
  • cyan
  • lime
  • orange
  • pink
  • crimson
  • forest
  • ocean
  • sunset
  • lavender
  • neon
  • midnight
  • mocha

Theme color previews

default
light bg
light primary
light accent
dark bg
dark primary
dark accent
emerald
light bg
light primary
light accent
dark bg
dark primary
dark accent
sapphire
light bg
light primary
light accent
dark bg
dark primary
dark accent
rose
light bg
light primary
light accent
dark bg
dark primary
dark accent
amber
light bg
light primary
light accent
dark bg
dark primary
dark accent
violet
light bg
light primary
light accent
dark bg
dark primary
dark accent
teal
light bg
light primary
light accent
dark bg
dark primary
dark accent
slate
light bg
light primary
light accent
dark bg
dark primary
dark accent
zinc
light bg
light primary
light accent
dark bg
dark primary
dark accent
stone
light bg
light primary
light accent
dark bg
dark primary
dark accent
indigo
light bg
light primary
light accent
dark bg
dark primary
dark accent
cyan
light bg
light primary
light accent
dark bg
dark primary
dark accent
lime
light bg
light primary
light accent
dark bg
dark primary
dark accent
orange
light bg
light primary
light accent
dark bg
dark primary
dark accent
pink
light bg
light primary
light accent
dark bg
dark primary
dark accent
crimson
light bg
light primary
light accent
dark bg
dark primary
dark accent
forest
light bg
light primary
light accent
dark bg
dark primary
dark accent
ocean
light bg
light primary
light accent
dark bg
dark primary
dark accent
sunset
light bg
light primary
light accent
dark bg
dark primary
dark accent
lavender
light bg
light primary
light accent
dark bg
dark primary
dark accent
neon
light bg
light primary
light accent
dark bg
dark primary
dark accent
midnight
light bg
light primary
light accent
dark bg
dark primary
dark accent
mocha
light bg
light primary
light accent
dark bg
dark primary
dark accent

Platform behavior

The same token theme names are intended to be used across both platforms:

  • Web: apply a matching theme strategy in your app styling layer.
  • Native: resolve tokens via getThemeColors(themeName, mode).

Tokens usage

import { getThemeColors } from '@tesserix/tokens/colors'
 
const light = getThemeColors('default', 'light')
const dark = getThemeColors('default', 'dark')

Web setup

import '@tesserix/web/themes/default'
import '@tesserix/web/styles'

Native setup

import { getThemeColors, oklchToRgba } from '@tesserix/tokens/colors'
WishlistButton