Enhancing dark-mode themes with color-scheme implementation in CSS

[GiorgioReale]

Problem

When mdBook is displayed with a dark theme, some elements of the browser remain rendered in a light theme, which is unfortunate since most browsers support the implementation of color-scheme: light | dark; in CSS.

Example:
Currently, in the dark theme, the scrollbars are displayed in a light color.

However, it would be sufficient to implement color-scheme: dark; on the html tag to make them dark for browsers that support it (e.g., Chrome or Edge - not Firefox).

Proposed Solution

To resolve these issues, the following two steps can be taken:

1. Add the following CSS rules for each theme class in the src/theme/css/variables.css file:

.coal {
  --color-scheme: dark;
}

.navy {
  --color-scheme: dark;
}

.ayu {
  --color-scheme: dark;
}

/* For completeness, declare the rule also for light themes. */
.light {
  --color-scheme: light;
}

.rust {
  --color-scheme: light;
}

2. Add the following CSS rule for :root in the src/theme/css/general.css file:

:root {
  color-scheme: var(--color-scheme);
}

Notes

No response

[ehuss]

Sounds like a good idea to me, do you want to open a PR to fix it?

[GiorgioReale]

@ehuss sure, i can open a pull request to fix it in the next few hours.