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-brightness1.35#000001
- vibrancy-foregroundoklch(0.19 0.05 289.52)#140f28
- vibrancy-backgroundoklch(1.00 0.00 0 / 30%)#ffffff4d
- vibrancy-background-softoklch(0.98 0.01 297.73 / 60%)#f9f7ff99
- vibrancy-background-midoklch(0.95 0.01 290.75 / 60%)#eeedf599
- vibrancy-background-hardoklch(0.85 0.03 294.08 / 60%)#cecae099
- vibrancy-background-redoklch(0.64 0.21 25.33 / 10%)#f144441a
- vibrancy-background-greenoklch(0.77 0.15 163.22 / 10%)#39d1991a
- vibrancy-background-yellowoklch(0.77 0.16 70.08 / 10%)#f49f1e1a
- vibrancy-background-brandoklch(0.54 0.26 277.38 / 10%)#5746ff1a
Cta colors
- cta-defaultoklch(0.54 0.26 277.38)#5746ff
- cta-darkoklch(0.47 0.24 275.75)#4334dc
- cta-foregroundoklch(1.00 0.00 0)#ffffff
Dimmed colors
- dimmed-0oklch(0.98 0.01 297.73)#f9f7ff
- dimmed-1oklch(0.95 0.01 290.75)#eeedf5
- dimmed-2oklch(0.92 0.02 292.59)#e5e2f1
- dimmed-3oklch(0.85 0.03 294.08)#cecae0
- dimmed-4oklch(0.68 0.05 292.59)#9993b5
- dimmed-5oklch(0.52 0.06 292.39)#6a6389
- dimmed-6oklch(0.42 0.06 291.87)#4e476b
- dimmed-7oklch(0.34 0.06 291.07)#383255
- dimmed-8oklch(0.25 0.06 288.55)#211c3c
Global colors
- global-foregroundoklch(0.42 0.06 291.87)#4e476b
- global-backgroundoklch(1.00 0.00 0)#ffffff
- global-interactive-textoklch(0.54 0.26 277.38)#5746ff
- global-interactive-text-hoveroklch(0.60 0.23 281.07)#7063ff
- global-disabled-foregroundoklch(0.52 0.06 292.39 / 60%)#6a638999
- global-disabled-backgroundoklch(0.92 0.02 292.59 / 60%)#e5e2f199
- global-inner-contrast-borderoklch(1.00 0.00 0 / 15%)#ffffff26
- global-outer-contrast-borderoklch(0.25 0.06 288.55 / 15%)#211c3c26
Gradient colors
- gradient-brand-startoklch(0.54 0.26 277.38)#5746ff
- gradient-brand-endoklch(0.47 0.24 275.75)#4334dc
- gradient-primary-startoklch(0.25 0.06 288.55)#211c3c
- gradient-primary-endoklch(0.21 0.06 288.47)#181232
- gradient-cyan-startoklch(0.87 0.12 207.08)#62eafc
- gradient-cyan-endoklch(0.61 0.11 221.72)#0e91b2
- gradient-dawn-startoklch(0.71 0.13 215.22)#00b4d2
- gradient-dawn-endoklch(0.72 0.18 305.50)#c083fd
- gradient-mono-startoklch(0.43 0.00 0)#505050
- gradient-mono-endoklch(0.18 0.00 0)#121212
Highlight colors
- highlight-brand-backgroundoklch(0.93 0.04 291.00)#e7e4ff
- highlight-brand-foregroundoklch(0.54 0.26 277.38)#5746ff
- highlight-primary-backgroundoklch(0.95 0.01 290.75)#eeedf5
- highlight-primary-foregroundoklch(0.42 0.06 291.87)#4e476b
- highlight-gray-backgroundoklch(0.93 0.00 0)#e8e8e8
- highlight-gray-foregroundoklch(0.43 0.00 0)#505050
- highlight-slate-backgroundoklch(0.93 0.01 255.51)#e4e8ef
- highlight-slate-foregroundoklch(0.45 0.04 257.28)#47566c
- highlight-yellow-backgroundoklch(0.95 0.07 95.49)#fdefba
- highlight-yellow-foregroundoklch(0.66 0.15 65.27)#ce7c00
- highlight-green-backgroundoklch(0.95 0.05 163.05)#d1fae5
- highlight-green-foregroundoklch(0.51 0.10 165.61)#157858
- highlight-blue-backgroundoklch(0.93 0.03 255.59)#dbe9fc
- highlight-blue-foregroundoklch(0.60 0.16 259.50)#417dde
- highlight-red-backgroundoklch(0.95 0.03 17.61)#ffe8e8
- highlight-red-foregroundoklch(0.64 0.21 25.33)#f14444
- highlight-cyan-backgroundoklch(0.96 0.04 203.39)#d4fafe
- highlight-cyan-foregroundoklch(0.61 0.11 221.72)#0e91b2
- highlight-purple-backgroundoklch(0.93 0.04 307.25)#efe1fd
- highlight-purple-foregroundoklch(0.56 0.25 302.32)#9336ea
- highlight-indigo-backgroundoklch(0.94 0.03 281.31)#e7e9ff
- highlight-indigo-foregroundoklch(0.48 0.20 277.79)#4a44ca
- highlight-dipsy-backgroundoklch(0.96 0.08 114.13)#f0f9bb
- highlight-dipsy-foregroundoklch(0.56 0.16 134.08)#498702
- highlight-salmon-backgroundoklch(0.94 0.02 38.33)#f8e7e2
- highlight-salmon-foregroundoklch(0.56 0.16 37.84)#bf4922
- highlight-magenta-backgroundoklch(0.95 0.03 337.96)#fde7f6
- highlight-magenta-foregroundoklch(0.49 0.20 357.43)#af0061
Pro theme
Vibrancy colors
- vibrancy-brightness1.35#000001
- vibrancy-foregroundoklch(0.16 0.00 0)#0d0d0d
- vibrancy-backgroundoklch(1.00 0.00 0 / 30%)#ffffff4d
- vibrancy-background-softoklch(0.99 0.00 0 / 60%)#fcfcfc99
- vibrancy-background-midoklch(0.97 0.00 0 / 70%)#f5f5f5b3
- vibrancy-background-hardoklch(0.93 0.00 0 / 60%)#e8e8e899
- vibrancy-background-redoklch(0.64 0.21 25.33 / 10%)#f144441a
- vibrancy-background-greenoklch(0.77 0.15 163.22 / 10%)#39d1991a
- vibrancy-background-yellowoklch(0.77 0.16 70.08 / 10%)#f49f1e1a
- vibrancy-background-brandoklch(0.54 0.26 277.38 / 10%)#5746ff1a
Cta colors
- cta-defaultoklch(0.54 0.26 277.38)#5746ff
- cta-darkoklch(0.47 0.24 275.75)#4334dc
- cta-foregroundoklch(1.00 0.00 0)#ffffff
Dimmed colors
- dimmed-0oklch(0.99 0.00 0)#fcfcfc
- dimmed-1oklch(0.97 0.00 0)#f5f5f5
- dimmed-2oklch(0.93 0.00 0)#e8e8e8
- dimmed-3oklch(0.85 0.00 0)#cecece
- dimmed-4oklch(0.69 0.00 0)#9b9b9b
- dimmed-5oklch(0.53 0.00 0)#6c6c6c
- dimmed-6oklch(0.43 0.00 0)#505050
- dimmed-7oklch(0.35 0.00 0)#3a3a3a
- dimmed-8oklch(0.25 0.00 0)#222222
Global colors
- global-foregroundoklch(0.43 0.00 0)#505050
- global-backgroundoklch(1.00 0.00 0)#ffffff
- global-interactive-textoklch(0.54 0.26 277.38)#5746ff
- global-interactive-text-hoveroklch(0.60 0.23 281.07)#7063ff
- global-disabled-foregroundoklch(0.53 0.00 0 / 60%)#6c6c6c99
- global-disabled-backgroundoklch(0.93 0.00 0 / 60%)#e8e8e899
- global-inner-contrast-borderoklch(1.00 0.00 0 / 15%)#ffffff26
- global-outer-contrast-borderoklch(0.25 0.00 0 / 15%)#22222226
Gradient colors
- gradient-brand-startoklch(0.54 0.26 277.38)#5746ff
- gradient-brand-endoklch(0.47 0.24 275.75)#4334dc
- gradient-primary-startoklch(0.25 0.06 288.55)#211c3c
- gradient-primary-endoklch(0.21 0.06 288.47)#181232
- gradient-cyan-startoklch(0.87 0.12 207.08)#62eafc
- gradient-cyan-endoklch(0.61 0.11 221.72)#0e91b2
- gradient-dawn-startoklch(0.71 0.13 215.22)#00b4d2
- gradient-dawn-endoklch(0.72 0.18 305.50)#c083fd
- gradient-mono-startoklch(0.43 0.00 0)#505050
- gradient-mono-endoklch(0.18 0.00 0)#121212
Highlight colors
- highlight-brand-backgroundoklch(0.96 0.02 289.08)#f1f0ff
- highlight-brand-foregroundoklch(0.54 0.26 277.38)#5746ff
- highlight-primary-backgroundoklch(0.95 0.01 290.75)#eeedf5
- highlight-primary-foregroundoklch(0.42 0.06 291.87)#4e476b
- highlight-gray-backgroundoklch(0.93 0.00 0)#e8e8e8
- highlight-gray-foregroundoklch(0.43 0.00 0)#505050
- highlight-slate-backgroundoklch(0.96 0.01 247.92)#edf3f8
- highlight-slate-foregroundoklch(0.45 0.04 257.28)#47566c
- highlight-yellow-backgroundoklch(0.95 0.07 95.49)#fdefba
- highlight-yellow-foregroundoklch(0.66 0.15 65.27)#ce7c00
- highlight-green-backgroundoklch(0.98 0.02 166.11)#edfdf5
- highlight-green-foregroundoklch(0.51 0.10 165.61)#157858
- highlight-blue-backgroundoklch(0.97 0.01 254.60)#f1f6fc
- highlight-blue-foregroundoklch(0.60 0.16 259.50)#417dde
- highlight-red-backgroundoklch(0.97 0.01 17.38)#fcf3f3
- highlight-red-foregroundoklch(0.64 0.21 25.33)#f14444
- highlight-cyan-backgroundoklch(0.98 0.02 200.87)#eafdfe
- highlight-cyan-foregroundoklch(0.61 0.11 221.72)#0e91b2
- highlight-purple-backgroundoklch(0.98 0.01 308.30)#faf7fe
- highlight-purple-foregroundoklch(0.56 0.25 302.32)#9336ea
- highlight-indigo-backgroundoklch(0.96 0.02 282.77)#eff0ff
- highlight-indigo-foregroundoklch(0.48 0.20 277.79)#4a44ca
- highlight-dipsy-backgroundoklch(0.98 0.04 116.68)#f6fdde
- highlight-dipsy-foregroundoklch(0.56 0.16 134.08)#498702
- highlight-salmon-backgroundoklch(0.97 0.01 41.88)#fbf3f0
- highlight-salmon-foregroundoklch(0.56 0.16 37.84)#bf4922
- highlight-magenta-backgroundoklch(0.95 0.03 337.96)#fde7f6
- highlight-magenta-foregroundoklch(0.49 0.20 357.43)#af0061