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

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;