Theme
Providing a custom theme for the Aidbase Elements
All Aidbase Elements are styled using a theme.
A theme is a set of color tokens that are applied to the elements.
You can provide your own theme and override some or all of the color tokens.
JavaScript
// Get the DOM node of the Chatbot
const chatbot = document.getElementById('my-chatbot');
// We are overriding some specific color tokens
chatbot.colors = {
purple: {
50: '#F1EAFF',
100: '#DBCBFE',
500: '#7D42FB',
},
green: {
800: '#073524',
900: '#031A12',
},
gray: {
50: '#FCFDFD',
},
};Standard themes
Below are the full set of color tokens for the standard themes.
Standard theme light
Standard theme light
{
black: '#000',
white: '#FFF',
primary: {
1: '#616D8C',
},
scale: {
1: '#FAFAFA',
2: '#F7FAFC',
3: '#CBD5E0',
4: '#5B637C',
5: '#101627',
},
service: {
error: '#FF5A65',
success: '#14CA74',
info: '#327DFF',
alert: '#FFCC68',
verified: '#14CA74',
},
pink: {
50: '#FDECF2',
100: '#F9CADC',
200: '#F5A8C6',
300: '#F085AF',
400: '#EC6399',
500: '#DA407C',
600: '#AE3363',
700: '#83264A',
800: '#5E273D',
900: '#2F131F',
},
purple: {
50: '#F1EAFF',
100: '#DBCBFE',
200: '#C6ABFE',
300: '#B08CFD',
400: '#9A6CFC',
500: '#7D42FB',
600: '#6435C9',
700: '#4B2897',
800: '#321A64',
900: '#190D32',
},
indigo: {
50: '#E7E8FF',
100: '#D1D3FF',
200: '#AFA9FF',
300: '#9289FF',
400: '#766AFF',
500: '#5A4AFF',
600: '#483BCC',
700: '#362C99',
800: '#241E66',
900: '#120F33',
},
blue: {
50: '#EAF4FF',
100: '#BDDCFF',
200: '#8FC3FF',
300: '#56A6FF',
400: '#1D88FE',
500: '#086CD9',
600: '#0656AE',
700: '#054182',
800: '#032B57',
900: '#02162B',
},
lightBlue: {
50: '#DFF2FF',
100: '#A7E0FF',
200: '#70CFFF',
300: '#38BDFF',
400: '#00ABFF',
500: '#008FD5',
600: '#0072AA',
700: '#005680',
800: '#003955',
900: '#001D2B',
},
cyan: {
50: '#DEF9FE',
100: '#ADEFFC',
200: '#7CE6FA',
300: '#4BDCF8',
400: '#1AD2F6',
500: '#00B5DC',
600: '#0091B0',
700: '#006D84',
800: '#004858',
900: '#00242C',
},
teal: {
50: '#DFFBFA',
100: '#AFF5F3',
200: '#7EF0EC',
300: '#4EEAE5',
400: '#1DE4DE',
500: '#04C8C5',
600: '#03A09E',
700: '#027876',
800: '#285757',
900: '#012827',
},
green: {
50: '#DEF2E6',
100: '#AFE7C5',
200: '#7FDCA4',
300: '#42CF86',
400: '#05C168',
500: '#11845B',
600: '#0E6A49',
700: '#0A4F37',
800: '#073524',
900: '#031A12',
},
yellow: {
50: '#FEF5D7',
100: '#FDECB1',
200: '#FCE38B',
300: '#FED569',
400: '#FFC746',
500: '#EBAA17',
600: '#BC8812',
700: '#8D660E',
800: '#5E4409',
900: '#2F2205',
},
orange: {
50: '#FFF3E4',
100: '#FFE2C0',
200: '#FFD19B',
300: '#FFB864',
400: '#FF9E2C',
500: '#D5691B',
600: '#803F10',
700: '#90571C',
800: '#552A0B',
900: '#2B1505',
},
red: {
50: '#FFEFF0',
100: '#FFD7D9',
200: '#FFBEC2',
300: '#FF8C94',
400: '#FF5A65',
500: '#DC2B2B',
600: '#B02222',
700: '#841A1A',
800: '#581111',
900: '#2C0909',
},
gray: {
50: '#FCFDFD',
100: '#F9FAFB',
150: '#EDEEF1',
200: '#EAEBED',
300: '#CECFD4',
400: '#B7B8BE',
500: '#9FA0A7',
600: '#888991',
700: '#71717A',
800: '#52525B',
850: '#37373D',
900: '#252529',
},
};Standard theme dark
The built-in dark theme uses an inverted color scale.
In dark mode, color-50 is the darkest and color-900 is the lightest.
Standard theme dark
{
black: '#CDD9E5',
white: '#1C2128',
primary: {
1: '#616D8C',
},
scale: {
1: '#171B25',
2: '#23293B',
3: '#434B61',
4: '#7E899E',
5: '#EDF2F7',
},
service: {
error: '#D8666E',
success: '#07AB5E',
info: '#1A72D2',
alert: '#D0A647',
verified: '#07AB5E',
},
pink: {
50: '#6E2240',
100: '#853052',
200: '#9C3E63',
300: '#B24D75',
400: '#C95B86',
500: '#E06998',
600: '#EA95B6',
700: '#F3C0D4',
800: '#F8D6E3',
900: '#FDECF2',
},
purple: {
50: '#341F61',
100: '#472A82',
200: '#5A3F94',
300: '#6E50AE',
400: '#8160C7',
500: '#9470E1',
600: '#AF94EB',
700: '#CBB7F5',
800: '#E6DBFF',
900: '#F3EDFF',
},
indigo: {
50: '#2C266E',
100: '#3A3385',
200: '#48419D',
300: '#574EB4',
400: '#655CCC',
500: '#7369E3',
600: '#928CEC',
700: '#B2B0F6',
800: '#D1D3FF',
900: '#E8E9FF',
},
blue: {
50: '#063568',
100: '#0B4483',
200: '#10539D',
300: '#1563B8',
400: '#1A72D2',
500: '#1F81ED',
600: '#5AA3F2',
700: '#96C4F8',
800: '#D1E6FD',
900: '#EAF4FF',
},
lightBlue: {
50: '#08384E',
100: '#0B4F6E',
200: '#0E658F',
300: '#127CAF',
400: '#1592D0',
500: '#18A9F0',
600: '#58C1F4',
700: '#99D9F9',
800: '#D9F1FD',
900: '#ECF8FE',
},
cyan: {
50: '#034654',
100: '#0C6071',
200: '#157A8E',
300: '#1E94AB',
400: '#27AEC8',
500: '#30C8E5',
600: '#67D7EC',
700: '#9FE5F3',
800: '#D6F4FA',
900: '#EBFAFD',
},
teal: {
50: '#0B4746',
100: '#0F6664',
200: '#128683',
300: '#16A5A1',
400: '#19C5C0',
500: '#37E2DD',
600: '#6FEAE7',
700: '#A7F3F0',
800: '#DFFBFA',
900: '#EFFDFD',
},
green: {
50: '#105137',
100: '#0E6741',
200: '#0C7E4B',
300: '#099454',
400: '#07AB5E',
500: '#2CBB77',
600: '#65CE9B',
700: '#9EE0BE',
800: '#D7F3E2',
900: '#EBF9F1',
},
yellow: {
50: '#705721',
100: '#886B2A',
200: '#A07F34',
300: '#B8923D',
400: '#D0A647',
500: '#E8BA50',
600: '#EFCE7D',
700: '#F7E2AB',
800: '#FEF6D8',
900: '#FFFBEC',
},
orange: {
50: '#804820',
100: '#9A5A27',
200: '#B56C2D',
300: '#CF7D34',
400: '#E98F3A',
500: '#EDA055',
600: '#F3BC85',
700: '#F9D7B4',
800: '#FFF3E4',
900: '#FFF9F2',
},
red: {
50: '#76262B',
100: '#91353B',
200: '#A7464D',
300: '#BF565D',
400: '#D8666E',
500: '#F0767F',
600: '#F59EA5',
700: '#FAC7CA',
800: '#FFEFF0',
900: '#FFF7F8',
},
gray: {
50: '#1F242B',
100: '#22272E',
150: '#32383F',
200: '#373E47',
300: '#444C56',
400: '#545D68',
500: '#636E7B',
600: '#768390',
700: '#909DAB',
800: '#ADBAC7',
900: '#CDD9E5',
},
};