Search: Input text is white on white on dark mode

[mhilbrunner]

Search: Input text is white on white on dark mode OS/browsers. It also seems the --readthedocs-search-color CSS var isn't actually set for us on https://docs.godotengine.org/en/latest, so this may be an issue on our end?

For now, I've disabled the search addon due to #419.

[rjwills28]

Also having this problem that the search input text is white and not visible in dark mode.

[ericholscher]

@humitos @zanderle This seems like something to prioritize if we can.

[humitos]

We don't currently support dark mode by default yet (e.g. it's not possible to set a CSS class to make search modal dark). However, we do have a bunch of --readthedocs-search-* variables already in the code, and we are planning to document this type of customization more. See readthedocs/readthedocs.org#11888

@mhilbrunner @rjwills28 If you are not able to make dark mode working properly with the current set of --readthedocs-search-* variables; what other values/variables you would need to change to make it work as you expected? That will help us to expose these variables to users so they can customize the look and feel.

[rjwills28]

Thanks for the reply @humitos - I was able to come up with a workaround for this issue but will also have a look at the --readthedocs-search-* variables to see if that is cleaner.

[ericholscher]

We're going to start a basic implementation of a dark mode here to start.

[agjohnson]

What I mentioned in the meeting is a mix of two patterns. We'd still use variable underneath, but we don't require theme maintainers or users to set all of these variables to achieve a dark mode.

@layer defaults {
  :root[data-theme="light"],
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --readthedocs-flyout-background-color: ...;
    --readthedocs-notification-background-color: ...;
    ...
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --readthedocs-flyout-background-color: ...;
    --readthedocs-notification-background-color: ...;
    ...
  }
}

Just as an example, this specifies the dark mode as an attribute on html. The individual tool would be responsible for setting this attribute at least to start. There are other selectors we could use here too, but the aim is to give reader user controllable dark mode, defaulting to light mode.

Using prefers-color-scheme alone is not enough as the underlying tool might not support dark mode. But we can use the color-scheme meta to trigger usage of prefers-color-scheme:

<meta name="color-scheme" content="dark light" />

For more info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#color-scheme

If color-scheme includes dark, that is the theme maintainer signaling support for light/dark mode, that most likely gives us permission to use prefers-color-scheme to automatically switch via a media query.