Color Theme

Prerequisites

This example specifically requires completion of all setup steps listed on the following White Label sub-pages:

1. Prerequisites page.

2. Installation page.

GLChat UI uses CSS variables to define the color tokens. You can inject a global CSS to customize them (for light/dark themes). For example this is the default tokens and you can override any of these:

:root {
  /* Color tokens */
  --background: 0 0% 100%;
  --background-alternate: 0 0% 98%;

  --foreground: 0 0% 11%;

  --navbar: 0 0% 94%;

  --popover: 0 0% 25%;
  --popover-foreground: 0 0% 100%;

  --border: 0 0% 86%;

  --primary: 198 100% 31%;
  --primary-foreground: 0 0% 100%;
  --primary-subtle: 198 57% 85%;
  --primary-subtle-foreground: 198 100% 28%;
  --primary-alternate: 194 96% 43%;

  --secondary: 0 0% 86%;
  --secondary-foreground: 0 0% 11%;

  --accent: 28 100% 53%;
  --accent-foreground: 0 0% 100%;
  --accent-alternate: 38 100% 95%;
  --accent-alternate-foreground: 24 100% 35%;

  --destructive: 0 97% 59%;
  --destructive-alternate: 8 100% 97%;
  --destructive-foreground: 0 0% 100%;

  --positive: 161 90% 33%;
  --positive-foreground: 0 0% 100%;
  --positive-alternate: 152 81% 96%;
  --positive-alternate-foreground: 161 100% 22%;

  --ring: 198 100% 31%;

  --card: 0 0% 100%;
  --card-foreground: 0 0% 11%;

  --hover: 0 0% 0% / 5%;

  --grid: 0 0% 86%;

  /* Gradient tokens */
  --top-gradient: radial-gradient(
    792px 35% at 50% 100%,
    hsla(var(--primary-alternate) / 40%) 0%,
    hsla(var(--primary-alternate) / 30%) 40%,
    hsla(var(--primary-alternate) / 20%) 60%,
    hsla(var(--primary-alternate) / 10%) 80%,
    hsla(var(--primary-alternate) / 0%) 100%
  );

  --grid-gradient: linear-gradient(
      90deg,
      transparent,
      hsla(var(--grid) / 50%) 1px,
      transparent 1px
    ),
    linear-gradient(
      180deg,
      transparent,
      hsla(var(--grid) / 50%) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at center,
      transparent 0%,
      transparent 45%,
      hsl(var(--background)) 70%
    );

  /* New Chat Gradient */
  --gradient-grid-background: var(--top-gradient), var(--grid-gradient),
    linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background)));
  --gradient-grid-background-size: 100% 100%, 100px 100px, 100px 100px,
    100% 100%, 100% 100%;

  /* Mobile Login Gradient */
  --gradient-background: var(--top-gradient),
    linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background)));

  /* Desktop Login Gradient */
  --gradient-background-alternate: var(--top-gradient),
    linear-gradient(
      to bottom,
      hsl(var(--primary-subtle)),
      hsl(var(--primary-subtle))
    );

  /* Text gradient */
  --gradient-loading: linear-gradient(
    to right,
    hsl(var(--primary)),
    hsl(var(--primary) / 50%),
    hsl(var(--primary))
  );

  /* Spacing tokens */
  --radius: 0.5rem;

  /* Codeblock tokens */
  --codeblock-header: 0 0% 94%;
  --codeblock-body: 0 0% 98%;
}

.dark {
  /* Color tokens */
  --background: 0 0% 11%;
  --background-alternate: 0 0 7%;

  --foreground: 0 0% 100%;

  --navbar: 240 10% 4%;

  --popover: 0 0% 98%;
  --popover-foreground: 0 0% 11%;

  --border: 0 0% 25%;

  --primary: 196 71% 39%;
  --primary-foreground: 0 0% 100%;
  --primary-subtle: 198 99% 17%;
  --primary-subtle-foreground: 198 57% 85%;
  --primary-alternate: 194 96% 43%;

  --secondary: 0 0% 25%;
  --secondary-foreground: 0 0% 100%;

  --accent: 30 100% 62%;
  --accent-foreground: 0 0% 100%;
  --accent-alternate: 22 100% 27%;
  --accent-alternate-foreground: 36 100% 85%;

  --destructive: 4 100% 75%;
  --destructive-alternate: 354 92% 28%;
  --destructive-foreground: 0 0% 100%;

  --positive: 162 91% 33%;
  --positive-foreground: 8 100% 97%;
  --positive-alternate: 161 100% 22%;
  --positive-alternate-foreground: 152 81% 96%;

  --ring: 196 71% 39%;

  --card: 0 0% 11%;
  --card-foreground: 0 0% 100%;

  --hover: 0 0% 100% / 5%;

  --grid: 0 0% 25%;

  --codeblock-header: 240 10% 4%;
  --codeblock-body: 0 0% 7%;
}

To make GLChat UI use the above style, host it in a URL accessible by GLChat UI container image and then add the following environment variable into GLChat UI docker container:

# Adjust http://localhost:8080/main.css with your actual URL that returns the style
NEXT_PUBLIC_CHATBOT_EXTERNAL_STYLESHEET=http://localhost:8080/main.css

If you recreate the GLChat UI docker container and visit http://localhost:3000 you will see the color theme has changed to blue-ish:

If your system appearance is set to dark, it will look like this:

If you use Chrome, you can set CSS media feature prefers-color-scheme to switch the theme. See here for more details on Chrome's CSS media feature.