diff --git a/gulpfile.mjs b/gulpfile.mjs index 60e0c3601..846223a21 100644 --- a/gulpfile.mjs +++ b/gulpfile.mjs @@ -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), ]) ) diff --git a/package-lock.json b/package-lock.json index 22ced23e6..e476c3160 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 27eee246d..aef7948ef 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/display/display_utils.js b/src/display/display_utils.js index c554f0661..34c259247 100644 --- a/src/display/display_utils.js +++ b/src/display/display_utils.js @@ -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; diff --git a/src/display/editor/signature.js b/src/display/editor/signature.js index 0737f701e..a206d7cb3 100644 --- a/src/display/editor/signature.js +++ b/src/display/editor/signature.js @@ -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, }); } diff --git a/test/integration/signature_editor_spec.mjs b/test/integration/signature_editor_spec.mjs index 95c3e2561..f424f9e18 100644 --- a/test/integration/signature_editor_spec.mjs +++ b/test/integration/signature_editor_spec.mjs @@ -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"); + }) + ); + }); + }); }); diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css index d6a5e6827..80c6f4320 100644 --- a/web/annotation_editor_layer_builder.css +++ b/web/annotation_editor_layer_builder.css @@ -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; diff --git a/web/app.js b/web/app.js index dfef5234a..597365a7b 100644 --- a/web/app.js +++ b/web/app.js @@ -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), }); } diff --git a/web/dialog.css b/web/dialog.css index 0e2ab1158..e505013c3 100644 --- a/web/dialog.css +++ b/web/dialog.css @@ -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; diff --git a/web/message_bar.css b/web/message_bar.css index d82b2970b..04df03bf3 100644 --- a/web/message_bar.css +++ b/web/message_bar.css @@ -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; diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css index d12767910..2a7a6ecfd 100644 --- a/web/pdf_viewer.css +++ b/web/pdf_viewer.css @@ -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; diff --git a/web/signature_manager.css b/web/signature_manager.css index d54ae8fd1..1c9570c5d 100644 --- a/web/signature_manager.css +++ b/web/signature_manager.css @@ -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); diff --git a/web/toggle_button.css b/web/toggle_button.css index 426f528ff..3b903769e 100644 --- a/web/toggle_button.css +++ b/web/toggle_button.css @@ -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; diff --git a/web/viewer-geckoview.css b/web/viewer-geckoview.css index 6c83f2abe..398f3151f 100644 --- a/web/viewer-geckoview.css +++ b/web/viewer-geckoview.css @@ -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; diff --git a/web/viewer.css b/web/viewer.css index af6c20b61..b1d9712ff 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -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;