Customizing
Theme

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',
  },
};

Aidbase Docs © 2024