Skip to content

Plain Dark theme (patch for the theme "Photon")

YUKI "Piro" Hiroshi edited this page May 19, 2022 · 1 revision

The "Plain Dark" theme was removed at TST 3.5.16. You can use it as a user style. Please see the description how to use this also.

This style declarations include only color definitions, so you need to choose the theme "Photon" to use this effectively.

/*
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/

:root,
:root[color-scheme="system-color"] {
  --in-content-page-background: #2A2A2E /* rgb(42, 42, 46) */;
  --in-content-page-color: rgb(249, 249, 250);
  --in-content-text-color: var(--in-content-page-color);
  --in-content-deemphasized-text: var(--grey-40);
  --in-content-box-background: #202023;
  --in-content-box-background-hover: /* rgba(249,249,250,0.15) */ rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.2)), calc((46 * 0.8) + (250 * 0.2)));
  --in-content-box-background-active: rgba(249,249,250,0.2);
  --in-content-box-background-odd: rgba(249,249,250,0.05);
  --in-content-box-info-background: rgba(249,249,250,0.15);

  --in-content-border-color: rgba(249,249,250,0.2);
  --in-content-border-color-mixed: rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.2)), calc((46 * 0.8) + (250 * 0.2)));
  --in-content-border-hover: rgba(249,249,250,0.3);
  --in-content-border-hover-mixed: rgb(calc((42 * 0.7) + (249 * 0.3)), calc((42 * 0.7) + (249 * 0.3)), calc((46 * 0.7) + (250 * 0.3)));
  --in-content-box-border-color: rgba(249,249,250,0.2);
  --in-content-box-border-color-mixed: rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.2)), calc((46 * 0.8) + (250 * 0.2)));

  --in-content-button-background: rgba(249,249,250,0.1);
  --in-content-button-background-mixed: rgb(calc((42 * 0.9) + (249 * 0.1)), calc((42 * 0.9) + (249 * 0.1)), calc((46 * 0.9) + (250 * 0.1)));
  --in-content-button-background-hover: rgba(249,249,250,0.15);
  --in-content-button-background-hover-mixed: rgb(calc((42 * 0.85) + (249 * 0.15)), calc((42 * 0.85) + (249 * 0.15)), calc((46 * 0.85) + (250 * 0.15)));
  --in-content-button-background-active: rgba(249,249,250,0.2);
  --in-content-button-background-active-mixed: rgb(calc((42 * 0.8) + (249 * 0.2)), calc((42 * 0.8) + (249 * 0.2)), calc((46 * 0.8) + (250 * 0.2)));

  --tab-highlighter: var(--dark-tab-line);
  --tab-highlighted-highlight: white;
  --tabbar-bg: var(--dark-frame);

  --tab-like-surface: var(--toolbar-non-lwt-bgcolor);
  --tab-surface-regular: var(--tab-like-surface);
  --tab-text-regular: var(--toolbar-non-lwt-textcolor);
  --tab-text-inverted: var(--toolbar-non-lwt-bgcolor);
  --tab-text-active: var(--tab-text-regular);
  --tab-text-active-inverted: var(--toolbar-non-lwt-bgcolor);
  --tab-border: var(--in-content-box-border-color-mixed);
  --tab-surface-hover: var(--in-content-box-background-hover);
  --tab-surface-active: var(--in-content-button-background-mixed);
  --tab-surface-active-hover: var(--in-content-button-background-active-mixed);
  --tab-dropmarker: var(--toolbar-non-lwt-textcolor);

  --tab-highlighter-inactive: var(--grey-10-a20);
}

/* Firefox applies dark colors to scrollbars in its in-content UI, when a
   Dark theme is applied by the platform. To imitate such appearance we need
   to specify dark colors manually. See also:
   https://github.com/piroor/treestyletab/issues/2373 */
#tabbar {
  scrollbar-color: var(--in-content-button-background-active-mixed) var(--in-content-box-background);
}

:root[color-scheme="system-color"] #background::after {
  content: none;
}

:root,
#background {
  background-image: none;
}