FEATURE: User selectable color schemes (#10544)

app/assets/javascripts/admin/controllers/admin-customize-colors-show.js

@@ -72,6 +72,10 @@ export default Controller.extend({
       this.model.save();
     },
 
+    applyUserSelectable() {
+      this.model.updateUserSelectable(this.get("model.user_selectable"));
+    },
+
     destroy: function() {
       const model = this.model;
       return bootbox.confirm(

app/assets/javascripts/admin/models/color-scheme.js

@@ -107,6 +107,17 @@ const ColorScheme = EmberObject.extend({
     });
   },
 
+  updateUserSelectable(value) {
+    if (!this.id) return;
+
+    return ajax(`/admin/color_schemes/${this.id}.json`, {
+      data: JSON.stringify({ color_scheme: { user_selectable: value } }),
+      type: "PUT",
+      dataType: "json",
+      contentType: "application/json"
+    });
+  },
+
   destroy() {
     if (this.id) {
       return ajax(`/admin/color_schemes/${this.id}`, { type: "DELETE" });
@@ -129,6 +140,7 @@ ColorScheme.reopenClass({
             theme_id: colorScheme.theme_id,
             theme_name: colorScheme.theme_name,
             base_scheme_id: colorScheme.base_scheme_id,
+            user_selectable: colorScheme.user_selectable,
             colors: colorScheme.colors.map(c => {
               return ColorSchemeColor.create({
                 name: c.name,

app/assets/javascripts/admin/templates/customize-colors-show.hbs

@@ -22,9 +22,12 @@
         icon="far-clipboard"
         label="admin.customize.copy_to_clipboard"
       }}
+      <span class="saving {{unless model.savingStatus "hidden"}}">{{model.savingStatus}}</span>
       {{#if model.theme_id}}
-        {{i18n "admin.customize.theme_owner"}}
+        <span class="not-editable">
-        {{#link-to "adminCustomizeThemes.show" model.theme_id}}{{model.theme_name}}{{/link-to}}
+          {{i18n "admin.customize.theme_owner"}}
+          {{#link-to "adminCustomizeThemes.show" model.theme_id}}{{model.theme_name}}{{/link-to}}
+        </span>
       {{else}}
         {{d-button
           action=(action "destroy")
@@ -33,27 +36,29 @@
           label="admin.customize.delete"
         }}
       {{/if}}
-      <span class="saving {{unless model.savingStatus "hidden"}}">{{model.savingStatus}}</span>
     </div>
 
     <br>
 
     <div class="admin-controls">
-      <div class="search controls">
+      {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.color_scheme_user_selectable" checked=model.user_selectable}}
-        <label>
-          {{input type="checkbox" checked=onlyOverridden}}
-          {{i18n "admin.settings.show_overriden"}}
-        </label>
-      </div>
     </div>
 
     {{#if colors.length}}
       <table class="table colors">
         <thead>
           <tr>
-            <th></th>
+            <th>
+            </th>
             <th class="hex">{{i18n "admin.customize.color"}}</th>
-            <th></th>
+            <th class="overriden">
+              {{#unless model.theme_id}}
+                <label>
+                  {{input type="checkbox" checked=onlyOverridden}}
+                  {{i18n "admin.settings.show_overriden"}}
+                </label>
+              {{/unless}}
+            </th>
           </tr>
         </thead>
         <tbody>

app/assets/javascripts/discourse/app/controllers/preferences/interface.js

@@ -4,6 +4,11 @@ import Controller from "@ember/controller";
 import { setDefaultHomepage } from "discourse/lib/utilities";
 import discourseComputed from "discourse-common/utils/decorators";
 import { listThemes, setLocalTheme } from "discourse/lib/theme-selector";
+import {
+  listColorSchemes,
+  loadColorSchemeStylesheet,
+  updateColorSchemeCookie
+} from "discourse/lib/color-scheme-picker";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { reload } from "discourse/helpers/page-reloader";
 import {
@@ -12,6 +17,7 @@ import {
   iOSWithVisualViewport
 } from "discourse/lib/utilities";
 import { computed } from "@ember/object";
+import { reads } from "@ember/object/computed";
 
 const USER_HOMES = {
   1: "latest",
@@ -26,14 +32,25 @@ const TITLE_COUNT_MODES = ["notifications", "contextual"];
 
 export default Controller.extend({
   currentThemeId: -1,
+  previewingColorScheme: false,
+  selectedColorSchemeId: null,
+  selectedDarkColorSchemeId: null,
   preferencesController: inject("preferences"),
 
-  @discourseComputed("makeThemeDefault")
+  init() {
-  saveAttrNames(makeDefault) {
+    this._super(...arguments);
+
+    this.setProperties({
+      selectedColorSchemeId: this.session.userColorSchemeId,
+      selectedDarkColorSchemeId: this.session.userDarkSchemeId
+    });
+  },
+
+  @discourseComputed("makeThemeDefault", "makeColorSchemeDefault")
+  saveAttrNames(makeThemeDefault, makeColorSchemeDefault) {
     let attrs = [
       "locale",
       "external_links_in_new_tab",
-      "dark_scheme_id",
       "dynamic_favicon",
       "enable_quoting",
       "enable_defer",
@@ -47,10 +64,14 @@ export default Controller.extend({
       "skip_new_user_tips"
     ];
 
-    if (makeDefault) {
+    if (makeThemeDefault) {
       attrs.push("theme_ids");
     }
 
+    if (makeColorSchemeDefault) {
+      attrs.push("color_scheme_id");
+      attrs.push("dark_scheme_id");
+    }
     return attrs;
   },
 
@@ -71,6 +92,11 @@ export default Controller.extend({
     return JSON.parse(this.siteSettings.available_locales);
   },
 
+  @discourseComputed
+  defaultDarkSchemeId() {
+    return this.siteSettings.default_dark_mode_color_scheme_id;
+  },
+
   @discourseComputed
   textSizes() {
     return TEXT_SIZES.map(value => {
@@ -116,6 +142,16 @@ export default Controller.extend({
     }
   },
 
+  @discourseComputed
+  userSelectableColorSchemes() {
+    return listColorSchemes(this.site);
+  },
+
+  showColorSchemeSelector: reads("userSelectableColorSchemes.length"),
+  selectedColorSchemeNoneLabel: I18n.t(
+    "user.color_schemes.default_description"
+  ),
+
   @discourseComputed("model.user_option.theme_ids", "themeId")
   showThemeSetDefault(userOptionThemes, selectedTheme) {
     return !userOptionThemes || userOptionThemes[0] !== selectedTheme;
@@ -153,7 +189,23 @@ export default Controller.extend({
 
   @discourseComputed
   showDarkModeToggle() {
-    return this.siteSettings.default_dark_mode_color_scheme_id > 0;
+    return this.defaultDarkSchemeId > 0 && !this.showDarkColorSchemeSelector;
+  },
+
+  @discourseComputed
+  userSelectableDarkColorSchemes() {
+    return listColorSchemes(this.site, {
+      darkOnly: true
+    });
+  },
+
+  @discourseComputed("userSelectableDarkColorSchemes")
+  showDarkColorSchemeSelector(darkSchemes) {
+    // when a default dark scheme is set
+    // dropdown has two items (disable / use site default)
+    // but we show a checkbox in that case
+    const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
+    return darkSchemes && darkSchemes.length > minToShow;
   },
 
   enableDarkMode: computed({
@@ -178,10 +230,32 @@ export default Controller.extend({
         this.set("model.user_option.text_size", this.textSize);
       }
 
-      this.set(
+      if (this.makeColorSchemeDefault) {
-        "model.user_option.dark_scheme_id",
+        this.set(
-        this.enableDarkMode ? null : -1
+          "model.user_option.color_scheme_id",
-      );
+          this.selectedColorSchemeId
+        );
+      }
+
+      if (this.showDarkModeToggle) {
+        this.set(
+          "model.user_option.dark_scheme_id",
+          this.enableDarkMode ? null : -1
+        );
+      } else {
+        // if chosen dark scheme matches site dark scheme, no need to store
+        if (
+          this.defaultDarkSchemeId > 0 &&
+          this.selectedDarkColorSchemeId === this.defaultDarkSchemeId
+        ) {
+          this.set("model.user_option.dark_scheme_id", null);
+        } else {
+          this.set(
+            "model.user_option.dark_scheme_id",
+            this.selectedDarkColorSchemeId
+          );
+        }
+      }
 
       return this.model
         .save(this.saveAttrNames)
@@ -202,6 +276,24 @@ export default Controller.extend({
             this.model.updateTextSizeCookie(this.textSize);
           }
 
+          if (this.makeColorSchemeDefault) {
+            updateColorSchemeCookie(null);
+            updateColorSchemeCookie(null, { dark: true });
+          } else {
+            updateColorSchemeCookie(this.selectedColorSchemeId);
+
+            if (
+              this.defaultDarkSchemeId > 0 &&
+              this.selectedDarkColorSchemeId === this.defaultDarkSchemeId
+            ) {
+              updateColorSchemeCookie(null, { dark: true });
+            } else {
+              updateColorSchemeCookie(this.selectedDarkColorSchemeId, {
+                dark: true
+              });
+            }
+          }
+
           this.homeChanged();
 
           if (this.isiPad) {
@@ -236,6 +328,60 @@ export default Controller.extend({
       // Force refresh when leaving this screen
       this.session.requiresRefresh = true;
       this.set("textSize", newSize);
+    },
+
+    loadColorScheme(colorSchemeId) {
+      this.setProperties({
+        selectedColorSchemeId: colorSchemeId,
+        previewingColorScheme: true
+      });
+
+      if (colorSchemeId < 0) {
+        const defaultTheme = this.userSelectableThemes.findBy(
+          "id",
+          this.themeId
+        );
+
+        if (defaultTheme && defaultTheme.color_scheme_id) {
+          colorSchemeId = defaultTheme.color_scheme_id;
+        }
+      }
+      loadColorSchemeStylesheet(colorSchemeId, this.themeId);
+      if (this.selectedDarkColorSchemeId === -1) {
+        // set this same scheme for dark mode preview when dark scheme is disabled
+        loadColorSchemeStylesheet(colorSchemeId, this.themeId, true);
+      }
+    },
+
+    loadDarkColorScheme(colorSchemeId) {
+      this.setProperties({
+        selectedDarkColorSchemeId: colorSchemeId,
+        previewingColorScheme: true
+      });
+
+      if (colorSchemeId === -1) {
+        // load preview of regular scheme when dark scheme is disabled
+        loadColorSchemeStylesheet(
+          this.selectedColorSchemeId,
+          this.themeId,
+          true
+        );
+      } else {
+        loadColorSchemeStylesheet(colorSchemeId, this.themeId, true);
+      }
+    },
+
+    undoColorSchemePreview() {
+      this.setProperties({
+        selectedColorSchemeId: this.session.userColorSchemeId,
+        selectedDarkColorSchemeId: this.session.userDarkSchemeId,
+        previewingColorScheme: false
+      });
+      const darkStylesheet = document.querySelector("link#cs-preview-dark"),
+        lightStylesheet = document.querySelector("link#cs-preview-light");
+      if (darkStylesheet) darkStylesheet.remove();
+
+      if (lightStylesheet) lightStylesheet.remove();
     }
   }
 });

app/assets/javascripts/discourse/app/lib/color-scheme-picker.js

@@ -0,0 +1,88 @@
+import I18n from "I18n";
+import { ajax } from "discourse/lib/ajax";
+import cookie, { removeCookie } from "discourse/lib/cookie";
+
+export function listColorSchemes(site, options = {}) {
+  let schemes = site.get("user_color_schemes");
+
+  if (!schemes || !Array.isArray(schemes)) {
+    return null;
+  }
+
+  let results = [];
+
+  if (!options.darkOnly) {
+    schemes = schemes.sort((a, b) => Number(a.is_dark) - Number(b.is_dark));
+  }
+  schemes.forEach(s => {
+    if ((options.darkOnly && s.is_dark) || !options.darkOnly) {
+      results.push({
+        name: s.name,
+        id: s.id
+      });
+    }
+  });
+
+  if (options.darkOnly) {
+    const defaultDarkColorScheme = site.get("default_dark_color_scheme");
+    if (defaultDarkColorScheme) {
+      const existing = schemes.findBy("id", defaultDarkColorScheme.id);
+      if (!existing) {
+        results.unshift({
+          id: defaultDarkColorScheme.id,
+          name: `${defaultDarkColorScheme.name} ${I18n.t(
+            "user.color_schemes.default_dark_scheme"
+          )}`
+        });
+      }
+    }
+
+    results.unshift({
+      id: -1,
+      name: I18n.t("user.color_schemes.disable_dark_scheme")
+    });
+  }
+
+  return results.length === 0 ? null : results;
+}
+
+export function loadColorSchemeStylesheet(
+  colorSchemeId,
+  theme_id,
+  dark = false
+) {
+  const themeId = theme_id ? `/${theme_id}` : "";
+  ajax(`/color-scheme-stylesheet/${colorSchemeId}${themeId}.json`).then(
+    result => {
+      if (result && result.new_href) {
+        const elementId = dark ? "cs-preview-dark" : "cs-preview-light";
+        const existingElement = document.querySelector(`link#${elementId}`);
+        if (existingElement) {
+          existingElement.href = result.new_href;
+        } else {
+          let link = document.createElement("link");
+          link.href = result.new_href;
+          link.media = dark
+            ? "(prefers-color-scheme: dark)"
+            : "(prefers-color-scheme: light)";
+          link.rel = "stylesheet";
+          link.id = elementId;
+
+          document.body.appendChild(link);
+        }
+      }
+    }
+  );
+}
+
+export function updateColorSchemeCookie(id, options = {}) {
+  const cookieName = options.dark ? "dark_scheme_id" : "color_scheme_id";
+  if (id) {
+    cookie(cookieName, id, {
+      path: "/",
+      expires: 9999
+    });
+  } else {
+    removeCookie(cookieName, { path: "/", expires: 1 });
+  }
+}

app/assets/javascripts/discourse/app/lib/theme-selector.js

@@ -94,7 +94,11 @@ export function listThemes(site) {
   }
 
   themes.forEach(t => {
-    results.push({ name: t.name, id: t.theme_id });
+    results.push({
+      name: t.name,
+      id: t.theme_id,
+      color_scheme_id: t.color_scheme_id
+    });
   });
 
   return results.length === 0 ? null : results;

app/assets/javascripts/discourse/app/models/user.js

@@ -302,6 +302,7 @@ const User = RestModel.extend({
       "email_messages_level",
       "email_level",
       "email_previous_replies",
+      "color_scheme_id",
       "dark_scheme_id",
       "dynamic_favicon",
       "enable_quoting",

app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js

@@ -90,6 +90,9 @@ export default {
 
     session.highlightJsPath = setupData.highlightJsPath;
     session.svgSpritePath = setupData.svgSpritePath;
+    session.userColorSchemeId =
+      parseInt(setupData.userColorSchemeId, 10) || null;
+    session.userDarkSchemeId = parseInt(setupData.userDarkSchemeId, 10) || -1;
 
     if (isDevelopment()) {
       setIconList(setupData.svgIconList);

app/assets/javascripts/discourse/app/routes/preferences-interface.js

@@ -12,6 +12,7 @@ export default RestrictedUserRoute.extend({
       makeThemeDefault:
         !user.get("user_option.theme_ids") ||
         currentThemeId() === user.get("user_option.theme_ids")[0],
+      makeColorSchemeDefault: !user.get("user_option.color_scheme_id"),
       makeTextSizeDefault:
         user.get("currentTextSize") === user.get("user_option.text_size")
     });

app/assets/javascripts/discourse/app/templates/preferences/interface.hbs

@@ -20,6 +20,53 @@
   </div>
 {{/if}}
 
+{{#if showColorSchemeSelector}}
+  <div class="control-group color-scheme">
+    <label class="control-label">{{i18n "user.color_scheme"}}</label>
+    <div class="control-subgroup light-color-scheme">
+      {{#if showDarkColorSchemeSelector}}
+        <div class="instructions">{{i18n "user.color_schemes.regular" }}</div>
+      {{/if}}
+      <div class="controls">
+        {{combo-box
+                content=userSelectableColorSchemes
+                value=selectedColorSchemeId
+                onChange=(action "loadColorScheme")
+                options=(hash
+                  translatedNone=selectedColorSchemeNoneLabel
+                )
+
+              }}
+      </div>
+    </div>
+    {{#if showDarkColorSchemeSelector}}
+      <div class="control-subgroup dark-color-scheme">
+        <div class="instructions">{{i18n "user.color_schemes.dark" }}</div>
+        <div class="controls">
+          {{combo-box
+            content=userSelectableDarkColorSchemes
+            value=selectedDarkColorSchemeId
+            onChange=(action "loadDarkColorScheme")}}
+        </div>
+      </div>
+
+      <div class="instructions">
+        {{i18n "user.color_schemes.dark_instructions" }}
+      </div>
+    {{/if}}
+
+    {{#if previewingColorScheme}}
+      {{#if previewingColorScheme}}
+        {{d-button action=(action "undoColorSchemePreview") label="user.color_schemes.undo" icon="undo" class="btn-default btn-small undo-preview"}}
+      {{/if}}
+
+      <div class="controls color-scheme-checkbox">
+        {{preference-checkbox labelKey="user.color_scheme_default_on_all_devices" checked=makeColorSchemeDefault}}
+      </div>
+    {{/if}}
+  </div>
+{{/if}}
+
 {{#if showDarkModeToggle}}
   <div class="control-group dark-mode">
     <label class="control-label">{{i18n "user.dark_mode"}}</label>

app/assets/stylesheets/common/admin/customize.scss

@@ -179,6 +179,10 @@
         margin: 0 0.5em 0.5em 0;
       }
     }
+
+    &.color-scheme .admin-controls {
+      padding: 0.5em;
+    }
   }
   .add-component-button {
     vertical-align: middle;
@@ -486,10 +490,16 @@
   }
   .color-scheme {
     .controls {
+      display: flex;
+      align-items: center;
       button,
       a {
         margin-right: 10px;
       }
+
+      button.btn-danger {
+        margin-left: auto;
+      }
     }
   }
   .colors {
@@ -507,8 +517,8 @@
       margin-bottom: 0;
       margin-right: 6px;
     }
-    .hex {
+    th.overriden {
-      text-align: center;
+      text-align: right;
     }
     .color-input {
       display: flex;

app/assets/stylesheets/common/base/user.scss

@@ -656,6 +656,46 @@
   .save-theme-alert {
     font-size: $font-down-1;
   }
+
+  .control-subgroup {
+    float: left;
+    + .controls {
+      clear: both;
+      padding-top: 1em;
+    }
+  }
+
+  .light-color-scheme {
+    margin-right: 1em;
+  }
+
+  .instructions {
+    clear: both;
+    display: inline-block;
+    margin-top: 4px;
+  }
+
+  @mixin inactiveMode() {
+    color: var(--primary-medium);
+    .select-kit.combo-box .select-kit-header {
+      border-color: var(--primary-medium);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .light-color-scheme {
+      @include inactiveMode;
+    }
+  }
+  @media (prefers-color-scheme: light) {
+    .dark-color-scheme {
+      @include inactiveMode;
+    }
+  }
+
+  .undo-preview {
+    margin-bottom: 1em;
+  }
 }
 
 .paginated-topics-list {

app/assets/stylesheets/desktop/user.scss

@@ -247,11 +247,6 @@
   .user-chooser {
     width: 100%;
   }
-
-  .instructions {
-    display: inline-block;
-    margin-top: 4px;
-  }
 }
 
 .user-crawler {

app/controllers/admin/color_schemes_controller.rb

@@ -38,6 +38,6 @@ class Admin::ColorSchemesController < Admin::AdminController
   end
 
   def color_scheme_params
-    params.permit(color_scheme: [:base_scheme_id, :name, colors: [:name, :hex]])[:color_scheme]
+    params.permit(color_scheme: [:base_scheme_id, :name, :user_selectable, colors: [:name, :hex]])[:color_scheme]
   end
 end

app/controllers/stylesheets_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class StylesheetsController < ApplicationController
-  skip_before_action :preload_json, :redirect_to_login_if_required, :check_xhr, :verify_authenticity_token, only: [:show, :show_source_map]
+  skip_before_action :preload_json, :redirect_to_login_if_required, :check_xhr, :verify_authenticity_token, only: [:show, :show_source_map, :color_scheme]
 
   def show_source_map
     show_resource(source_map: true)
@@ -13,6 +13,13 @@ class StylesheetsController < ApplicationController
     show_resource
   end
 
+  def color_scheme
+    params.require("id")
+    params.permit("theme_id")
+
+    stylesheet = Stylesheet::Manager.color_scheme_stylesheet_details(params[:id], 'all', params[:theme_id])
+    render json: stylesheet
+  end
   protected
 
   def show_resource(source_map: false)
@@ -28,7 +35,7 @@ class StylesheetsController < ApplicationController
     if !Rails.env.production?
       # TODO add theme
       # calling this method ensures we have a cache for said target
-      # we hold of re-compilation till someone asks for asset
+      # we hold off re-compilation till someone asks for asset
       if target.include?("color_definitions")
         split_target, color_scheme_id = target.split(/_(-?[0-9]+)/)
         Stylesheet::Manager.color_scheme_stylesheet_link_tag(color_scheme_id)

app/helpers/application_helper.rb

@@ -402,6 +402,11 @@ module ApplicationHelper
   end
 
   def scheme_id
+    custom_user_scheme_id = cookies[:color_scheme_id] || current_user&.user_option&.color_scheme_id
+    if custom_user_scheme_id && ColorScheme.find_by_id(custom_user_scheme_id)
+      return custom_user_scheme_id
+    end
+
     return if theme_ids.blank?
     Theme
       .where(id: theme_ids.first)
@@ -409,6 +414,10 @@ module ApplicationHelper
       .first
   end
 
+  def dark_scheme_id
+    cookies[:dark_scheme_id] || current_user&.user_option&.dark_scheme_id || SiteSetting.default_dark_mode_color_scheme_id
+  end
+
   def current_homepage
     current_user&.user_option&.homepage || SiteSetting.anonymous_homepage
   end
@@ -454,9 +463,6 @@ module ApplicationHelper
     result = +""
     result << Stylesheet::Manager.color_scheme_stylesheet_link_tag(scheme_id, 'all', theme_ids)
 
-    user_dark_scheme_id = current_user&.user_option&.dark_scheme_id
-    dark_scheme_id =  user_dark_scheme_id || SiteSetting.default_dark_mode_color_scheme_id
-
     if dark_scheme_id != -1
       result << Stylesheet::Manager.color_scheme_stylesheet_link_tag(dark_scheme_id, '(prefers-color-scheme: dark)', theme_ids)
     end
@@ -489,7 +495,9 @@ module ApplicationHelper
       highlight_js_path: HighlightJs.path,
       svg_sprite_path: SvgSprite.path(theme_ids),
       enable_js_error_reporting: GlobalSetting.enable_js_error_reporting,
-      color_scheme_is_dark: dark_color_scheme?
+      color_scheme_is_dark: dark_color_scheme?,
+      user_color_scheme_id: scheme_id,
+      user_dark_scheme_id: dark_scheme_id
     }
 
     if Rails.env.development?

app/models/color_scheme.rb

@@ -131,8 +131,8 @@ class ColorScheme < ActiveRecord::Base
 
   before_save :bump_version
   after_save :publish_discourse_stylesheet
-  after_save :dump_hex_cache
+  after_save :dump_caches
-  after_destroy :dump_hex_cache
+  after_destroy :dump_caches
   belongs_to :theme
 
   validates_associated :color_scheme_colors
@@ -286,8 +286,9 @@ class ColorScheme < ActiveRecord::Base
     end
   end
 
-  def dump_hex_cache
+  def dump_caches
     self.class.hex_cache.clear
+    ApplicationSerializer.expire_cache_fragment!("user_color_schemes")
   end
 
   def bump_version
@@ -297,6 +298,8 @@ class ColorScheme < ActiveRecord::Base
   end
 
   def is_dark?
+    return if colors.empty?
+
     primary_b = brightness(colors_by_name["primary"].hex)
     secondary_b = brightness(colors_by_name["secondary"].hex)
 
@@ -314,12 +317,13 @@ end
 #
 # Table name: color_schemes
 #
-#  id             :integer          not null, primary key
+#  id              :integer          not null, primary key
-#  name           :string           not null
+#  name            :string           not null
-#  version        :integer          default(1), not null
+#  version         :integer          default(1), not null
-#  created_at     :datetime         not null
+#  created_at      :datetime         not null
-#  updated_at     :datetime         not null
+#  updated_at      :datetime         not null
-#  via_wizard     :boolean          default(FALSE), not null
+#  via_wizard      :boolean          default(FALSE), not null
-#  base_scheme_id :string
+#  base_scheme_id  :string
-#  theme_id       :integer
+#  theme_id        :integer
+#  user_selectable :boolean          default(FALSE), not null
 #

app/serializers/color_scheme_selectable_serializer.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class ColorSchemeSelectableSerializer < ApplicationSerializer
+  attributes :id, :name, :is_dark
+
+  def is_dark
+    object.is_dark?
+  end
+end

app/serializers/color_scheme_serializer.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class ColorSchemeSerializer < ApplicationSerializer
-  attributes :id, :name, :is_base, :base_scheme_id, :theme_id, :theme_name
+  attributes :id, :name, :is_base, :base_scheme_id, :theme_id, :theme_name, :user_selectable
   has_many :colors, serializer: ColorSchemeColorSerializer, embed: :objects
 
   def theme_name

app/serializers/site_serializer.rb

@@ -24,6 +24,8 @@ class SiteSerializer < ApplicationSerializer
     :wizard_required,
     :topic_featured_link_allowed_category_ids,
     :user_themes,
+    :user_color_schemes,
+    :default_dark_color_scheme,
     :censored_regexp,
     :shared_drafts_category_id,
     :custom_emoji_translation
@@ -40,12 +42,23 @@ class SiteSerializer < ApplicationSerializer
       Theme.where('id = :default OR user_selectable',
                     default: SiteSetting.default_theme_id)
         .order(:name)
-        .pluck(:id, :name)
+        .pluck(:id, :name, :color_scheme_id)
-        .map { |id, n| { theme_id: id, name: n, default: id == SiteSetting.default_theme_id } }
+        .map { |id, n, cs| { theme_id: id, name: n, default: id == SiteSetting.default_theme_id, color_scheme_id: cs } }
         .as_json
     end
   end
 
+  def user_color_schemes
+    cache_fragment("user_color_schemes") do
+      schemes = ColorScheme.where('user_selectable').order(:name)
+      ActiveModel::ArraySerializer.new(schemes, each_serializer: ColorSchemeSelectableSerializer).as_json
+    end
+  end
+
+  def default_dark_color_scheme
+    ColorScheme.find_by_id(SiteSetting.default_dark_mode_color_scheme_id).as_json
+  end
+
   def groups
     cache_anon_fragment("group_names") do
       object.groups.order(:name).pluck(:id, :name).map { |id, name| { id: id, name: name } }.as_json

app/serializers/user_option_serializer.rb

@@ -8,6 +8,7 @@ class UserOptionSerializer < ApplicationSerializer
              :email_level,
              :email_messages_level,
              :external_links_in_new_tab,
+             :color_scheme_id,
              :dark_scheme_id,
              :dynamic_favicon,
              :enable_quoting,

app/services/color_scheme_revisor.rb

@@ -13,8 +13,8 @@ class ColorSchemeRevisor
 
   def revise
     ColorScheme.transaction do
-
+      @color_scheme.name = @params[:name] if @params.has_key?(:name)
-      @color_scheme.name = @params[:name]    if @params.has_key?(:name)
+      @color_scheme.user_selectable = @params[:user_selectable] if @params.has_key?(:user_selectable)
       @color_scheme.base_scheme_id = @params[:base_scheme_id] if @params.has_key?(:base_scheme_id)
       has_colors = @params[:colors]
 
@@ -31,6 +31,7 @@ class ColorSchemeRevisor
 
       if has_colors ||
          @color_scheme.saved_change_to_name? ||
+         @color_scheme.will_save_change_to_user_selectable? ||
          @color_scheme.saved_change_to_base_scheme_id?
 
         @color_scheme.save

app/services/user_updater.rb

@@ -26,6 +26,7 @@ class UserUpdater
     :external_links_in_new_tab,
     :enable_quoting,
     :enable_defer,
+    :color_scheme_id,
     :dark_scheme_id,
     :dynamic_favicon,
     :automatically_unpin_topics,

config/locales/client.en.yml

@@ -935,6 +935,16 @@ en:
         not_first_time: "Not your first time?"
         skip_link: "Skip these tips"
       theme_default_on_all_devices: "Make this the default theme on all my devices"
+      color_scheme_default_on_all_devices: "Set default color scheme(s) on all my devices"
+      color_scheme: "Color Scheme"
+      color_schemes:
+        default_description: "Default"
+        disable_dark_scheme: "Same as regular"
+        dark_instructions: "You can preview the dark mode color scheme by toggling your device's dark mode."
+        undo: "Reset"
+        regular: "Regular"
+        dark: "Dark mode"
+        default_dark_scheme: "(site default)"
       dark_mode: "Dark Mode"
       dark_mode_enable: "Enable automatic dark mode color scheme"
       text_size_default_on_all_devices: "Make this the default text size on all my devices"
@@ -3886,6 +3896,7 @@ en:
           hide_unused_fields: "Hide unused fields"
           is_default: "Theme is enabled by default"
           user_selectable: "Theme can be selected by users"
+          color_scheme_user_selectable: "Color scheme can be selected by users"
           color_scheme: "Color Palette"
           default_light_scheme: "Light (default)"
           color_scheme_select: "Select colors to be used by theme"

config/routes.rb

@@ -518,6 +518,7 @@ Discourse::Application.routes.draw do
 
     get "stylesheets/:name.css.map" => "stylesheets#show_source_map", constraints: { name: /[-a-z0-9_]+/ }
     get "stylesheets/:name.css" => "stylesheets#show", constraints: { name: /[-a-z0-9_]+/ }
+    get "color-scheme-stylesheet/:id(/:theme_id)" => "stylesheets#color_scheme", constraints: { format: :json }
     get "theme-javascripts/:digest.js" => "theme_javascripts#show", constraints: { digest: /\h{40}/ }
 
     post "uploads/lookup-metadata" => "uploads#metadata"

db/migrate/20200819021210_add_user_selectable_column_to_color_schemes.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddUserSelectableColumnToColorSchemes < ActiveRecord::Migration[6.0]
+  def change
+    add_column :color_schemes, :user_selectable, :bool, null: false, default: false
+  end
+end

db/migrate/20200819203846_add_color_scheme_id_to_user_options.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddColorSchemeIdToUserOptions < ActiveRecord::Migration[6.0]
+  def change
+    add_column :user_options, :color_scheme_id, :integer
+  end
+end

spec/helpers/application_helper_spec.rb

@@ -374,11 +374,44 @@ describe ApplicationHelper do
       expect(cs_stylesheets).not_to include("(prefers-color-scheme: dark)")
     end
 
-    context "with a user option" do
+    context "custom light scheme" do
+      before do
+        @new_cs = Fabricate(:color_scheme, name: 'Flamboyant')
+        user.user_option.color_scheme_id = @new_cs.id
+        user.user_option.save!
+        helper.request.env[Auth::DefaultCurrentUserProvider::CURRENT_USER_KEY] = user
+      end
+
+      it "returns color scheme from user option value" do
+        color_stylesheets = helper.discourse_color_scheme_stylesheets
+        expect(color_stylesheets).to include("color_definitions_flamboyant")
+      end
+
+      it "returns color scheme from cookie value" do
+        cs = ColorScheme.where(name: "Dark").first
+        helper.request.cookies["color_scheme_id"] = cs.id
+
+        color_stylesheets = helper.discourse_color_scheme_stylesheets
+
+        expect(color_stylesheets).to include("color_definitions_dark")
+        expect(color_stylesheets).not_to include("color_definitions_flamboyant")
+      end
+
+      it "falls back to base scheme with invalid cookie value" do
+        helper.request.cookies["color_scheme_id"] = -50
+
+        color_stylesheets = helper.discourse_color_scheme_stylesheets
+        expect(color_stylesheets).not_to include("color_definitions_flamboyant")
+        expect(color_stylesheets).to include("color_definitions_base")
+      end
+    end
+
+    context "dark scheme with user option and/or cookies" do
       before do
         user.user_option.dark_scheme_id = -1
         user.user_option.save!
         helper.request.env[Auth::DefaultCurrentUserProvider::CURRENT_USER_KEY] = user
+        @new_cs = Fabricate(:color_scheme, name: 'Custom Color Scheme')
 
         SiteSetting.default_dark_mode_color_scheme_id = ColorScheme.where(name: "Dark").pluck(:id).first
       end
@@ -391,14 +424,28 @@ describe ApplicationHelper do
       end
 
       it "returns user-selected dark color scheme stylesheet" do
-        new_cs = Fabricate(:color_scheme, name: 'Custom Color Scheme')
+        user.user_option.update!(dark_scheme_id: @new_cs.id)
-        user.user_option.update!(dark_scheme_id: new_cs.id)
 
         color_stylesheets = helper.discourse_color_scheme_stylesheets
         expect(color_stylesheets).to include("(prefers-color-scheme: dark)")
         expect(color_stylesheets).to include("custom-color-scheme")
       end
 
+      it "respects cookie value over user option for dark color scheme" do
+        helper.request.cookies["dark_scheme_id"] = @new_cs.id
+
+        color_stylesheets = helper.discourse_color_scheme_stylesheets
+        expect(color_stylesheets).to include("(prefers-color-scheme: dark)")
+        expect(color_stylesheets).to include("custom-color-scheme")
+      end
+
+      it "returns no dark scheme with invalid cookie value" do
+        helper.request.cookies["dark_scheme_id"] = -10
+
+        color_stylesheets = helper.discourse_color_scheme_stylesheets
+        expect(color_stylesheets).not_to include("(prefers-color-scheme: dark)")
+      end
+
     end
   end
 

spec/models/color_scheme_spec.rb

@@ -96,5 +96,10 @@ describe ColorScheme do
       ColorSchemeRevisor.revise(scheme, colors: [{ name: 'primary', hex: 'F8F8F8' }, { name: 'secondary', hex: '232323' }])
       expect(scheme.is_dark?).to eq(true)
     end
+
+    it "does not break in scheme without colors" do
+      scheme = ColorScheme.create(name: "No Bueno")
+      expect(scheme.is_dark?).to eq(nil)
+    end
   end
 end

spec/models/site_spec.rb

@@ -11,8 +11,8 @@ describe Site do
     expected = Theme.where('id = :default OR user_selectable',
                     default: SiteSetting.default_theme_id)
       .order(:name)
-      .pluck(:id, :name)
+      .pluck(:id, :name, :color_scheme_id)
-      .map { |id, n| { "theme_id" => id, "name" => n, "default" => id == SiteSetting.default_theme_id } }
+      .map { |id, n, cs| { "theme_id" => id, "name" => n, "default" => id == SiteSetting.default_theme_id, "color_scheme_id" => cs } }
 
     expect(parsed["user_themes"]).to eq(expected)
   end

spec/requests/stylesheets_controller_spec.rb

@@ -57,4 +57,26 @@ describe StylesheetsController do
 
     expect(response.status).to eq(200)
   end
+
+  context "#color_scheme" do
+    it 'works as expected' do
+      scheme = ColorScheme.last
+      get "/color-scheme-stylesheet/#{scheme.id}.json"
+
+      expect(response.status).to eq(200)
+      json = JSON.parse(response.body)
+      expect(json["color_scheme_id"]).to eq(scheme.id)
+    end
+
+    it 'works with a theme parameter' do
+      scheme = ColorScheme.last
+      theme = Theme.last
+      get "/color-scheme-stylesheet/#{scheme.id}/#{theme.id}.json"
+
+      expect(response.status).to eq(200)
+      json = JSON.parse(response.body)
+      expect(json["color_scheme_id"]).to eq(scheme.id)
+    end
+
+  end
 end

spec/serializers/site_serializer_spec.rb

@@ -28,4 +28,33 @@ describe SiteSerializer do
     expect(categories[0][:notification_level]).to eq(0)
     expect(categories[-1][:notification_level]).to eq(1)
   end
+
+  it "includes user-selectable color schemes" do
+    scheme = ColorScheme.create_from_base(name: "Neutral", base_scheme_id: "Neutral")
+    scheme.user_selectable = true
+    scheme.save!
+
+    serialized = described_class.new(Site.new(guardian), scope: guardian, root: false).as_json
+    expect(serialized[:user_color_schemes].count).to eq (1)
+
+    dark_scheme = ColorScheme.create_from_base(name: "ADarkScheme", base_scheme_id: "Dark")
+    dark_scheme.user_selectable = true
+    dark_scheme.save!
+
+    serialized = described_class.new(Site.new(guardian), scope: guardian, root: false).as_json
+    expect(serialized[:user_color_schemes].count).to eq(2)
+    expect(serialized[:user_color_schemes][0][:is_dark]).to eq(true)
+  end
+
+  it "includes default dark mode scheme" do
+    scheme = ColorScheme.last
+    SiteSetting.default_dark_mode_color_scheme_id = scheme.id
+    serialized = described_class.new(Site.new(guardian), scope: guardian, root: false).as_json
+    default_dark_scheme =
+    expect(serialized[:default_dark_color_scheme]["name"]).to eq(scheme.name)
+
+    SiteSetting.default_dark_mode_color_scheme_id = -1
+    serialized = described_class.new(Site.new(guardian), scope: guardian, root: false).as_json
+    expect(serialized[:default_dark_color_scheme]).to eq(nil)
+  end
 end

spec/services/color_scheme_revisor_spec.rb

@@ -48,6 +48,14 @@ describe ColorSchemeRevisor do
       }.to_not change { color_scheme.reload.version }
       expect(color_scheme.colors.first.hex).to eq(color.hex)
     end
+
+    it "can change the user_selectable column" do
+      expect(color_scheme.user_selectable).to eq(false)
+
+      ColorSchemeRevisor.revise(color_scheme, { user_selectable: true })
+      expect(color_scheme.reload.user_selectable).to eq(true)
+    end
+
   end
 
 end

test/javascripts/acceptance/preferences-test.js

@@ -2,7 +2,6 @@ import I18n from "I18n";
 import { acceptance, updateCurrentUser } from "helpers/qunit-helpers";
 import selectKit from "helpers/select-kit-helper";
 import User from "discourse/models/user";
-import cookie, { removeCookie } from "discourse/lib/cookie";
 
 function preferencesPretender(server, helper) {
   server.post("/u/second_factors.json", () => {
@@ -122,51 +121,6 @@ QUnit.test("update some fields", async assert => {
   );
 });
 
-QUnit.test("font size change", async assert => {
-  removeCookie("text_size");
-
-  const savePreferences = async () => {
-    assert.ok(!exists(".saved"), "it hasn't been saved yet");
-    await click(".save-changes");
-    assert.ok(exists(".saved"), "it displays the saved message");
-    find(".saved").remove();
-  };
-
-  await visit("/u/eviltrout/preferences/interface");
-
-  // Live changes without reload
-  await selectKit(".text-size .combobox").expand();
-  await selectKit(".text-size .combobox").selectRowByValue("larger");
-  assert.ok(document.documentElement.classList.contains("text-size-larger"));
-
-  await selectKit(".text-size .combobox").expand();
-  await selectKit(".text-size .combobox").selectRowByValue("largest");
-  assert.ok(document.documentElement.classList.contains("text-size-largest"));
-
-  assert.equal(cookie("text_size"), null, "cookie is not set");
-
-  // Click save (by default this sets for all browsers, no cookie)
-  await savePreferences();
-
-  assert.equal(cookie("text_size"), null, "cookie is not set");
-
-  await selectKit(".text-size .combobox").expand();
-  await selectKit(".text-size .combobox").selectRowByValue("larger");
-  await click(".text-size input[type=checkbox]");
-
-  await savePreferences();
-
-  assert.equal(cookie("text_size"), "larger|1", "cookie is set");
-  await click(".text-size input[type=checkbox]");
-  await selectKit(".text-size .combobox").expand();
-  await selectKit(".text-size .combobox").selectRowByValue("largest");
-
-  await savePreferences();
-  assert.equal(cookie("text_size"), null, "cookie is removed");
-
-  removeCookie("text_size");
-});
-
 QUnit.test("username", async assert => {
   await visit("/u/eviltrout/preferences/username");
   assert.ok(exists("#change_username"), "it has the input element");
@@ -483,16 +437,3 @@ QUnit.test("can select an option from a dropdown", async assert => {
   await field.selectRowByValue("Cat");
   assert.equal(field.header().value(), "Cat", "it sets the value of the field");
 });
-
-acceptance("User Preferences disabling dark mode", {
-  loggedIn: true,
-  settings: { default_dark_mode_color_scheme_id: 1 }
-});
-
-QUnit.test("shows option to disable dark mode", async assert => {
-  await visit("/u/eviltrout/preferences/interface");
-  assert.ok(
-    $(".control-group.dark-mode").length,
-    "it has the option to disable dark mode"
-  );
-});

test/javascripts/acceptance/user-preferences-interface-test.js

@@ -0,0 +1,206 @@
+import { acceptance } from "helpers/qunit-helpers";
+import selectKit from "helpers/select-kit-helper";
+import Site from "discourse/models/site";
+import Session from "discourse/models/session";
+import cookie, { removeCookie } from "discourse/lib/cookie";
+
+acceptance("User Preferences - Interface", {
+  loggedIn: true
+});
+
+QUnit.test("font size change", async assert => {
+  removeCookie("text_size");
+
+  const savePreferences = async () => {
+    assert.ok(!exists(".saved"), "it hasn't been saved yet");
+    await click(".save-changes");
+    assert.ok(exists(".saved"), "it displays the saved message");
+    find(".saved").remove();
+  };
+
+  await visit("/u/eviltrout/preferences/interface");
+
+  // Live changes without reload
+  await selectKit(".text-size .combobox").expand();
+  await selectKit(".text-size .combobox").selectRowByValue("larger");
+  assert.ok(document.documentElement.classList.contains("text-size-larger"));
+
+  await selectKit(".text-size .combobox").expand();
+  await selectKit(".text-size .combobox").selectRowByValue("largest");
+  assert.ok(document.documentElement.classList.contains("text-size-largest"));
+
+  assert.equal(cookie("text_size"), null, "cookie is not set");
+
+  // Click save (by default this sets for all browsers, no cookie)
+  await savePreferences();
+
+  assert.equal(cookie("text_size"), null, "cookie is not set");
+
+  await selectKit(".text-size .combobox").expand();
+  await selectKit(".text-size .combobox").selectRowByValue("larger");
+  await click(".text-size input[type=checkbox]");
+
+  await savePreferences();
+
+  assert.equal(cookie("text_size"), "larger|1", "cookie is set");
+  await click(".text-size input[type=checkbox]");
+  await selectKit(".text-size .combobox").expand();
+  await selectKit(".text-size .combobox").selectRowByValue("largest");
+
+  await savePreferences();
+  assert.equal(cookie("text_size"), null, "cookie is removed");
+
+  removeCookie("text_size");
+});
+
+QUnit.test(
+  "does not show option to disable dark mode by default",
+  async assert => {
+    await visit("/u/eviltrout/preferences/interface");
+    assert.equal($(".control-group.dark-mode").length, 0);
+  }
+);
+
+QUnit.test("shows light/dark color scheme pickers", async assert => {
+  let site = Site.current();
+  site.set("user_color_schemes", [
+    { id: 2, name: "Cool Breeze" },
+    { id: 3, name: "Dark Night", is_dark: true }
+  ]);
+
+  await visit("/u/eviltrout/preferences/interface");
+  assert.ok($(".light-color-scheme").length, "has regular dropdown");
+  assert.ok($(".dark-color-scheme").length, "has dark color scheme dropdown");
+});
+
+function interfacePretender(server, helper) {
+  server.get("/color-scheme-stylesheet/2.json", () => {
+    return helper.response({
+      success: "OK"
+    });
+  });
+}
+
+acceptance("User Preferences Color Schemes (with default dark scheme)", {
+  loggedIn: true,
+  settings: { default_dark_mode_color_scheme_id: 1 },
+  pretend: interfacePretender
+});
+
+QUnit.test("show option to disable dark mode", async assert => {
+  await visit("/u/eviltrout/preferences/interface");
+
+  assert.ok(
+    $(".control-group.dark-mode").length,
+    "it has the option to disable dark mode"
+  );
+});
+
+QUnit.test("no color scheme picker by default", async assert => {
+  let site = Site.current();
+  site.set("user_color_schemes", []);
+
+  await visit("/u/eviltrout/preferences/interface");
+  assert.equal($(".control-group.color-scheme").length, 0);
+});
+
+QUnit.test("light color scheme picker", async assert => {
+  let site = Site.current();
+  site.set("user_color_schemes", [{ id: 2, name: "Cool Breeze" }]);
+
+  await visit("/u/eviltrout/preferences/interface");
+  assert.ok($(".light-color-scheme").length, "has regular picker dropdown");
+  assert.equal(
+    $(".dark-color-scheme").length,
+    0,
+    "does not have a dark color scheme picker"
+  );
+});
+
+QUnit.test("light and dark color scheme pickers", async assert => {
+  let site = Site.current();
+  let session = Session.current();
+  session.userDarkSchemeId = 1; // same as default set in site settings
+
+  site.set("default_dark_color_scheme", { id: 1, name: "Dark" });
+  site.set("user_color_schemes", [
+    { id: 2, name: "Cool Breeze" },
+    { id: 3, name: "Dark Night", is_dark: true }
+  ]);
+
+  const savePreferences = async () => {
+    assert.ok(!exists(".saved"), "it hasn't been saved yet");
+    await click(".save-changes");
+    assert.ok(exists(".saved"), "it displays the saved message");
+    find(".saved").remove();
+  };
+
+  await visit("/u/eviltrout/preferences/interface");
+  assert.ok($(".light-color-scheme").length, "has regular dropdown");
+  assert.ok($(".dark-color-scheme").length, "has dark color scheme dropdown");
+  assert.equal(
+    $(".dark-color-scheme .selected-name").data("value"),
+    session.userDarkSchemeId,
+    "sets site default as selected dark scheme"
+  );
+  assert.equal(
+    $(".control-group.dark-mode").length,
+    0,
+    "it does not show disable dark mode checkbox"
+  );
+
+  removeCookie("color_scheme_id");
+  removeCookie("dark_scheme_id");
+
+  await selectKit(".light-color-scheme .combobox").expand();
+  await selectKit(".light-color-scheme .combobox").selectRowByValue(2);
+  assert.equal(cookie("color_scheme_id"), null, "cookie is not set");
+  assert.ok(
+    exists(".color-scheme-checkbox input:checked"),
+    "defaults to storing values in user options"
+  );
+
+  await savePreferences();
+  assert.equal(cookie("color_scheme_id"), null, "cookie is unchanged");
+
+  // Switch to saving changes in cookies
+  await click(".color-scheme-checkbox input[type=checkbox]");
+  await savePreferences();
+  assert.equal(cookie("color_scheme_id"), 2, "cookie is set");
+
+  // dark scheme
+  await selectKit(".dark-color-scheme .combobox").expand();
+  assert.ok(
+    selectKit(".dark-color-scheme .combobox")
+      .rowByValue(1)
+      .exists(),
+    "default dark scheme is included"
+  );
+
+  await selectKit(".dark-color-scheme .combobox").selectRowByValue(-1);
+  assert.equal(
+    cookie("dark_scheme_id"),
+    null,
+    "cookie is not set before saving"
+  );
+
+  await savePreferences();
+  assert.equal(cookie("dark_scheme_id"), -1, "cookie is set");
+
+  await click("button.undo-preview");
+  assert.equal(
+    selectKit(".light-color-scheme .combobox")
+      .header()
+      .value(),
+    null,
+    "resets light scheme dropdown"
+  );
+
+  assert.equal(
+    selectKit(".dark-color-scheme .combobox")
+      .header()
+      .value(),
+    session.userDarkSchemeId,
+    "resets dark scheme dropdown"
+  );
+});