api-client/assets/css/themes.scss

/**
  Main Themes:

  - dark (default)
  - light
  - black
  - auto
 */

// Dark is the default theme variant.
:root {
  // Dark Background color
  --bg-dark-color: rgb(41, 42, 45);
  // Background color
  --bg-color: rgb(37, 38, 40);
  // Auto-complete color
  --atc-color: rgb(49, 49, 55);
  // Text color
  --fg-color: rgb(247, 248, 248);
  // Light Text color
  --fg-light-color: rgb(150, 155, 160);
  // Border color
  --brd-color: rgb(48, 47, 55);
  // Error color
  --err-color: rgb(41, 42, 45);
  // Acent color
  --ac-color: #50fa7b;
  // Active text color
  --act-color: rgb(37, 38, 40);
}

:root.light {
  // Dark Background color
  --bg-dark-color: #e8f0fe;
  // Background color
  --bg-color: #ffffff;
  // Auto-complete color
  --atc-color: #ebebeb;
  // Text color
  --fg-color: #525252;
  // Light Text color
  --fg-light-color: rgb(150, 155, 160);
  // Border color
  --brd-color: #f2f2f2;
  // Error color
  --err-color: invert(#303341, 1);
  // Acent color
  --ac-color: #57b5f9;
  // Active text color
  --act-color: #ffffff;
}

:root.black {
  // Dark Background color
  --bg-dark-color: rgb(23, 24, 26);
  // Background color
  --bg-color: #000000;
  // Auto-complete color
  --atc-color: rgb(49, 49, 55);
  // Text color
  --fg-color: rgb(247, 248, 248);
  // Light Text color
  --fg-light-color: rgb(150, 155, 160);
  // Border color
  --brd-color: rgb(48, 47, 55);
  // Error color
  --err-color: rgb(41, 42, 45);
  // Acent color
  --ac-color: #50fa7b;
  // Active text color
  --act-color: rgb(37, 38, 40);
}

@media(prefers-color-scheme: light) {
  :root.auto {
    // Dark Background color
    --bg-dark-color: #e8f0fe;
    // Background color
    --bg-color: #ffffff;
    // Auto-complete color
    --atc-color: #ebebeb;
    // Text color
    --fg-color: #525252;
    // Light Text color
    --fg-light-color: rgb(150, 155, 160);
    // Border color
    --brd-color: #f2f2f2;
    // Error color
    --err-color: invert(#303341, 1);
    // Acent color
    --ac-color: #57b5f9;
    // Active text color
    --act-color: #fff;
  }
}

@media(prefers-color-scheme: dark) {
  :root.auto {
    // Dark Background color
    --bg-dark-color: rgb(41, 42, 45);
    // Background color
    --bg-color: rgb(37, 38, 40);
    // Auto-complete color
    --atc-color: rgb(49, 49, 55);
    // Text color
    --fg-color: rgb(247, 248, 248);
    // Light Text color
    --fg-light-color: rgb(150, 155, 160);
    // Border color
    --brd-color: rgb(48, 47, 55);
    // Error color
    --err-color: rgb(41, 42, 45);
    // Acent color
    --ac-color: #50fa7b;
    // Active text color
    --act-color: rgb(37, 38, 40);
  }
}