mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-29 15:47:57 +02:00
Code Activity

Use the light-dark CSS function in the viewer (issue 17780)

Browse source 
This removes the need for (most) separate `@media (prefers-color-scheme: dark)` blocks when defining colors values, and also provides a simple way of forcing use of either the light or dark theme.

Please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark and https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

*NOTE:* To support this in older browsers, we utilize a [PostCSS plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function).
This commit is contained in:
Jonas Jenwald 2025-04-16 11:14:02 +02:00
parent 63e6566597
commit ae1cbc6a9e
15 changed files with 366 additions and 312 deletions
Download patch file Download diff file Expand all files Collapse all files

76
web/annotation_editor_layer_builder.css
View file

@ -230,33 +230,24 @@
.textLayer {
.editToolbar {
--editor-toolbar-delete-image: url(images/editor-toolbar-delete.svg);
--editor-toolbar-bg-color: #f0f0f4;
--editor-toolbar-bg-color: light-dark(#f0f0f4, #2b2a33);
--editor-toolbar-highlight-image: url(images/toolbarButton-editorHighlight.svg);
--editor-toolbar-fg-color: #2e2e56;
--editor-toolbar-fg-color: light-dark(#2e2e56, #fbfbfe);
--editor-toolbar-border-color: #8f8f9d;
--editor-toolbar-hover-border-color: var(--editor-toolbar-border-color);
--editor-toolbar-hover-bg-color: #e0e0e6;
--editor-toolbar-hover-bg-color: light-dark(#e0e0e6, #52525e);
--editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color);
--editor-toolbar-hover-outline: none;
--editor-toolbar-focus-outline-color: #0060df;
--editor-toolbar-focus-outline-color: light-dark(#0060df, #0df);
--editor-toolbar-shadow: 0 2px 6px 0 rgb(58 57 68 / 0.2);
--editor-toolbar-vert-offset: 6px;
--editor-toolbar-height: 28px;
--editor-toolbar-padding: 2px;
--alt-text-done-color: #2ac3a2;
--alt-text-warning-color: #0090ed;
--alt-text-done-color: light-dark(#2ac3a2, #54ffbd);
--alt-text-warning-color: light-dark(#0090ed, #80ebff);
--alt-text-hover-done-color: var(--alt-text-done-color);
--alt-text-hover-warning-color: var(--alt-text-warning-color);
@media (prefers-color-scheme: dark) {
--editor-toolbar-bg-color: #2b2a33;
--editor-toolbar-fg-color: #fbfbfe;
--editor-toolbar-hover-bg-color: #52525e;
--editor-toolbar-focus-outline-color: #0df;
--alt-text-done-color: #54ffbd;
--alt-text-warning-color: #80ebff;
}
@media screen and (forced-colors: active) {
--editor-toolbar-bg-color: ButtonFace;
--editor-toolbar-fg-color: ButtonText;
@ -466,16 +457,11 @@
word-wrap: anywhere;
&.show {
--alt-text-tooltip-bg: #f0f0f4;
--alt-text-tooltip-fg: #15141a;
--alt-text-tooltip-bg: light-dark(#f0f0f4, #1c1b22);
--alt-text-tooltip-fg: light-dark(#15141a, #fbfbfe);
--alt-text-tooltip-border: #8f8f9d;
--alt-text-tooltip-shadow: 0px 2px 6px 0px rgb(58 57 68 / 0.2);
@media (prefers-color-scheme: dark) {
--alt-text-tooltip-bg: #1c1b22;
--alt-text-tooltip-fg: #fbfbfe;
--alt-text-tooltip-shadow: 0px 2px 6px 0px #15141a;
}
--alt-text-tooltip-shadow: 0px 2px 6px 0px
light-dark(rgb(58 57 68 / 0.2), #15141a);
@media screen and (forced-colors: active) {
--alt-text-tooltip-bg: Canvas;
@ -583,15 +569,9 @@
}
.noAltTextBadge {
--no-alt-text-badge-border-color: #f0f0f4;
--no-alt-text-badge-bg-color: #cfcfd8;
--no-alt-text-badge-fg-color: #5b5b66;
@media (prefers-color-scheme: dark) {
--no-alt-text-badge-border-color: #52525e;
--no-alt-text-badge-bg-color: #fbfbfe;
--no-alt-text-badge-fg-color: #15141a;
}
--no-alt-text-badge-border-color: light-dark(#f0f0f4, #52525e);
--no-alt-text-badge-bg-color: light-dark(#cfcfd8, #fbfbfe);
--no-alt-text-badge-fg-color: light-dark(#5b5b66, #15141a);
@media screen and (forced-colors: active) {
--no-alt-text-badge-border-color: ButtonText;
@ -876,13 +856,9 @@
.dialog.newAltText {
--new-alt-text-ai-disclaimer-icon: url(images/altText_disclaimer.svg);
--new-alt-text-spinner-icon: url(images/altText_spinner.svg);
--preview-image-bg-color: #f0f0f4;
--preview-image-bg-color: light-dark(#f0f0f4, #2b2a33);
--preview-image-border: none;
@media (prefers-color-scheme: dark) {
--preview-image-bg-color: #2b2a33;
}
@media screen and (forced-colors: active) {
--preview-image-bg-color: ButtonFace;
--preview-image-border: 1px solid ButtonText;
@ -1059,15 +1035,9 @@
}
.colorPicker {
--hover-outline-color: #0250bb;
--selected-outline-color: #0060df;
--swatch-border-color: #cfcfd8;
@media (prefers-color-scheme: dark) {
--hover-outline-color: #80ebff;
--selected-outline-color: #aaf2ff;
--swatch-border-color: #52525e;
}
--hover-outline-color: light-dark(#0250bb, #80ebff);
--selected-outline-color: light-dark(#0060df, #aaf2ff);
--swatch-border-color: light-dark(#cfcfd8, #52525e);
@media screen and (forced-colors: active) {
--hover-outline-color: Highlight;
@ -1307,11 +1277,7 @@
align-items: center;
align-self: stretch;
--example-color: #bfbfc9;
@media (prefers-color-scheme: dark) {
--example-color: #80808e;
}
--example-color: light-dark(#bfbfc9, #80808e);
@media screen and (forced-colors: active) {
--example-color: CanvasText;
@ -1349,11 +1315,7 @@
align-self: stretch;
.divider {
--divider-color: #d7d7db;
@media (prefers-color-scheme: dark) {
--divider-color: #8f8f9d;
}
--divider-color: light-dark(#d7d7db, #8f8f9d);
@media screen and (forced-colors: active) {
--divider-color: CanvasText;

8
web/app.js
View file

@ -26,6 +26,7 @@ import {
AutoPrintRegExp,
CursorTool,
DEFAULT_SCALE_VALUE,
docStyle,
getActiveOrFocusedElement,
isValidRotation,
isValidScrollMode,
@ -206,14 +207,14 @@ const PDFViewerApplication = {
let mode;
switch (AppOptions.get("viewerCssTheme")) {
case 1:
mode = "is-light";
mode = "light";
break;
case 2:
mode = "is-dark";
mode = "dark";
break;
}
if (mode) {
document.documentElement.classList.add(mode);
docStyle.setProperty("color-scheme", mode);
}
if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) {
@ -365,6 +366,7 @@ const PDFViewerApplication = {
maxCanvasPixels: x => parseInt(x),
spreadModeOnLoad: x => parseInt(x),
supportsCaretBrowsingMode: x => x === "true",
viewerCssTheme: x => parseInt(x),
});
}

91
web/dialog.css
View file

@ -14,77 +14,62 @@
*/
.dialog {
--dialog-bg-color: white;
--dialog-border-color: white;
--dialog-shadow: 0 2px 14px 0 rgb(58 57 68 / 0.2);
--text-primary-color: #15141a;
--text-secondary-color: #5b5b66;
--dialog-bg-color: light-dark(white, #1c1b22);
--dialog-border-color: light-dark(white, #1c1b22);
--dialog-shadow: 0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a);
--text-primary-color: light-dark(#15141a, #fbfbfe);
--text-secondary-color: light-dark(#5b5b66, #cfcfd8);
--hover-filter: brightness(0.9);
--link-fg-color: #0060df;
--link-hover-fg-color: #0250bb;
--separator-color: #f0f0f4;
--link-fg-color: light-dark(#0060df, #0df);
--link-hover-fg-color: light-dark(#0250bb, #80ebff);
--separator-color: light-dark(#f0f0f4, #52525e);
--textarea-border-color: #8f8f9d;
--textarea-bg-color: white;
--textarea-bg-color: light-dark(white, #42414d);
--textarea-fg-color: var(--text-secondary-color);
--radio-bg-color: #f0f0f4;
--radio-checked-bg-color: #fbfbfe;
--radio-bg-color: light-dark(#f0f0f4, #2b2a33);
--radio-checked-bg-color: light-dark(#fbfbfe, #15141a);
--radio-border-color: #8f8f9d;
--radio-checked-border-color: #0060df;
--radio-checked-border-color: light-dark(#0060df, #0df);
--button-secondary-bg-color: rgb(21 20 26 / 0.07);
--button-secondary-bg-color: light-dark(
rgb(21 20 26 / 0.07),
rgb(251 251 254 / 0.07)
);
--button-secondary-fg-color: var(--text-primary-color);
--button-secondary-border-color: var(--button-secondary-bg-color);
--button-secondary-active-bg-color: rgb(21 20 26 / 0.21);
--button-secondary-active-bg-color: light-dark(
rgb(21 20 26 / 0.21),
rgb(251 251 254 / 0.21)
);
--button-secondary-active-fg-color: var(--button-secondary-fg-color);
--button-secondary-active-border-color: var(--button-secondary-bg-color);
--button-secondary-hover-bg-color: rgb(21 20 26 / 0.14);
--button-secondary-hover-bg-color: light-dark(
rgb(21 20 26 / 0.14),
rgb(251 251 254 / 0.14)
);
--button-secondary-hover-fg-color: var(--button-secondary-fg-color);
--button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
--button-primary-bg-color: #0060df;
--button-primary-fg-color: #fbfbfe;
--button-primary-bg-color: light-dark(#0060df, #0df);
--button-primary-fg-color: light-dark(#fbfbfe, #15141a);
--button-primary-border-color: var(--button-primary-bg-color);
--button-primary-active-bg-color: #054096;
--button-primary-active-bg-color: light-dark(#054096, #aaf2ff);
--button-primary-active-fg-color: var(--button-primary-fg-color);
--button-primary-active-border-color: var(--button-primary-active-bg-color);
--button-primary-hover-bg-color: #0250bb;
--button-primary-hover-bg-color: light-dark(#0250bb, #80ebff);
--button-primary-hover-fg-color: var(--button-primary-fg-color);
--button-primary-hover-border-color: var(--button-primary-hover-bg-color);
--button-disabled-bg-color: color-mix(in srgb, currentcolor, transparent 60%);
--button-disabled-fg-color: var(--button-disabled-bg-color);
--input-text-bg-color: white;
--input-text-bg-color: light-dark(white, #42414d);
--input-text-fg-color: var(--text-primary-color);
@media (prefers-color-scheme: dark) {
--dialog-bg-color: #1c1b22;
--dialog-border-color: #1c1b22;
--dialog-shadow: 0 2px 14px 0 #15141a;
--text-primary-color: #fbfbfe;
--text-secondary-color: #cfcfd8;
--hover-filter: brightness(1.4);
--link-fg-color: #0df;
--link-hover-fg-color: #80ebff;
--separator-color: #52525e;
--textarea-bg-color: #42414d;
--radio-bg-color: #2b2a33;
--radio-checked-bg-color: #15141a;
--radio-checked-border-color: #0df;
--button-secondary-bg-color: rgb(251 251 254 / 0.07);
--button-secondary-active-bg-color: rgb(251 251 254 / 0.21);
--button-secondary-hover-bg-color: rgb(251 251 254 / 0.14);
--button-primary-bg-color: #0df;
--button-primary-fg-color: #15141a;
--button-primary-active-bg-color: #aaf2ff;
--button-primary-hover-bg-color: #80ebff;
--input-text-bg-color: #42414d;
}
@media screen and (forced-colors: active) {
@ -329,18 +314,14 @@
}
.messageBar {
--message-bar-bg-color: #ffebcd;
--message-bar-fg-color: #15141a;
--message-bar-border-color: rgb(0 0 0 / 0.08);
--message-bar-bg-color: light-dark(#ffebcd, #5a3100);
--message-bar-fg-color: light-dark(#15141a, #fbfbfe);
--message-bar-border-color: light-dark(
rgb(0 0 0 / 0.08),
rgb(255 255 255 / 0.08)
);
--message-bar-icon: url(images/messageBar_warning.svg);
--message-bar-icon-color: #cd411e;
@media (prefers-color-scheme: dark) {
--message-bar-bg-color: #5a3100;
--message-bar-fg-color: #fbfbfe;
--message-bar-border-color: rgb(255 255 255 / 0.08);
--message-bar-icon-color: #e49c49;
}
--message-bar-icon-color: light-dark(#cd411e, #e49c49);
@media screen and (forced-colors: active) {
--message-bar-bg-color: HighlightText;

63
web/message_bar.css
View file

@ -19,15 +19,18 @@
--message-bar-close-button-color-hover: var(--text-primary-color);
--message-bar-close-button-border-radius: 4px;
--message-bar-close-button-border: none;
--message-bar-close-button-hover-bg-color: rgb(21 20 26 / 0.14);
--message-bar-close-button-active-bg-color: rgb(21 20 26 / 0.21);
--message-bar-close-button-focus-bg-color: rgb(21 20 26 / 0.07);
@media (prefers-color-scheme: dark) {
--message-bar-close-button-hover-bg-color: rgb(251 251 254 / 0.14);
--message-bar-close-button-active-bg-color: rgb(251 251 254 / 0.21);
--message-bar-close-button-focus-bg-color: rgb(251 251 254 / 0.07);
}
--message-bar-close-button-hover-bg-color: light-dark(
rgb(21 20 26 / 0.14),
rgb(251 251 254 / 0.14)
);
--message-bar-close-button-active-bg-color: light-dark(
rgb(21 20 26 / 0.21),
rgb(251 251 254 / 0.21)
);
--message-bar-close-button-focus-bg-color: light-dark(
rgb(21 20 26 / 0.07),
rgb(251 251 254 / 0.07)
);
@media screen and (forced-colors: active) {
--message-bar-close-button-color: ButtonText;
@ -127,38 +130,36 @@
}
#editorUndoBar {
--text-primary-color: #15141a;
--text-primary-color: light-dark(#15141a, #fbfbfe);
--message-bar-icon: url(images/messageBar_info.svg);
--message-bar-icon-color: #0060df;
--message-bar-bg-color: #deeafc;
--message-bar-icon-color: light-dark(#0060df, #73a7f3);
--message-bar-bg-color: light-dark(#deeafc, #003070);
--message-bar-fg-color: var(--text-primary-color);
--message-bar-border-color: rgb(0 0 0 / 0.08);
--message-bar-border-color: light-dark(
rgb(0 0 0 / 0.08),
rgb(255 255 255 / 0.08)
);
--undo-button-bg-color: rgb(21 20 26 / 0.07);
--undo-button-bg-color-hover: rgb(21 20 26 / 0.14);
--undo-button-bg-color-active: rgb(21 20 26 / 0.21);
--undo-button-bg-color: light-dark(
rgb(21 20 26 / 0.07),
rgb(255 255 255 / 0.08)
);
--undo-button-bg-color-hover: light-dark(
rgb(21 20 26 / 0.14),
rgb(255 255 255 / 0.14)
);
--undo-button-bg-color-active: light-dark(
rgb(21 20 26 / 0.21),
rgb(255 255 255 / 0.21)
);
--undo-button-border: 1px solid #0060df;
--undo-button-border: 1px solid light-dark(#0060df, #0df);
--undo-button-fg-color: var(--message-bar-fg-color);
--undo-button-fg-color-hover: var(--undo-button-fg-color);
--undo-button-fg-color-active: var(--undo-button-fg-color);
@media (prefers-color-scheme: dark) {
--text-primary-color: #fbfbfe;
--message-bar-icon-color: #73a7f3;
--message-bar-bg-color: #003070;
--message-bar-border-color: rgb(255 255 255 / 0.08);
--undo-button-bg-color: rgb(255 255 255 / 0.08);
--undo-button-bg-color-hover: rgb(255 255 255 / 0.14);
--undo-button-bg-color-active: rgb(255 255 255 / 0.21);
--undo-button-border: 1px solid #0df;
}
@media screen and (forced-colors: active) {
--text-primary-color: CanvasText;

8
web/pdf_viewer.css
View file

@ -21,19 +21,17 @@
@import url(annotation_editor_layer_builder.css);
:root {
color-scheme: light dark;
--viewer-container-height: 0;
--pdfViewer-padding-bottom: 0;
--page-margin: 1px auto -8px;
--page-border: 9px solid transparent;
--spreadHorizontalWrapped-margin-LR: -3.5px;
--loading-icon-delay: 400ms;
--focus-ring-color: #0060df;
--focus-ring-color: light-dark(#0060df, #0df);
--focus-ring-outline: 2px solid var(--focus-ring-color);
@media (prefers-color-scheme: dark) {
--focus-ring-color: #0df;
}
@media screen and (forced-colors: active) {
--pdfViewer-padding-bottom: 9px;
--page-margin: 8px auto -1px;

15
web/signature_manager.css
View file

@ -15,24 +15,17 @@
:root {
--clear-signature-button-icon: url(images/editor-toolbar-delete.svg);
--signature-bg: #f9f9fb;
--signature-hover-bg: #f0f0f4;
--signature-bg: light-dark(#f9f9fb, #2b2a33);
--signature-hover-bg: light-dark(#f0f0f4, var(--signature-bg));
--button-signature-bg: transparent;
--button-signature-color: var(--main-color);
--button-signature-active-bg: #cfcfd8;
--button-signature-active-bg: light-dark(#cfcfd8, #5b5b66);
--button-signature-active-border: none;
--button-signature-active-color: var(--button-signature-color);
--button-signature-border: none;
--button-signature-hover-bg: #e0e0e6;
--button-signature-hover-bg: light-dark(#e0e0e6, #52525e);
--button-signature-hover-color: var(--button-signature-color);
@media (prefers-color-scheme: dark) {
--signature-bg: #2b2a33;
--signature-hover-bg: var(--signature-bg);
--button-signature-active-bg: #5b5b66;
--button-signature-hover-bg: #52525e;
}
@media screen and (forced-colors: active) {
--signature-bg: HighlightText;
--signature-hover-bg: var(--signature-bg);

18
web/toggle_button.css
View file

@ -14,27 +14,19 @@
currentColor 21%,
transparent
);
--color-accent-primary: #0060df;
--color-accent-primary-hover: #0250bb;
--color-accent-primary-active: #054096;
--color-accent-primary: light-dark(#0060df, #0df);
--color-accent-primary-hover: light-dark(#0250bb, #80ebff);
--color-accent-primary-active: light-dark(#054096, #aaf2ff);
--border-radius-circle: 9999px;
--border-width: 1px;
--size-item-small: 16px;
--size-item-large: 32px;
--color-canvas: white;
--color-canvas: light-dark(white, #1c1b22);
--background-color-canvas: var(--color-canvas);
--border-color-interactive: #8f8f9d;
--border-color-interactive: light-dark(#8f8f9d, #f9f9fa);
--border-color-interactive-hover: var(--border-color-interactive);
--border-color-interactive-active: var(--border-color-interactive);
@media (prefers-color-scheme: dark) {
--color-accent-primary: #0df;
--color-accent-primary-hover: #80ebff;
--color-accent-primary-active: #aaf2ff;
--color-canvas: #1c1b22;
--border-color-interactive: #f9f9fa;
}
@media (forced-colors: active) {
--color-accent-primary: ButtonText;
--color-accent-primary-hover: SelectedItem;

48
web/viewer-geckoview.css
View file

@ -22,21 +22,24 @@
--toolbar-icon-opacity: 1;
--doorhanger-icon-opacity: 0.9;
--main-color: rgb(12 12 13);
--body-bg-color: rgb(212 212 215);
--scrollbar-color: auto;
--scrollbar-bg-color: auto;
--field-color: rgb(6 6 6);
--field-bg-color: rgb(255 255 255);
--field-border-color: rgb(187 187 188);
--doorhanger-bg-color: rgb(255 255 255);
--main-color: light-dark(rgb(12 12 13), rgb(249 249 250));
--body-bg-color: light-dark(rgb(212 212 215), rgb(42 42 46));
--scrollbar-color: light-dark(auto, rgb(121 121 123));
--scrollbar-bg-color: light-dark(auto, rgb(35 35 39));
--field-color: light-dark(rgb(6 6 6), rgb(250 250 250));
--field-bg-color: light-dark(rgb(255 255 255), rgb(64 64 68));
--field-border-color: light-dark(rgb(187 187 188), rgb(115 115 115));
--doorhanger-bg-color: light-dark(rgb(255 255 255), rgb(74 74 79));
--dialog-button-border: none;
--dialog-button-bg-color: rgb(12 12 13 / 0.1);
--dialog-button-hover-bg-color: rgb(12 12 13 / 0.3);
--dialog-button-bg-color: light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97));
--dialog-button-hover-bg-color: light-dark(
rgb(12 12 13 / 0.3),
rgb(115 115 115)
);
--toolbar-bg-color: #f9f9fb;
--toolbar-divider-color: #e0e0e6;
--toolbar-fg-color: #15141a;
--toolbar-bg-color: light-dark(#f9f9fb, #2b2a33);
--toolbar-divider-color: light-dark(#e0e0e6, #5b5b66);
--toolbar-fg-color: light-dark(#15141a, #fbfbfe);
--toolbar-height: 48px;
--toolbar-border-width: 1px;
@ -47,25 +50,6 @@
--dir-factor: -1;
}
@media (prefers-color-scheme: dark) {
:root {
--main-color: rgb(249 249 250);
--body-bg-color: rgb(42 42 46);
--scrollbar-color: rgb(121 121 123);
--scrollbar-bg-color: rgb(35 35 39);
--field-color: rgb(250 250 250);
--field-bg-color: rgb(64 64 68);
--field-border-color: rgb(115 115 115);
--doorhanger-bg-color: rgb(74 74 79);
--dialog-button-bg-color: rgb(92 92 97);
--dialog-button-hover-bg-color: rgb(115 115 115);
--toolbar-bg-color: #2b2a33;
--toolbar-divider-color: #5b5b66;
--toolbar-fg-color: #fbfbfe;
}
}
@media screen and (forced-colors: active) {
:root {
--dialog-button-border: 1px solid Highlight;

117
web/viewer.css
View file

@ -35,20 +35,23 @@
--doorhanger-icon-opacity: 0.9;
--doorhanger-height: 8px;
--main-color: rgb(12 12 13);
--body-bg-color: rgb(212 212 215);
--progressBar-color: rgb(10 132 255);
--progressBar-bg-color: rgb(221 221 222);
--progressBar-blend-color: rgb(116 177 239);
--scrollbar-color: auto;
--scrollbar-bg-color: auto;
--toolbar-icon-bg-color: rgb(0 0 0);
--toolbar-icon-hover-bg-color: rgb(0 0 0);
--main-color: light-dark(rgb(12 12 13), rgb(249 249 250));
--body-bg-color: light-dark(rgb(212 212 215), rgb(42 42 46));
--progressBar-color: light-dark(rgb(10 132 255), rgb(0 96 223));
--progressBar-bg-color: light-dark(rgb(221 221 222), rgb(40 40 43));
--progressBar-blend-color: light-dark(rgb(116 177 239), rgb(20 68 133));
--scrollbar-color: light-dark(auto, rgb(121 121 123));
--scrollbar-bg-color: light-dark(auto, rgb(35 35 39));
--toolbar-icon-bg-color: light-dark(rgb(0 0 0), rgb(255 255 255));
--toolbar-icon-hover-bg-color: light-dark(rgb(0 0 0), rgb(255 255 255));
--sidebar-narrow-bg-color: rgb(212 212 215 / 0.9);
--sidebar-toolbar-bg-color: rgb(245 246 247);
--toolbar-bg-color: rgb(249 249 250);
--toolbar-border-color: rgb(184 184 184);
--sidebar-narrow-bg-color: light-dark(
rgb(212 212 215 / 0.9),
rgb(42 42 46 / 0.9)
);
--sidebar-toolbar-bg-color: light-dark(rgb(245 246 247), rgb(50 50 52));
--toolbar-bg-color: light-dark(rgb(249 249 250), rgb(56 56 61));
--toolbar-border-color: light-dark(rgb(184 184 184), rgb(12 12 13));
--toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);
--toolbar-border-bottom: none;
--toolbarSidebar-box-shadow:
@ -56,30 +59,42 @@
0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
--toolbarSidebar-border-bottom: none;
--button-hover-color: color-mix(in srgb, currentColor 17%, transparent);
--toggled-btn-color: rgb(0 0 0);
--toggled-btn-color: light-dark(rgb(0 0 0), rgb(255 255 255));
--toggled-btn-bg-color: rgb(0 0 0 / 0.3);
--toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
--toggled-hover-btn-outline: none;
--dropdown-btn-bg-color: rgb(215 215 219);
--dropdown-btn-bg-color: light-dark(rgb(215 215 219), rgb(74 74 79));
--dropdown-btn-border: none;
--separator-color: rgb(0 0 0 / 0.3);
--field-color: rgb(6 6 6);
--field-bg-color: rgb(255 255 255);
--field-border-color: rgb(187 187 188);
--treeitem-color: rgb(0 0 0 / 0.8);
--treeitem-bg-color: rgb(0 0 0 / 0.15);
--treeitem-hover-color: rgb(0 0 0 / 0.9);
--treeitem-selected-color: rgb(0 0 0 / 0.9);
--treeitem-selected-bg-color: rgb(0 0 0 / 0.25);
--thumbnail-hover-color: rgb(0 0 0 / 0.1);
--thumbnail-selected-color: rgb(0 0 0 / 0.2);
--doorhanger-bg-color: rgb(255 255 255);
--doorhanger-border-color: rgb(12 12 13 / 0.2);
--doorhanger-hover-color: rgb(12 12 13);
--doorhanger-separator-color: rgb(222 222 222);
--field-color: light-dark(rgb(6 6 6), rgb(250 250 250));
--field-bg-color: light-dark(rgb(255 255 255), rgb(64 64 68));
--field-border-color: light-dark(rgb(187 187 188), rgb(115 115 115));
--treeitem-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8));
--treeitem-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15));
--treeitem-hover-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9));
--treeitem-selected-color: light-dark(
rgb(0 0 0 / 0.9),
rgb(255 255 255 / 0.9)
);
--treeitem-selected-bg-color: light-dark(
rgb(0 0 0 / 0.25),
rgb(255 255 255 / 0.25)
);
--thumbnail-hover-color: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
--thumbnail-selected-color: light-dark(
rgb(0 0 0 / 0.2),
rgb(255 255 255 / 0.2)
);
--doorhanger-bg-color: light-dark(rgb(255 255 255), #42414d);
--doorhanger-border-color: light-dark(rgb(12 12 13 / 0.2), rgb(39 39 43));
--doorhanger-hover-color: light-dark(rgb(12 12 13), rgb(249 249 250));
--doorhanger-separator-color: light-dark(rgb(222 222 222), rgb(92 92 97));
--dialog-button-border: none;
--dialog-button-bg-color: rgb(12 12 13 / 0.1);
--dialog-button-hover-bg-color: rgb(12 12 13 / 0.3);
--dialog-button-bg-color: light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97));
--dialog-button-hover-bg-color: light-dark(
rgb(12 12 13 / 0.3),
rgb(115 115 115)
);
--loading-icon: url(images/loading.svg);
--treeitem-expanded-icon: url(images/treeitem-expanded.svg);
@ -139,46 +154,6 @@
/*#endif*/
}
@media (prefers-color-scheme: dark) {
:root {
--main-color: rgb(249 249 250);
--body-bg-color: rgb(42 42 46);
--progressBar-color: rgb(0 96 223);
--progressBar-bg-color: rgb(40 40 43);
--progressBar-blend-color: rgb(20 68 133);
--scrollbar-color: rgb(121 121 123);
--scrollbar-bg-color: rgb(35 35 39);
--toolbar-icon-bg-color: rgb(255 255 255);
--toolbar-icon-hover-bg-color: rgb(255 255 255);
--sidebar-narrow-bg-color: rgb(42 42 46 / 0.9);
--sidebar-toolbar-bg-color: rgb(50 50 52);
--toolbar-bg-color: rgb(56 56 61);
--toolbar-border-color: rgb(12 12 13);
--toggled-btn-color: rgb(255 255 255);
--toggled-btn-bg-color: rgb(0 0 0 / 0.3);
--toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
--dropdown-btn-bg-color: rgb(74 74 79);
--separator-color: rgb(0 0 0 / 0.3);
--field-color: rgb(250 250 250);
--field-bg-color: rgb(64 64 68);
--field-border-color: rgb(115 115 115);
--treeitem-color: rgb(255 255 255 / 0.8);
--treeitem-bg-color: rgb(255 255 255 / 0.15);
--treeitem-hover-color: rgb(255 255 255 / 0.9);
--treeitem-selected-color: rgb(255 255 255 / 0.9);
--treeitem-selected-bg-color: rgb(255 255 255 / 0.25);
--thumbnail-hover-color: rgb(255 255 255 / 0.1);
--thumbnail-selected-color: rgb(255 255 255 / 0.2);
--doorhanger-bg-color: #42414d;
--doorhanger-border-color: rgb(39 39 43);
--doorhanger-hover-color: rgb(249 249 250);
--doorhanger-separator-color: rgb(92 92 97);
--dialog-button-bg-color: rgb(92 92 97);
--dialog-button-hover-bg-color: rgb(115 115 115);
}
}
@media screen and (forced-colors: active) {
:root {
--button-hover-color: Highlight;