mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-28 23:28:16 +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

9
gulpfile.mjs
View file

@ -31,9 +31,9 @@ import Metalsmith from "metalsmith";
import ordered from "ordered-read-streams";
import path from "path";
import postcss from "gulp-postcss";
import postcssDarkThemeClass from "postcss-dark-theme-class";
import postcssDirPseudoClass from "postcss-dir-pseudo-class";
import postcssDiscardComments from "postcss-discard-comments";
import postcssLightDarkFunction from "@csstools/postcss-light-dark-function";
import postcssNesting from "postcss-nesting";
import { preprocess } from "./external/builder/builder.mjs";
import relative from "metalsmith-html-relative";
@ -1093,7 +1093,7 @@ function buildGeneric(defines, dir) {
postcssDirPseudoClass(),
discardCommentsCSS(),
postcssNesting(),
postcssDarkThemeClass(),
postcssLightDarkFunction({ preserve: true }),
autoprefixer(AUTOPREFIXER_CONFIG),
])
)
@ -1183,6 +1183,7 @@ function buildComponents(defines, dir) {
postcssDirPseudoClass(),
discardCommentsCSS(),
postcssNesting(),
postcssLightDarkFunction({ preserve: true }),
autoprefixer(AUTOPREFIXER_CONFIG),
])
)
@ -1428,7 +1429,6 @@ gulp.task(
.pipe(
postcss([
discardCommentsCSS(),
postcssDarkThemeClass(),
autoprefixer(MOZCENTRAL_AUTOPREFIXER_CONFIG),
])
)
@ -1439,7 +1439,6 @@ gulp.task(
.pipe(
postcss([
discardCommentsCSS(),
postcssDarkThemeClass(),
autoprefixer(MOZCENTRAL_AUTOPREFIXER_CONFIG),
])
)
@ -1536,7 +1535,7 @@ gulp.task(
postcssDirPseudoClass(),
discardCommentsCSS(),
postcssNesting(),
postcssDarkThemeClass(),
postcssLightDarkFunction({ preserve: true }),
autoprefixer(AUTOPREFIXER_CONFIG),
])
)

105
package-lock.json generated
View file

@ -10,6 +10,7 @@
"@babel/core": "^7.26.10",
"@babel/preset-env": "^7.26.9",
"@babel/runtime": "^7.27.0",
"@csstools/postcss-light-dark-function": "^2.0.7",
"@fluent/bundle": "^0.19.1",
"@fluent/dom": "^0.10.1",
"@metalsmith/layouts": "^3.0.0",
@ -44,7 +45,6 @@
"ordered-read-streams": "^2.0.0",
"pngjs": "^7.0.0",
"postcss": "^8.5.3",
"postcss-dark-theme-class": "^1.3.0",
"postcss-dir-pseudo-class": "^9.0.1",
"postcss-discard-comments": "^7.0.3",
"postcss-nesting": "^13.0.1",
@ -1737,6 +1737,84 @@
"@csstools/css-tokenizer": "^3.0.3"
}
},
"node_modules/@csstools/postcss-light-dark-function": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-2.0.7.tgz",
"integrity": "sha512-ZZ0rwlanYKOHekyIPaU+sVm3BEHCe+Ha0/px+bmHe62n0Uc1lL34vbwrLYn6ote8PHlsqzKeTQdIejQCJ05tfw==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"license": "MIT-0",
"dependencies": {
"@csstools/css-parser-algorithms": "^3.0.4",
"@csstools/css-tokenizer": "^3.0.3",
"@csstools/postcss-progressive-custom-properties": "^4.0.0",
"@csstools/utilities": "^2.0.0"
},
"engines": {
"node": ">=18"
},
"peerDependencies": {
"postcss": "^8.4"
}
},
"node_modules/@csstools/postcss-progressive-custom-properties": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-4.0.0.tgz",
"integrity": "sha512-XQPtROaQjomnvLUSy/bALTR5VCtTVUFwYs1SblvYgLSeTo2a/bMNwUwo2piXw5rTv/FEYiy5yPSXBqg9OKUx7Q==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"license": "MIT-0",
"dependencies": {
"postcss-value-parser": "^4.2.0"
},
"engines": {
"node": ">=18"
},
"peerDependencies": {
"postcss": "^8.4"
}
},
"node_modules/@csstools/utilities": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-2.0.0.tgz",
"integrity": "sha512-5VdOr0Z71u+Yp3ozOx8T11N703wIFGVRgOWbOZMKgglPJsWA54MRIoMNVMa7shUToIhx5J8vX4sOZgD2XiihiQ==",
"dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"license": "MIT-0",
"engines": {
"node": ">=18"
},
"peerDependencies": {
"postcss": "^8.4"
}
},
"node_modules/@dual-bundle/import-meta-resolve": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
@ -9457,31 +9535,6 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/postcss-dark-theme-class": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/postcss-dark-theme-class/-/postcss-dark-theme-class-1.3.0.tgz",
"integrity": "sha512-prap+7LDzkWUzf8yciQsZdPi+Fm0k699KBCubLu6n9P5HCTyKCpxRJILPhs/L9m5JLTA/7xrICApse+nk5Qkmw==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"postcss-value-parser": "^4.2.0"
},
"engines": {
"node": ">=18.0"
},
"peerDependencies": {
"postcss": "^8.2.14"
}
},
"node_modules/postcss-dir-pseudo-class": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-9.0.1.tgz",

2
package.json
View file

@ -5,6 +5,7 @@
"@babel/core": "^7.26.10",
"@babel/preset-env": "^7.26.9",
"@babel/runtime": "^7.27.0",
"@csstools/postcss-light-dark-function": "^2.0.7",
"@fluent/bundle": "^0.19.1",
"@fluent/dom": "^0.10.1",
"@metalsmith/layouts": "^3.0.0",
@ -39,7 +40,6 @@
"ordered-read-streams": "^2.0.0",
"pngjs": "^7.0.0",
"postcss": "^8.5.3",
"postcss-dark-theme-class": "^1.3.0",
"postcss-dir-pseudo-class": "^9.0.1",
"postcss-discard-comments": "^7.0.3",
"postcss-nesting": "^13.0.1",

2
src/display/display_utils.js
View file

@ -562,6 +562,8 @@ function getRGB(color) {
function getColorValues(colors) {
const span = document.createElement("span");
span.style.visibility = "hidden";
// NOTE: The following does *not* affect `forced-colors: active` mode.
span.style.colorScheme = "only light";
document.body.append(span);
for (const name of colors.keys()) {
span.style.color = name;

4
src/display/editor/signature.js
View file

@ -26,7 +26,7 @@ class SignatureOptions extends DrawingOptions {
super();
super.updateProperties({
fill: "CanvasText",
fill: AnnotationEditor._defaultLineColor,
"stroke-width": 0,
});
}
@ -43,7 +43,7 @@ class DrawnSignatureOptions extends InkDrawingOptions {
super(viewerParameters);
super.updateProperties({
stroke: "CanvasText",
stroke: AnnotationEditor._defaultLineColor,
"stroke-width": 1,
});
}

112
test/integration/signature_editor_spec.mjs
View file

@ -471,4 +471,116 @@ describe("Signature Editor", () => {
);
});
});
describe("viewerCssTheme (light)", () => {
let pages;
beforeEach(async () => {
pages = await loadAndWait(
"empty.pdf",
".annotationEditorLayer",
null,
null,
{ viewerCssTheme: "1" }
);
});
afterEach(async () => {
await closePages(pages);
});
it("must check that the signature has the correct color with the light theme", async () => {
await Promise.all(
pages.map(async ([_, page]) => {
const colorTheme = await page.evaluate(() => {
const html = document.querySelector("html");
const style = getComputedStyle(html);
return style.getPropertyValue("color-scheme");
});
expect(colorTheme).toEqual("light");
await switchToSignature(page);
await page.click("#editorSignatureAddSignature");
await page.waitForSelector("#addSignatureDialog", {
visible: true,
});
await page.type("#addSignatureTypeInput", "Should be black.");
await page.waitForSelector(`${addButtonSelector}:not(:disabled)`);
await page.click("#addSignatureAddButton");
const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector, { visible: true });
await page.waitForSelector(
`.canvasWrapper > svg use[href="#path_p1_0"]`,
{ visible: true }
);
const color = await page.evaluate(() => {
const use = document.querySelector(
`.canvasWrapper > svg use[href="#path_p1_0"]`
);
return use.parentNode.getAttribute("fill");
});
expect(color).toEqual("#000000");
})
);
});
});
describe("viewerCssTheme (dark)", () => {
let pages;
beforeEach(async () => {
pages = await loadAndWait(
"empty.pdf",
".annotationEditorLayer",
null,
null,
{ viewerCssTheme: "2" }
);
});
afterEach(async () => {
await closePages(pages);
});
it("must check that the signature has the correct color with the dark theme", async () => {
await Promise.all(
pages.map(async ([_, page]) => {
const colorTheme = await page.evaluate(() => {
const html = document.querySelector("html");
const style = getComputedStyle(html);
return style.getPropertyValue("color-scheme");
});
expect(colorTheme).toEqual("dark");
await switchToSignature(page);
await page.click("#editorSignatureAddSignature");
await page.waitForSelector("#addSignatureDialog", {
visible: true,
});
await page.type("#addSignatureTypeInput", "Should be black.");
await page.waitForSelector(`${addButtonSelector}:not(:disabled)`);
await page.click("#addSignatureAddButton");
const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector, { visible: true });
await page.waitForSelector(
`.canvasWrapper > svg use[href="#path_p1_0"]`,
{ visible: true }
);
const color = await page.evaluate(() => {
const use = document.querySelector(
`.canvasWrapper > svg use[href="#path_p1_0"]`
);
return use.parentNode.getAttribute("fill");
});
expect(color).toEqual("#000000");
})
);
});
});
});

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;