Themes

Themes

Lualtek introduces a well-proven theme system which help designers and developer building any digital product.

A theme is a set of predefined key ↔ color combinations to be used whenever possible in order keep consistency, accessibility and dynamicity. These keys are available as css variables and json files and their names are really intuitive.

Available themes

Here you can check the theme keys for all the available themes from Lualtek UI. These themes are shared as library on Figma (opens in a new tab) and as css/json from the components library.

Default theme

Vibrancy colors

  • vibrancy-brightness
    1.35#000001
  • vibrancy-foreground
    oklch(0.19 0.05 289.52)#140f28
  • vibrancy-background
    oklch(1.00 0.00 0 / 30%)#ffffff4d
  • vibrancy-background-soft
    oklch(0.98 0.01 297.73 / 60%)#f9f7ff99
  • vibrancy-background-mid
    oklch(0.95 0.01 290.75 / 60%)#eeedf599
  • vibrancy-background-hard
    oklch(0.85 0.03 294.08 / 60%)#cecae099
  • vibrancy-background-red
    oklch(0.64 0.21 25.33 / 10%)#f144441a
  • vibrancy-background-green
    oklch(0.77 0.15 163.22 / 10%)#39d1991a
  • vibrancy-background-yellow
    oklch(0.77 0.16 70.08 / 10%)#f49f1e1a
  • vibrancy-background-brand
    oklch(0.54 0.26 277.38 / 10%)#5746ff1a

Cta colors

  • cta-default
    oklch(0.54 0.26 277.38)#5746ff
  • cta-dark
    oklch(0.47 0.24 275.75)#4334dc
  • cta-foreground
    oklch(1.00 0.00 0)#ffffff

Dimmed colors

  • dimmed-0
    oklch(0.98 0.01 297.73)#f9f7ff
  • dimmed-1
    oklch(0.95 0.01 290.75)#eeedf5
  • dimmed-2
    oklch(0.92 0.02 292.59)#e5e2f1
  • dimmed-3
    oklch(0.85 0.03 294.08)#cecae0
  • dimmed-4
    oklch(0.68 0.05 292.59)#9993b5
  • dimmed-5
    oklch(0.52 0.06 292.39)#6a6389
  • dimmed-6
    oklch(0.42 0.06 291.87)#4e476b
  • dimmed-7
    oklch(0.34 0.06 291.07)#383255
  • dimmed-8
    oklch(0.25 0.06 288.55)#211c3c

Global colors

  • global-foreground
    oklch(0.42 0.06 291.87)#4e476b
  • global-background
    oklch(1.00 0.00 0)#ffffff
  • global-interactive-text
    oklch(0.54 0.26 277.38)#5746ff
  • global-interactive-text-hover
    oklch(0.60 0.23 281.07)#7063ff
  • global-disabled-foreground
    oklch(0.52 0.06 292.39 / 60%)#6a638999
  • global-disabled-background
    oklch(0.92 0.02 292.59 / 60%)#e5e2f199
  • global-inner-contrast-border
    oklch(1.00 0.00 0 / 15%)#ffffff26
  • global-outer-contrast-border
    oklch(0.25 0.06 288.55 / 15%)#211c3c26

Gradient colors

  • gradient-brand-start
    oklch(0.54 0.26 277.38)#5746ff
  • gradient-brand-end
    oklch(0.47 0.24 275.75)#4334dc
  • gradient-primary-start
    oklch(0.25 0.06 288.55)#211c3c
  • gradient-primary-end
    oklch(0.21 0.06 288.47)#181232
  • gradient-cyan-start
    oklch(0.87 0.12 207.08)#62eafc
  • gradient-cyan-end
    oklch(0.61 0.11 221.72)#0e91b2
  • gradient-dawn-start
    oklch(0.71 0.13 215.22)#00b4d2
  • gradient-dawn-end
    oklch(0.72 0.18 305.50)#c083fd
  • gradient-mono-start
    oklch(0.46 0.00 0)#585858
  • gradient-mono-end
    oklch(0.23 0.00 0)#1d1d1d

Highlight colors

  • highlight-brand-background
    oklch(0.93 0.04 291.00)#e7e4ff
  • highlight-brand-foreground
    oklch(0.54 0.26 277.38)#5746ff
  • highlight-primary-background
    oklch(0.95 0.01 290.75)#eeedf5
  • highlight-primary-foreground
    oklch(0.42 0.06 291.87)#4e476b
  • highlight-gray-background
    oklch(0.93 0.00 0)#e8e8e8
  • highlight-gray-foreground
    oklch(0.46 0.00 0)#585858
  • highlight-slate-background
    oklch(0.93 0.01 255.51)#e4e8ef
  • highlight-slate-foreground
    oklch(0.45 0.04 257.28)#47566c
  • highlight-yellow-background
    oklch(0.95 0.07 95.49)#fdefba
  • highlight-yellow-foreground
    oklch(0.66 0.15 65.27)#ce7c00
  • highlight-green-background
    oklch(0.95 0.05 163.05)#d1fae5
  • highlight-green-foreground
    oklch(0.51 0.10 165.61)#157858
  • highlight-blue-background
    oklch(0.93 0.03 255.59)#dbe9fc
  • highlight-blue-foreground
    oklch(0.55 0.22 262.88)#2463ef
  • highlight-red-background
    oklch(0.91 0.04 17.96)#fbd7d7
  • highlight-red-foreground
    oklch(0.64 0.21 25.33)#f14444
  • highlight-cyan-background
    oklch(0.96 0.04 203.39)#d4fafe
  • highlight-cyan-foreground
    oklch(0.61 0.11 221.72)#0e91b2
  • highlight-purple-background
    oklch(0.93 0.04 307.25)#efe1fd
  • highlight-purple-foreground
    oklch(0.56 0.25 302.32)#9336ea
  • highlight-indigo-background
    oklch(0.94 0.02 272.82)#e6ebf9
  • highlight-indigo-foreground
    oklch(0.50 0.19 272.11)#4251cd
  • highlight-dipsy-background
    oklch(0.96 0.08 114.13)#f0f9bb
  • highlight-dipsy-foreground
    oklch(0.56 0.16 134.08)#498702
  • highlight-salmon-background
    oklch(0.94 0.02 38.33)#f8e7e2
  • highlight-salmon-foreground
    oklch(0.56 0.16 37.84)#bf4922
  • highlight-magenta-background
    oklch(0.95 0.03 337.96)#fde7f6
  • highlight-magenta-foreground
    oklch(0.49 0.20 357.43)#af0061
Pro theme

Vibrancy colors

  • vibrancy-brightness
    1.35#000001
  • vibrancy-foreground
    oklch(0.20 0.00 0)#161616
  • vibrancy-background
    oklch(1.00 0.00 0 / 30%)#ffffff4d
  • vibrancy-background-soft
    oklch(0.99 0.00 0 / 60%)#fcfcfc99
  • vibrancy-background-mid
    oklch(0.96 0.00 0 / 60%)#f2f2f299
  • vibrancy-background-hard
    oklch(0.88 0.00 0 / 60%)#d7d7d799
  • vibrancy-background-red
    oklch(0.64 0.21 25.33 / 10%)#f144441a
  • vibrancy-background-green
    oklch(0.77 0.15 163.22 / 10%)#39d1991a
  • vibrancy-background-yellow
    oklch(0.77 0.16 70.08 / 10%)#f49f1e1a
  • vibrancy-background-brand
    oklch(0.54 0.26 277.38 / 10%)#5746ff1a

Cta colors

  • cta-default
    oklch(0.54 0.26 277.38)#5746ff
  • cta-dark
    oklch(0.47 0.24 275.75)#4334dc
  • cta-foreground
    oklch(1.00 0.00 0)#ffffff

Dimmed colors

  • dimmed-0
    oklch(0.99 0.00 0)#fcfcfc
  • dimmed-1
    oklch(0.96 0.00 0)#f2f2f2
  • dimmed-2
    oklch(0.93 0.00 0)#e8e8e8
  • dimmed-3
    oklch(0.88 0.00 0)#d7d7d7
  • dimmed-4
    oklch(0.73 0.00 0)#a8a8a8
  • dimmed-5
    oklch(0.57 0.00 0)#777777
  • dimmed-6
    oklch(0.46 0.00 0)#585858
  • dimmed-7
    oklch(0.39 0.00 0)#454545
  • dimmed-8
    oklch(0.30 0.00 0)#2e2e2e

Global colors

  • global-foreground
    oklch(0.46 0.00 0)#585858
  • global-background
    oklch(1.00 0.00 0)#ffffff
  • global-interactive-text
    oklch(0.54 0.26 277.38)#5746ff
  • global-interactive-text-hover
    oklch(0.60 0.23 281.07)#7063ff
  • global-disabled-foreground
    oklch(0.57 0.00 0 / 60%)#77777799
  • global-disabled-background
    oklch(0.93 0.00 0 / 60%)#e8e8e899
  • global-inner-contrast-border
    oklch(1.00 0.00 0 / 15%)#ffffff26
  • global-outer-contrast-border
    oklch(0.30 0.00 0 / 15%)#2e2e2e26

Gradient colors

  • gradient-brand-start
    oklch(0.54 0.26 277.38)#5746ff
  • gradient-brand-end
    oklch(0.47 0.24 275.75)#4334dc
  • gradient-primary-start
    oklch(0.25 0.06 288.55)#211c3c
  • gradient-primary-end
    oklch(0.21 0.06 288.47)#181232
  • gradient-cyan-start
    oklch(0.87 0.12 207.08)#62eafc
  • gradient-cyan-end
    oklch(0.61 0.11 221.72)#0e91b2
  • gradient-dawn-start
    oklch(0.71 0.13 215.22)#00b4d2
  • gradient-dawn-end
    oklch(0.72 0.18 305.50)#c083fd
  • gradient-mono-start
    oklch(0.46 0.00 0)#585858
  • gradient-mono-end
    oklch(0.23 0.00 0)#1d1d1d

Highlight colors

  • highlight-brand-background
    oklch(0.93 0.04 291.00)#e7e4ff
  • highlight-brand-foreground
    oklch(0.54 0.26 277.38)#5746ff
  • highlight-primary-background
    oklch(0.95 0.01 290.75)#eeedf5
  • highlight-primary-foreground
    oklch(0.42 0.06 291.87)#4e476b
  • highlight-gray-background
    oklch(0.93 0.00 0)#e8e8e8
  • highlight-gray-foreground
    oklch(0.46 0.00 0)#585858
  • highlight-slate-background
    oklch(0.93 0.01 255.51)#e4e8ef
  • highlight-slate-foreground
    oklch(0.45 0.04 257.28)#47566c
  • highlight-yellow-background
    oklch(0.95 0.07 95.49)#fdefba
  • highlight-yellow-foreground
    oklch(0.66 0.15 65.27)#ce7c00
  • highlight-green-background
    oklch(0.95 0.05 163.05)#d1fae5
  • highlight-green-foreground
    oklch(0.51 0.10 165.61)#157858
  • highlight-blue-background
    oklch(0.93 0.03 255.59)#dbe9fc
  • highlight-blue-foreground
    oklch(0.55 0.22 262.88)#2463ef
  • highlight-red-background
    oklch(0.91 0.04 17.96)#fbd7d7
  • highlight-red-foreground
    oklch(0.64 0.21 25.33)#f14444
  • highlight-cyan-background
    oklch(0.96 0.04 203.39)#d4fafe
  • highlight-cyan-foreground
    oklch(0.61 0.11 221.72)#0e91b2
  • highlight-purple-background
    oklch(0.93 0.04 307.25)#efe1fd
  • highlight-purple-foreground
    oklch(0.56 0.25 302.32)#9336ea
  • highlight-indigo-background
    oklch(0.94 0.02 272.82)#e6ebf9
  • highlight-indigo-foreground
    oklch(0.50 0.19 272.11)#4251cd
  • highlight-dipsy-background
    oklch(0.96 0.08 114.13)#f0f9bb
  • highlight-dipsy-foreground
    oklch(0.56 0.16 134.08)#498702
  • highlight-salmon-background
    oklch(0.94 0.02 38.33)#f8e7e2
  • highlight-salmon-foreground
    oklch(0.56 0.16 37.84)#bf4922
  • highlight-magenta-background
    oklch(0.95 0.03 337.96)#fde7f6
  • highlight-magenta-foreground
    oklch(0.49 0.20 357.43)#af0061