In this example, --primary-color and --secondary-color are CSS variables with specific color values assigned to them.

Theming Structure

Our theming system is based on a set of predefined CSS variables that control various aspects of the UI's appearance. These variables are organized and documented below.

Usage

To customize the appearance of our UI using theming, simply override the desired CSS variables with your preferred values. You can do this in your own stylesheet or by injecting custom CSS into your application.

Here's an example of how you can override a CSS variable to change the primary color:

:root {
  --primary-color: #ff6347; /* Coral */
}

Theming Variables

Color Palette

Variable Name	Default Value
--color-primary	#7e22ce
--color-primary-dim	#a78bfa
--color-primary-container	hsla(262, 100%, 58%, 1)
--color-secondary	black
--color-secondary-dim	white
--color-tertiary	white
--color-tertiary-dim	hsla(0, 0%, 24%, 1)
--color-surface	white
--color-surface-dim	white
--color-surface-gray	#4b5563
--color-surface-gray-dim	#9ca3af
--color-surface-container	rgba(207, 207, 207, 0.35)
--color-success	rgba(0, 194, 0, 1)
--color-success-container	hsla(120, 94%, 28%, 1)
--color-success-dim	rgba(106, 231, 106, 1)
--color-warning	rgba(214, 189, 0, 1)
--color-warning-dim	rgba(255, 212, 56, 1)
--color-warning-container	hsla(53, 100%, 29%, 1)
--error-color	hsla(0, 100%, 57%, 1)
--error-color-dim	hsla(0, 100%, 57%, 1)
--error-color-container	hsla(0, 94%, 37%, 1)

bacground

Variable Name	Default Value
--background	white
--disabled-background	Same as --background, default: white
--left-background	rgba(240, 240, 240, 0.50)
--ul-hover || --color-success-container	rgba(181, 181, 181, 0.34)
--scrollbar-bg	white scrollbar-bacground

color

Variable Name	Default Value
--color	hsla(0, 0%, 24%, 1)
--color-dim	white
--color-active	white
--placeholder-color	#999999
--selection-color	rgba(171, 122, 255, 0.60)

opacity

Variable Name	Default Value
--disabled-opacity	0.50

effect

Variable Name	Default Value
--over-bg	rgba(0, 0, 0, 0.2)
--over-bg-blur	blur(1px)

transition

Variable Name	Default Value
--transition-time	200ms

font

Variable Name	Default Value
--font-size	17px

Height-Wight

Variable Name	Default Value
--viewport	1350px (max-width)
--scrollbar-width	8px
--radio-height	20px
--min-height	30px

Borders

Variable Name	Default Value
--border-color	rgba(133, 133, 133, 0.30)
--border-color-active	Same as --color-secondary
--border-width	1px
--border-style	solid
--border-radius	5px

box-shadow

Variable Name	Default Value
--box-shadow-color	rgba(0, 0, 0, 0.1)
--box-shadow-color-dim	rgba(0, 0, 0, 0.3)

Padding

Variable Name	Default Value
--padding	5px
--padding-cnt	15px

fill

Variable Name	Default Value
--fill	#999999
--checking-fill	black
--left-icon-fill	#999999
--right-icon-fill	#999999

scrollbar

Variable Name	Default Value
--scrollbar-bg	white
--scrollbar-width	8px

postions wigth

Z-Index Level	Description
--level-1	Content level
--level-5	Content hovered like fixed chat icon or..
--level-50	Header
--level-60	Sidebars
--level-70	Pop title
--level-100	Popover, Dialog, Dropdown, Tooltip
--level-150	Alert Dialog