polygerrit-ui/app/styles/themes/dark-theme.ts

/**
 * @license
 * Copyright 2015 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import {safeStyleSheet, safeStyleEl} from '../../utils/inner-html-util';

// TODO: Replace `html` with `html.darkTheme`. But before we can do that we have
// to ensure that all plugins also use `.darkTheme`, otherwise we would trump
// their sepcificity here. When we do that we can also always execute
// applyTheme() below (similar to app-theme).
const darkThemeCss = safeStyleSheet`
  html {
    /**
       * Sections and variables must stay consistent with app-theme.js.
       *
       * Only modify color variables in this theme file. dark-theme extends
       * app-theme, so there is no need to repeat all variables, but for colors
       * it does make sense to list them all: If you override one color, then
       * you probably want to override all.
       */

    --error-foreground: var(--red-200);
    --error-background: var(--red-tonal);
    --error-background-hover: linear-gradient(var(--white-04), var(--white-04)),
      var(--red-tonal);
    --error-background-focus: linear-gradient(var(--white-12), var(--white-12)),
      var(--red-tonal);
    --error-ripple: var(--white-10);

    --code-review-warning-background: var(--blue-tonal);

    --warning-foreground: var(--orange-200);
    --warning-background: var(--orange-tonal);
    --warning-background-hover: linear-gradient(
        var(--white-04),
        var(--white-04)
      ),
      var(--orange-tonal);
    --warning-background-focus: linear-gradient(
        var(--white-12),
        var(--white-12)
      ),
      var(--orange-tonal);
    --warning-ripple: var(--white-10);

    --info-foreground: var(--blue-200);
    --info-background: var(--blue-tonal);
    --info-background-hover: linear-gradient(var(--white-04), var(--white-04)),
      var(--blue-tonal);
    --info-background-focus: linear-gradient(var(--white-12), var(--white-12)),
      var(--blue-tonal);
    --info-ripple: var(--white-10);

    --primary-button-text-color: black;
    --primary-button-background-color: var(--gerrit-blue-dark);
    --primary-button-background-hover: var(--blue-200-16);
    --primary-button-background-focus: var(--blue-200-24);

    --selected-foreground: var(--blue-200);
    --selected-background: var(--blue-900);
    --selected-chip-background: var(--blue-300-24);

    --success-foreground: var(--green-200);
    --success-background: var(--green-tonal);
    --success-background-hover: linear-gradient(
        var(--white-04),
        var(--white-04)
      ),
      var(--green-tonal);
    --success-background-focus: linear-gradient(
        var(--white-12),
        var(--white-12)
      ),
      var(--green-tonal);
    --success-ripple: var(--white-10);

    --gray-foreground: var(--gray-300);
    --gray-background: var(--gray-tonal);
    --gray-background-hover: linear-gradient(var(--white-04), var(--white-04)),
      var(--gray-tonal);
    --gray-background-focus: linear-gradient(var(--white-12), var(--white-12)),
      var(--gray-tonal);
    --gray-ripple: var(--white-10);

    --disabled-foreground: var(--gray-200-38);
    --disabled-background: var(--gray-200-12);

    --chip-color: var(--gray-100);
    --error-color: var(--red-200);
    --tag-background: var(--cyan-900);
    --label-background: var(--red-900);

    --not-working-hours-icon-background-color: var(--purple-tonal);
    --not-working-hours-icon-color: var(--purple-100);
    --unavailability-icon-color: var(--gray-500);
    --unavailability-chip-icon-color: var(--orange-700);
    --unavailability-chip-background-color: var(--orange-tonal);

    /* text colors */
    --primary-text-color: var(--gray-200);
    --link-color: var(--gerrit-blue-dark);
    --comment-text-color: var(--primary-text-color);
    --deemphasized-text-color: var(--gray-400);
    --default-button-text-color: var(--gerrit-blue-dark);
    --chip-selected-text-color: var(--blue-100);
    --error-text-color: var(--red-200);
    /* Used on text color for change list doesn't need user's attention. */
    --reviewed-text-color: var(--gray-300);
    --vote-text-color: black;
    --status-text-color: black;
    --tooltip-text-color: var(--gray-900);
    --tooltip-button-text-color: var(--gerrit-blue-light);
    --negative-red-text-color: var(--red-200);
    --positive-green-text-color: var(--green-200);
    --indirect-relation-text-color: var(--green-200);

    /* background colors */
    /* primary background colors */
    --background-color-primary: var(--gray-900);
    --background-color-secondary: #2f3034;
    --background-color-tertiary: var(--gray-800);
    /* directly derived from primary background colors */
    /*   empty, because inheriting from app-theme is just fine
      /* unique background colors */
    --line-item-highlight-color: #3a361c;
    --line-item-highlight-selection-color: #423e24;
    --chip-selected-background-color: #3c4455;
    --edit-mode-background-color: #5c0a36;
    --emphasis-color: #383f4a;
    --hover-background-color: rgba(161, 194, 250, 0.2);
    --disabled-button-background-color: #484a4d;
    --selection-background-color: rgba(161, 194, 250, 0.1);
    --tooltip-background-color: var(--gray-200);

    /* comment background colors */
    --comment-background-color: #3c3f43;
    --robot-comment-background-color: #1e3a5f;
    --unresolved-comment-background-color: #614a19;

    /* Suggest edits */
    --user-suggestion-header-background: var(--gray-700);
    --user-suggestion-header-color: white;

    /* vote background colors */
    --vote-color-approved: var(--green-300);
    --vote-color-disliked: var(--red-tonal);
    --vote-outline-disliked: var(--red-200);
    --vote-color-neutral: var(--gray-700);
    --vote-color-recommended: var(--green-tonal);
    --vote-outline-recommended: var(--green-200);
    --vote-color-rejected: var(--red-200);

    /* vote chip background colors */
    --vote-chip-unselected-outline-color: var(--gray-500);
    --vote-chip-unselected-color: var(--grey-800);
    --vote-chip-selected-positive-color: var(--green-200);
    --vote-chip-selected-neutral-color: var(--gray-300);
    --vote-chip-selected-negative-color: var(--red-200);
    --vote-chip-unselected-text-color: white;
    --vote-chip-selected-text-color: black;

    --outline-color-focus: var(--gray-100);

    /* misc colors */
    --border-color: var(--gray-700);
    --input-focus-border-color: var(--blue-200);
    --comment-separator-color: var(--border-color);

    /* checks tag colors */
    --tag-gray: var(--gray-tonal);
    --tag-yellow: var(--yellow-tonal);
    --tag-pink: var(--pink-tonal);
    --tag-purple: var(--purple-tonal);
    --tag-cyan: var(--cyan-tonal);
    --tag-brown: var(--brown-tonal);

    /* status colors */
    --status-merged: var(--green-400);
    --status-abandoned: var(--gray-300);
    --status-wip: #bcaaa4;
    --status-private: var(--purple-200);
    --status-conflict: var(--red-300);
    --status-revert-created: #ff8a65;
    --status-active: var(--blue-400);
    --status-ready: var(--pink-500);
    --status-custom: var(--purple-400);

    /* file status colors */
    --file-status-added: var(--green-400);
    --file-status-deleted: var(--red-300);
    --file-status-modified: var(--gray-500);
    --file-status-renamed: var(--orange-400);
    --file-status-unchanged: var(--gray-500);
    --file-status-reverted: var(--gray-500);

    /* fonts */
    --font-weight-bold: 700; /* 700 is the same as 'bold' */

    /* spacing */

    /* header and footer */
    --footer-background-color: var(--background-color-tertiary);
    --footer-border-top: 1px solid var(--border-color);
    --header-background-color: var(--background-color-tertiary);
    --header-border-bottom: 1px solid var(--border-color);
    --header-padding: 0 var(--spacing-l);
    --header-text-color: var(--primary-text-color);

    /* dashboard size background colors */
    --dashboard-size-xs: var(--gray-700);
    --dashboard-size-s: var(--gray-500);
    --dashboard-size-m: var(--gray-400);
    --dashboard-size-l: var(--gray-300);
    --dashboard-size-xl: var(--gray-200);
    --dashboard-size-text: black;
    --dashboard-size-xs-text: white;
    --dashboard-size-xl-text: black;

    /* diff colors */
    --dark-add-highlight-color: var(--green-tonal);
    --light-add-highlight-color: #182b1f;
    --dark-remove-highlight-color: #62110f;
    --light-remove-highlight-color: #320404;

    --dark-rebased-add-highlight-color: var(--deep-purple-800);
    --light-rebased-add-highlight-color: var(--deep-purple-600);
    --dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15);
    --light-rebased-remove-highlight-color: #2f3f2f;

    --diff-moved-in-background: #1d4042;
    --diff-moved-in-label-color: var(--cyan-50);
    --diff-moved-in-changed-background: #1d4042;
    --diff-moved-in-changed-label-color: var(--cyan-50);
    --diff-moved-out-background: #230e34;
    --diff-moved-out-label-color: var(--purple-50);

    --diff-blank-background-color: var(--background-color-secondary);
    --diff-context-control-background-color: #333311;
    --diff-context-control-border-color: var(--border-color);
    --diff-context-control-color: var(--deemphasized-text-color);
    --diff-highlight-range-color: rgba(0, 100, 200, 0.5);
    --diff-highlight-range-hover-color: rgba(0, 150, 255, 0.5);
    --diff-selection-background-color: #3a71d8;
    --diff-tab-indicator-color: var(--deemphasized-text-color);
    --diff-trailing-whitespace-indicator: #ff9ad2;
    --focused-line-outline-color: var(--blue-200);
    --coverage-covered: var(--cyan-tonal);
    --coverage-covered-line-num-color: var(--gray-200);
    --coverage-not-covered: var(--orange-tonal);
    --ranged-comment-hint-text-color: var(--blue-50);
    --token-highlighting-color: var(--yellow-tonal);

    /* syntax colors */
    --syntax-attr-color: #80cbbf;
    --syntax-attribute-color: var(--primary-text-color);
    --syntax-built_in-color: #f7c369;
    --syntax-comment-color: var(--deemphasized-text-color);
    --syntax-default-color: var(--primary-text-color);
    --syntax-doctag-weight: bold;
    --syntax-function-color: var(--primary-text-color);
    --syntax-keyword-color: #cd4cf0;
    --syntax-link-color: #c792ea;
    --syntax-literal-color: #eefff7;
    --syntax-meta-color: #6d7eee;
    --syntax-meta-keyword-color: #eefff7;
    --syntax-number-color: #00998a;
    --syntax-params-color: var(--primary-text-color);
    --syntax-property-color: #c792ea;
    --syntax-regexp-color: #f77669;
    --syntax-selector-attr-color: #80cbbf;
    --syntax-selector-class-color: #ffcb68;
    --syntax-selector-id-color: #f77669;
    --syntax-selector-pseudo-color: #c792ea;
    --syntax-string-color: #c3e88d;
    --syntax-tag-color: #f77669;
    --syntax-template-tag-color: #c792ea;
    --syntax-template-variable-color: #f77669;
    --syntax-title-color: #75a5ff;
    --syntax-title-function-color: var(--syntax-title-color);
    --syntax-type-color: #dd5f5f;
    --syntax-variable-color: #f77669;
    --syntax-variable-language-color: var(--syntax-built_in-color);

    /* misc */
    --line-length-indicator-color: #d7aefb;

    /* rules applied to html */
    background-color: var(--view-background-color);
  }
`;

export function applyTheme() {
  if (document.head.querySelector('#dark-theme')) return;
  const styleEl = document.createElement('style');
  styleEl.setAttribute('id', 'dark-theme');
  safeStyleEl.setTextContent(styleEl, darkThemeCss);

  // We would like to insert the dark theme styles after the light theme such
  // that the dark theme values override the defaults in the light theme. But
  // OTOH we want to insert before any plugin provided styles, because we do NOT
  // want to override those.
  const pluginStyleEl = document.head.querySelector('style#plugin-style');
  document.head.insertBefore(styleEl, pluginStyleEl);
}

export function removeTheme() {
  const styleEl = document.head.querySelector('#dark-theme');
  styleEl?.remove();
}