hiro/tridactyl
1
0
Fork 0
mirror of https://github.com/vale981/tridactyl synced 2025-03-05 09:31:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add a new "auto" theme.

Browse source 
This theme can adapt to system's light or dark theme variants.
This commit is contained in:
Aaron Rancsik 2021-10-01 11:54:20 +02:00
parent 87bac6ecc4
commit e41714e69e
1 changed files with 428 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

428
src/static/themes/auto/auto.css Normal file
View file

@ -0,0 +1,428 @@
@media (prefers-color-scheme: dark) {
:root {
/* {{{ photon-colours */
/* From https://github.com/overdodactyl/ShadowFox/blob/7dbe9343da87bde804e8fb88dd3b5eaaeb4817b2/css/common-files/color_variables.css */
--tridactyl-photon-colours-magenta-50: #ff1ad9;
--tridactyl-photon-colours-magenta-60: #ed00b5;
--tridactyl-photon-colours-magenta-70: #b5007f;
--tridactyl-photon-colours-magenta-80: #7d004f;
--tridactyl-photon-colours-magenta-90: #440027;
--tridactyl-photon-colours-purple-50: #9400ff;
--tridactyl-photon-colours-purple-60: #8000d7;
--tridactyl-photon-colours-purple-70: #6200a4;
--tridactyl-photon-colours-purple-80: #440071;
--tridactyl-photon-colours-purple-90: #25003e;
--tridactyl-photon-colours-blue-40: #45a1ff;
--tridactyl-photon-colours-blue-50: #0a84ff;
--tridactyl-photon-colours-blue-60: #0060df;
--tridactyl-photon-colours-blue-70: #003eaa;
--tridactyl-photon-colours-blue-80: #002275;
--tridactyl-photon-colours-blue-90: #000f40;
--tridactyl-photon-colours-teal-50: #00feff;
--tridactyl-photon-colours-teal-60: #00c8d7;
--tridactyl-photon-colours-teal-70: #008ea4;
--tridactyl-photon-colours-teal-80: #005a71;
--tridactyl-photon-colours-teal-90: #002d3e;
--tridactyl-photon-colours-green-50: #30e60b;
--tridactyl-photon-colours-green-60: #12bc00;
--tridactyl-photon-colours-green-70: #058b00;
--tridactyl-photon-colours-green-80: #006504;
--tridactyl-photon-colours-green-90: #003706;
--tridactyl-photon-colours-yellow-50: #ffe900;
--tridactyl-photon-colours-yellow-60: #d7b600;
--tridactyl-photon-colours-yellow-70: #a47f00;
--tridactyl-photon-colours-yellow-80: #715100;
--tridactyl-photon-colours-yellow-90: #3e2800;
--tridactyl-photon-colours-red-50: #ff0039;
--tridactyl-photon-colours-red-60: #d70022;
--tridactyl-photon-colours-red-70: #a4000f;
--tridactyl-photon-colours-red-80: #5a0002;
--tridactyl-photon-colours-red-90: #3e0200;
--tridactyl-photon-colours-orange-50: #ff9400;
--tridactyl-photon-colours-orange-60: #d76e00;
--tridactyl-photon-colours-orange-70: #a44900;
--tridactyl-photon-colours-orange-80: #712b00;
--tridactyl-photon-colours-orange-90: #3e1300;
--tridactyl-photon-colours-grey-10: #f9f9fa;
--tridactyl-photon-colours-grey-20: #ededf0;
--tridactyl-photon-colours-grey-30: #d7d7db;
--tridactyl-photon-colours-grey-40: #b1b1b3;
--tridactyl-photon-colours-grey-50: #737373;
--tridactyl-photon-colours-grey-60: #4a4a4f;
--tridactyl-photon-colours-grey-70: #38383d;
--tridactyl-photon-colours-grey-80: #2a2a2e;
--tridactyl-photon-colours-grey-90: #0c0c0d;
--tridactyl-photon-colours-code-green: #86de74 !important;
--tridactyl-photon-colours-warning-color: #fce19f;
--tridactyl-photon-colours-warning-background-color: #44391f;
--tridactyl-photon-colours-theme-highlight-green: #86de74;
--tridactyl-photon-colours-theme-highlight-blue: #75bfff;
--tridactyl-photon-colours-theme-highlight-purple: #b98eff;
--tridactyl-photon-colours-theme-highlight-red: #ff7de9;
--tridactyl-photon-colours-theme-highlight-yellow: #fff89e;
--tridactyl-photon-colours-theme-highlight-bluegrey: #5e88b0;
--tridactyl-photon-colours-theme-highlight-lightorange: #d99b28;
--tridactyl-photon-colours-theme-highlight-orange: #d96629;
--tridactyl-photon-colours-theme-highlight-pink: #df80ff;
--tridactyl-photon-colours-tone-1: var(--tridactyl-photon-colours-grey-10);
--tridactyl-photon-colours-tone-2: var(--tridactyl-photon-colours-grey-20);
--tridactyl-photon-colours-tone-3: var(--tridactyl-photon-colours-grey-30);
--tridactyl-photon-colours-tone-4: var(--tridactyl-photon-colours-grey-40);
--tridactyl-photon-colours-tone-5: var(--tridactyl-photon-colours-grey-50);
--tridactyl-photon-colours-tone-6: var(--tridactyl-photon-colours-grey-60);
--tridactyl-photon-colours-tone-7: var(--tridactyl-photon-colours-grey-70);
--tridactyl-photon-colours-tone-8: var(--tridactyl-photon-colours-grey-80);
--tridactyl-photon-colours-tone-9: var(--tridactyl-photon-colours-grey-90);
--tridactyl-photon-colours-accent-1: var(
--tridactyl-photon-colours-blue-40
);
--tridactyl-photon-colours-accent-2: var(
--tridactyl-photon-colours-blue-50
);
--tridactyl-photon-colours-accent-3: var(
--tridactyl-photon-colours-blue-60
);
--tridactyl-photon-colours-in-content-page-color: var(
--tridactyl-photon-colours-tone-4
) !important;
--tridactyl-photon-colours-in-content-page-background: var(
--tridactyl-photon-colours-tone-7
) !important;
--tridactyl-photon-colours-in-content-text-color: var(
--tridactyl-photon-colours-tone-3
) !important;
--tridactyl-photon-colours-in-content-selected-text: var(
--tridactyl-photon-colours-tone-1
) !important;
--tridactyl-photon-colours-in-content-box-background: var(
--tridactyl-photon-colours-tone-6
) !important;
--tridactyl-photon-colours-in-content-box-background-odd: #f3f6fa;
--tridactyl-photon-colours-in-content-box-background-hover: var(
--tridactyl-photon-colours-tone-6
) !important;
--tridactyl-photon-colours-in-content-box-background-active: var(
--tridactyl-photon-colours-tone-6
) !important;
--tridactyl-photon-colours-in-content-box-border-color: var(
--tridactyl-photon-colours-tone-5
) !important;
--tridactyl-photon-colours-in-content-item-hover: rgba(0, 149, 221, 0.25);
--tridactyl-photon-colours-in-content-item-selected: var(
--tridactyl-photon-colours-tone-8
) !important;
--tridactyl-photon-colours-in-content-border-highlight: var(
--tridactyl-photon-colours-accent-1
) !important;
--tridactyl-photon-colours-in-content-border-focus: var(
--tridactyl-photon-colours-accent-1
) !important;
--tridactyl-photon-colours-in-content-border-color: var(
--tridactyl-photon-colours-tone-6
) !important;
--tridactyl-photon-colours-in-content-category-outline-focus: 1px dotted
#0a84ff;
--tridactyl-photon-colours-in-content-category-text: var(
--tridactyl-photon-colours-tone-4
) !important;
--tridactyl-photon-colours-in-content-category-text-active: #0c0c0d;
--tridactyl-photon-colours-in-content-category-text-selected: var(
--tridactyl-photon-colours-accent-1
) !important;
--tridactyl-photon-colours-in-content-category-text-selected-active: #0060df;
--tridactyl-photon-colours-in-content-category-background-hover: rgba(
12,
12,
13,
0.1
);
--tridactyl-photon-colours-in-content-category-background-active: rgba(
12,
12,
13,
0.15
);
--tridactyl-photon-colours-in-content-category-background-selected-hover: rgba(
12,
12,
13,
0.15
);
--tridactyl-photon-colours-in-content-category-background-selected-active: rgba(
12,
12,
13,
0.2
);
--tridactyl-photon-colours-in-content-tab-color: #424f5a;
--tridactyl-photon-colours-in-content-link-color: var(
--tridactyl-photon-colours-accent-1
) !important;
--tridactyl-photon-colours-in-content-link-color-hover: var(
--tridactyl-photon-colours-accent-2
) !important;
--tridactyl-photon-colours-in-content-link-color-active: #003eaa;
--tridactyl-photon-colours-in-content-link-color-visited: #0a8dff;
--tridactyl-photon-colours-in-content-primary-button-background: var(
--tridactyl-photon-colours-accent-2
) !important;
--tridactyl-photon-colours-in-content-primary-button-background-hover: var(
--tridactyl-photon-colours-accent-3
) !important;
--tridactyl-photon-colours-in-content-primary-button-background-active: var(
--tridactyl-photon-colours-accent-3
) !important;
--tridactyl-photon-colours-in-content-table-border-dark-color: var(
--tridactyl-photon-colours-tone-7
) !important;
--tridactyl-photon-colours-in-content-table-header-background: var(
--tridactyl-photon-colours-accent-2
) !important;
--tridactyl-photon-colours-theme-selection-background: var(
--tridactyl-photon-colours-accent-2
) !important;
--tridactyl-photon-colours-theme-selection-background-hover: var(
--tridactyl-photon-colours-accent-1
) !important;
--tridactyl-photon-colours-in-content-category-header-background: var(
--tridactyl-photon-colours-tone-8
) !important;
--tridactyl-photon-colours-selected-icon-fill-color: var(
--tridactyl-photon-colours-tone-2
) !important;
--tridactyl-photon-colours-in-content-dark-header-background: var(
--tridactyl-photon-colours-tone-9
) !important;
--tridactyl-photon-colours-secure-connection-color: var(
--tridactyl-photon-colours-accent-1
);
--tridactyl-photon-colours-theme-sidebar-background: #1b1b1d !important;
--tridactyl-photon-colours-cm-background: var(
--tridactyl-photon-colours-tone-8
) !important;
--tridactyl-photon-colours-cm-selection: #353b48 !important;
--tridactyl-photon-colours-cm-marker: #555 !important;
--tridactyl-photon-colours-cm-linenumber: #58575c !important;
--tridactyl-photon-colours-cm-cursor: #fff !important;
--tridactyl-photon-colours-cm-active-line-background: rgba(
185,
215,
253,
0.15
) !important;
--tridactyl-photon-colours-cm-matching-bracket: rgba(
255,
255,
255,
0.25
) !important;
--tridactyl-photon-colours-cm-search-background: rgba(
24,
29,
32,
1
) !important;
--tridactyl-photon-colours-cm-red: #de7474 !important;
--tridactyl-photon-colours-start-indicator-for-updater-scripts: black;
--tridactyl-photon-colours-end-indicator-for-updater-scripts: black;
--tridactyl-photon-colours-dummy-variable-for-updater-scripys: black;
/* }}} */
--tridactyl-fg: var(--tridactyl-photon-colours-in-content-page-color);
--tridactyl-bg: var(--tridactyl-photon-colours-in-content-page-background);
--tridactyl-scrollbar-color: var(--tridactyl-photon-colours-tone-8)
var(--tridactyl-fg);
--tridactyl-cmdl-fg: var(--tridactyl-photon-colours-in-content-text-color);
--tridactyl-cmdl-bg: var(
--tridactyl-photon-colours-in-content-category-header-background
);
/* --tridactyl-header-first-bg: var(--tridactyl-photon-colours-in-content-category-header-background); */
/* --tridactyl-header-second-bg: var(--tridactyl-photon-colours-in-content-category-header-background); */
/* --tridactyl-header-third-bg: var(--tridactyl-header-first-bg); */
--tridactyl-header-first-bg: #333;
--tridactyl-header-second-bg: #222;
--tridactyl-header-third-bg: #111;
--tridactyl-cmplt-border-top: 1px solid
var(--tridactyl-photon-colours-in-content-category-header-background);
--tridactyl-url-fg: var(--tridactyl-photon-colours-code-green);
--tridactyl-url-bg: var(--tridactyl-bg);
--tridactyl-of-fg: var(--tridactyl-photon-colours-warning-color);
--tridactyl-of-bg: var(--tridactyl-photon-colours-warning-background-color);
/* Hints are not photon coloured. Feel free to experiment with that */
--tridactyl-hintspan-fg: white;
--tridactyl-hintspan-bg: #204e8a;
--tridactyl-hint-active-fg: #333;
--tridactyl-hint-active-bg: #88ff00;
--tridactyl-hint-active-outline: 1px solid #000;
--tridactyl-hint-bg: rgba(13, 31, 54, 0.25);
--tridactyl-hint-outline: 1px solid var(--tridactyl-hintspan-bg);
--tridactyl-highlight-box-bg: var(
--tridactyl-photon-colours-in-content-box-background
);
--tridactyl-highlight-box-fg: var(
--tridactyl-photon-colours-in-content-text-color
);
}
:root.TridactylOwnNamespace input[id^="spoiler"] ~ .spoiler {
border-color: var(--tridactyl-photon-colours-in-content-box-border-color);
}
:root.TridactylOwnNamespace {
scrollbar-color: var(--tridactyl-scrollbar-color);
scrollbar-width: thin;
}
:root.TridactylOwnNamespace a {
color: var(--tridactyl-photon-colours-accent-1);
}
}
@media (prefers-color-scheme: light) {
:root {
/* Generic */
--tridactyl-font-family: monospace;
--tridactyl-font-family-sans: sans-serif;
--tridactyl-font-size: 12pt;
--tridactyl-small-font-size: 12px;
--tridactyl-bg: white;
--tridactyl-fg: black;
--tridactyl-logo: url("moz-extension://__MSG_@@extension_id__/static/logo/Tridactyl_64px.png");
--tridactyl-scrollbar-color: auto;
/* Mode indicator */
--tridactyl-status-font-family: var(--tridactyl-font-family);
--tridactyl-status-font-size: var(--tridactyl-small-font-size);
--tridactyl-status-bg: var(--tridactyl-bg);
--tridactyl-status-fg: var(--tridactyl-fg);
--tridactyl-status-border: 1px lightgray solid;
--tridactyl-status-border-radius: 2px;
/* Search highlight */
--tridactyl-search-highlight-color: yellow;
/* Hinting */
/* Hint character tags */
--tridactyl-hintspan-font-family: var(--tridactyl-font-family-sans);
--tridactyl-hintspan-font-size: var(--tridactyl-small-font-size);
--tridactyl-hintspan-font-weight: bold;
--tridactyl-hintspan-fg: white;
--tridactyl-hintspan-bg: red;
--tridactyl-hintspan-border-color: ButtonShadow;
--tridactyl-hintspan-border-width: 0px;
--tridactyl-hintspan-border-style: solid;
--tridactyl-hintspan-js-background: hsla(0, 0%, 65%);
/* Element highlights */
--tridactyl-hint-active-fg: var(--tridactyl-fg);
--tridactyl-hint-active-bg: #88ff00;
--tridactyl-hint-active-outline: 1px solid #cc0000;
--tridactyl-hint-bg: rgba(255, 255, 0, 0.25);
--tridactyl-hint-outline: 1px solid #8f5902;
/* :viewsource */
--tridactyl-vs-bg: var(--tridactyl-bg);
--tridactyl-vs-fg: var(--tridactyl-fg);
--tridactyl-vs-font-family: var(--tridactyl-font-family);
/*commandline*/
--tridactyl-cmdl-bg: var(--tridactyl-bg);
--tridactyl-cmdl-fg: var(--tridactyl-fg);
--tridactyl-cmdl-line-height: 1.5;
--tridactyl-cmdl-font-family: monospace;
--tridactyl-cmdl-font-size: 9pt;
/*completions*/
--tridactyl-cmplt-option-height: 1.4em;
--tridactyl-cmplt-fg: var(--tridactyl-fg);
--tridactyl-cmplt-bg: var(--tridactyl-bg);
--tridactyl-cmplt-font-size: 10pt;
--tridactyl-cmplt-font-family: monospace;
/* i don't think 0.5px is redered */
--tridactyl-cmplt-border-top: 1px solid grey;
/* need a better way for naming variables
*
- .Properties for .HistoryCompletionSource table
- .Properties for .BmarkCompletionSource table
*/
/*sectionHeader*/
--tridactyl-header-first-bg: LightGray;
--tridactyl-header-second-bg: #ddd;
--tridactyl-header-third-bg: LightGray;
/* eg. What if I dont want liner-gradient as bg?
*
* :root .sectionHeader { background: blue; }
*
* ????
*/
--tridactyl-header-font-size: inherit;
--tridactyl-header-font-weight: bold;
/* i don't think 0.5px is redered */
--tridactyl-header-border-bottom: 1px solid bottom;
/*url style*/
--tridactyl-url-text-decoration: none;
--tridactyl-url-fg: #1f9947;
--tridactyl-url-bg: var(--tridactyl-bg);
--tridactyl-url-cursor: pointer;
/*option focused*/
--tridactyl-of-fg: var(--tridactyl-fg);
--tridactyl-of-bg: #ffec8b;
/*new tab spoiler box*/
--tridactyl-highlight-box-bg: #eee;
--tridactyl-highlight-box-fg: var(--tridactyl-fg);
--tridactyl-private-window-icon-url: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
--tridactyl-container-fingerprint-url: url("resource://usercontext-content/fingerprint.svg");
--tridactyl-container-briefcase-url: url("resource://usercontext-content/briefcase.svg");
--tridactyl-container-dollar-url: url("resource://usercontext-content/dollar.svg");
--tridactyl-container-cart-url: url("resource://usercontext-content/cart.svg");
--tridactyl-container-circle-url: url("resource://usercontext-content/circle.svg");
--tridactyl-container-gift-url: url("resource://usercontext-content/gift.svg");
--tridactyl-container-vacation-url: url("resource://usercontext-content/vacation.svg");
--tridactyl-container-food-url: url("resource://usercontext-content/food.svg");
--tridactyl-container-fruit-url: url("resource://usercontext-content/fruit.svg");
--tridactyl-container-pet-url: url("resource://usercontext-content/pet.svg");
--tridactyl-container-tree-url: url("resource://usercontext-content/tree.svg");
--tridactyl-container-chill-url: url("resource://usercontext-content/chill.svg");
--tridactyl-container-color-blue: #37adff;
--tridactyl-container-color-turquoise: #00c79a;
--tridactyl-container-color-green: #51cd00;
--tridactyl-container-color-yellow: #ffcb00;
--tridactyl-container-color-orange: #ff9f00;
--tridactyl-container-color-red: #ff613d;
--tridactyl-container-color-pink: #ff4bda;
--tridactyl-container-color-purple: #af51f5;
--tridactyl-externaledit-bg: var(--tridactyl-logo) no-repeat center;
}
}