Add dark mode to the browser

This commit is contained in:
ownedbywuigi 2026-04-02 15:45:15 +01:00
commit 14f1894779
17 changed files with 1153 additions and 4 deletions

View file

@ -54,3 +54,24 @@ th, td {
-moz-column-width: 20em;
-moz-column-gap: 3em;
}
@media (prefers-color-scheme: dark) {
html {
background: #1f2328;
color: #d6dde5;
}
body {
color: #f1f4f7;
border-color: #4b535d;
background: #2b3037;
}
a {
color: #75bbff;
}
a:visited {
color: #c69aff;
}
}

View file

@ -40,6 +40,42 @@
--in-content-table-header-background: #0095dd;
}
@media (prefers-color-scheme: dark) {
*|*:root {
--in-content-page-color: #d6dde5;
--in-content-page-background: #1f2328;
--in-content-text-color: #f1f4f7;
--in-content-selected-text: #ffffff;
--in-content-header-border-color: #3d434b;
--in-content-box-background: #2b3037;
--in-content-box-background-odd: #252a31;
--in-content-box-background-hover: #343a43;
--in-content-box-background-active: #3e454f;
--in-content-box-border-color: #4b535d;
--in-content-item-hover: rgba(0,149,221,0.35);
--in-content-item-selected: #1b84d6;
--in-content-border-highlight: #4aa3ff;
--in-content-border-focus: #4aa3ff;
--in-content-border-color: #4b535d;
--in-content-category-text: #a9b3bd;
--in-content-category-border-focus: 1px dotted #d6dde5;
--in-content-category-text-selected: #f2f6fa;
--in-content-category-background: #22272e;
--in-content-category-background-hover: #2d333b;
--in-content-category-background-active: #1b2026;
--in-content-tab-color: #d6dde5;
--in-content-link-color: #67b7ff;
--in-content-link-color-hover: #8cc9ff;
--in-content-link-color-active: #ffb566;
--in-content-link-color-visited: #c69aff;
--in-content-primary-button-background: #1b84d6;
--in-content-primary-button-background-hover: #1f90e8;
--in-content-primary-button-background-active: #166fb4;
--in-content-table-border-dark-color: #3d434b;
--in-content-table-header-background: #1b84d6;
}
}
html|html,
xul|page,
xul|window {

View file

@ -12,6 +12,7 @@
/* ::::: scrollbar ::::: */
scrollbar {
appearance: scrollbar-horizontal;
-moz-appearance: scrollbar-horizontal;
-moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
@ -32,6 +33,7 @@ scrollbar {
scrollbar[orient="vertical"]
{
appearance: scrollbar-vertical;
-moz-appearance: scrollbar-vertical;
}
@ -49,21 +51,25 @@ scrollbarbutton {
/* ::::: slider - a thumb is inside ::::: */
slider {
appearance: scrollbartrack-horizontal;
-moz-appearance: scrollbartrack-horizontal;
}
slider[orient="vertical"] {
appearance: scrollbartrack-vertical;
-moz-appearance: scrollbartrack-vertical;
}
/* ::::: thumb (horizontal) ::::: */
thumb {
appearance: scrollbarthumb-vertical;
-moz-appearance: scrollbarthumb-vertical;
min-height: 8px;
}
thumb[orient="horizontal"] {
appearance: scrollbarthumb-horizontal;
-moz-appearance: scrollbarthumb-horizontal;
min-width: 8px;
}
@ -95,6 +101,7 @@ scrollcorner {
/* ..... increment .... */
scrollbarbutton[type="increment"] {
appearance: scrollbarbutton-right;
-moz-appearance: scrollbarbutton-right;
background-image: url("chrome://global/skin/arrow/arrow-rit.gif")
}
@ -104,6 +111,7 @@ scrollbarbutton[type="increment"][disabled="true"] {
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
appearance: scrollbarbutton-down;
-moz-appearance: scrollbarbutton-down;
background-image: url("chrome://global/skin/arrow/arrow-dn.gif")
}
@ -115,6 +123,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"
/* ..... decrement .... */
scrollbarbutton[type="decrement"] {
appearance: scrollbarbutton-left;
-moz-appearance: scrollbarbutton-left;
background-image: url("chrome://global/skin/arrow/arrow-lft.gif")
}
@ -124,6 +133,7 @@ scrollbarbutton[type="decrement"][disabled="true"] {
}
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
appearance: scrollbarbutton-up;
-moz-appearance: scrollbarbutton-up;
background-image: url("chrome://global/skin/arrow/arrow-up.gif")
}
@ -132,6 +142,74 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
background-image: url("chrome://global/skin/arrow/arrow-up-dis.gif")
}
@media (prefers-color-scheme: dark) {
scrollbar,
scrollcorner {
background-image: none !important;
background-color: #2b2b2b !important;
}
slider {
appearance: none !important;
-moz-appearance: none !important;
background-image: none !important;
background-color: #2b2b2b !important;
}
thumb,
scrollbarbutton {
appearance: none !important;
border-color: #3f454c !important;
-moz-border-top-colors: #4a5058 #3f454c !important;
-moz-border-right-colors: #2f343a #262b30 !important;
-moz-border-bottom-colors: #2f343a #262b30 !important;
-moz-border-left-colors: #4a5058 #3f454c !important;
background-color: #5a5a5a !important;
}
scrollbarbutton[disabled="true"] {
background-color: #454b53 !important;
opacity: 0.75;
}
scrollbarbutton[type="increment"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23d7dce2' d='M6 4v8l5-4z'/></svg>") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23d7dce2' d='M4 6h8l-4 5z'/></svg>") !important;
}
scrollbarbutton[type="increment"][disabled="true"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23828a93' d='M6 4v8l5-4z'/></svg>") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="increment"][disabled="true"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23828a93' d='M4 6h8l-4 5z'/></svg>") !important;
}
scrollbarbutton[type="decrement"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23d7dce2' d='M10 4v8L5 8z'/></svg>") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23d7dce2' d='M4 10h8l-4-5z'/></svg>") !important;
}
scrollbarbutton[type="decrement"][disabled="true"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23828a93' d='M10 4v8L5 8z'/></svg>") !important;
}
scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23828a93' d='M4 10h8l-4-5z'/></svg>") !important;
}
thumb:hover,
scrollbarbutton:hover {
background-color: #6a6a6a !important;
}
}
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* ::::::::::::::::::::: MEDIA PRINT :::::::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
@ -139,6 +217,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
/* ::::: scrollbar ::::: */
html|div scrollbar {
appearance: scrollbar-horizontal;
-moz-appearance: scrollbar-horizontal;
-moz-binding: url("chrome://global/content/bindings/scrollbar.xml#scrollbar");
cursor: default;
@ -147,6 +226,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
html|div scrollbar[orient="vertical"]
{
appearance: scrollbar-vertical;
-moz-appearance: scrollbar-vertical;
}
@ -165,11 +245,13 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
/* ::::: thumb (horizontal) ::::: */
html|div thumb {
appearance: scrollbarthumb-vertical;
-moz-appearance: scrollbarthumb-vertical;
min-height: 8px;
}
html|div thumb[orient="horizontal"] {
appearance: scrollbarthumb-horizontal;
-moz-appearance: scrollbarthumb-horizontal;
min-width: 8px;
}
@ -193,6 +275,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
/* ..... increment .... */
html|div scrollbarbutton[type="increment"] {
appearance: scrollbarbutton-right;
-moz-appearance: scrollbarbutton-right;
background-image: url("chrome://global/skin/arrow/arrow-rit.gif")
}
@ -202,6 +285,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
}
html|div scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {
appearance: scrollbarbutton-down;
-moz-appearance: scrollbarbutton-down;
background-image: url("chrome://global/skin/arrow/arrow-dn.gif")
}
@ -213,6 +297,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
/* ..... decrement .... */
html|div scrollbarbutton[type="decrement"] {
appearance: scrollbarbutton-left;
-moz-appearance: scrollbarbutton-left;
background-image: url("chrome://global/skin/arrow/arrow-lft.gif")
}
@ -222,6 +307,7 @@ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"][disabled="true"
}
html|div scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {
appearance: scrollbarbutton-up;
-moz-appearance: scrollbarbutton-up;
background-image: url("chrome://global/skin/arrow/arrow-up.gif")
}