Colour scheme not correctly set

[The-Valeyard]

Bug Report

Current Behavior
FOF always sets the color-scheme meta tag to either light or to dark, this leads to styling bugs in certain situations with Chromium-based browsers.

Steps to Reproduce

1. Open Flarum in a Chromium browser (e.g. Chrome, Brave)
2. Go to "Settings"
3. Under theme Select "Automatic (based on browser or device settings)"
4. Refresh the browser or open a new tab
5. Open up a forum page

Expected Behavior
Scrollbars and form elements styling should always follow browser/device/user settings.

Screenshots

Additional Context
As a fallback where the color-scheme is not set Firefox automatically detects the colour scheme based on the background colour of the body element, this then leads to form controls and scrollbars styling taking either a light or dark look. Chromium browsers do not have a fall-back and require that you make the colour scheme explicit or it doesn't style the elements correctly.

The situation described above is not the only way to get the error - you can also load the page with a user selected "dark mode" and dynamically change it to light and everything will be wrong. You can also load the page with a user-selected "light mode" and dynamically change it to dark and everything will be wrong.

Solution
Always set the color-scheme meta tag to "light dark":

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

Additionally setting the CSS color-scheme property is required to support dynamically changing the page styling without reloading the page in Chromium browsers.

To forum.css add:

:root {
  color-scheme: light;
}

And to forum-dark.css add:

:root {
  color-scheme: dark;
}

[dsevillamartin]

To me it seems like just adding color-scheme to :root solves the issue - no need to make color-scheme be light dark all the time. The CSS property is supported in all major browsers as well, it seems.

I think I want to keep the current logic for the meta color-scheme to avoid a flash of white when CSS is loading with dark/auto theme enabled, for example.

Thanks for letting me know about the CSS property, though! I'll definitely add that soon.