FEATURE: automatic dark mode

[pmusaraj]

This is a first step to adding automatic dark mode color theme switching. It's only a v1, the feature will be fine-tuned in the near future.

Here's what the PR does. First, a new SCSS file is added at color_definitions.scss that serves to output all SCSS variables as CSS custom properties. This file is compiled and included in the app as a separate stylesheet.

Next, the PR adds the default_dark_mode_color_scheme_id site setting, disabled by default and hidden for now. When a valid dark scheme id is set, the app loads a second stylesheet with the dark scheme's color definitions. When the browser/OS is in dark mode using (prefers-color-scheme: dark), the dark color scheme will apply.

Last but not least, the PR mass replaces SCSS color variables with CSS custom properties, so that automatic dark mode switching can happen when enabled.

[eviltrout]

I am going to trust the search/replace process here because there are 142 files changed and that's impossible to do by eye. It does look very clean and elegant though!

[davidtaylorhq]

When pulling this locally I see

ActionController::RoutingError (No route matches [GET] "/stylesheets/color_definitions_my%20dark&20scheme_7f691385c8d34e95bd5c737d05672f71da4fcdfb.css")

Possibly because my color scheme name has a space in it?

[pmusaraj]

Yes, because of the space. I'll fix.

[nlalonde]

With a new site I'm getting Couldn't find Theme with 'id'=-1

lib/stylesheet/manager.rb:

Theme.find(SiteSetting.default_theme_id).color_scheme || ColorScheme.base

[pmusaraj]

Thanks @nlalonde, should be fixed in 266c0c5.