-
Notifications
You must be signed in to change notification settings - Fork 278
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;
}