FIX: Set the correct state of the dark mode checkbox user preference (#31214)

This commit fixes a bug in the "Dark Mode" checkbox in the interface user
preferences where the checkbox state doesn't appear in the disabled
state if the user disables dark mode.

This happens because when rendering the checkbox, we check the relevant
user options field within the controller's `init` method, but at that
point in the controller's life cycle, the `user_option` object isn't
available. What we should do instead is move this check to the route's
`setupController` method where the `user_option` object is available and
we can set the correct state on the controller.

https://meta.discourse.org/t/-/349976 (private topic)

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

@@ -11,7 +11,11 @@ import {
 } from "discourse/lib/color-scheme-picker";
 import { propertyEqual } from "discourse/lib/computed";
 import discourseComputed from "discourse/lib/decorators";
-import { listThemes, setLocalTheme } from "discourse/lib/theme-selector";
+import {
+  currentThemeId,
+  listThemes,
+  setLocalTheme,
+} from "discourse/lib/theme-selector";
 import { setDefaultHomepage } from "discourse/lib/utilities";
 import { AUTO_DELETE_PREFERENCES } from "discourse/models/bookmark";
 import { i18n } from "discourse-i18n";
@@ -35,7 +39,7 @@ export default class InterfaceController extends Controller {
   @service session;
   @controller("preferences") preferencesController;
 
-  currentThemeId = -1;
+  currentThemeId = currentThemeId();
   previewingColorScheme = false;
   selectedDarkColorSchemeId = null;
   makeColorSchemeDefault = true;
@@ -52,10 +56,6 @@ export default class InterfaceController extends Controller {
   init() {
     super.init(...arguments);
     this.set("selectedDarkColorSchemeId", this.session.userDarkSchemeId);
-    this.set(
-      "enableDarkMode",
-      this.get("model.user_option.dark_scheme_id") === -1 ? false : true
-    );
     this.set("selectedColorSchemeId", this.getSelectedColorSchemeId());
   }
 

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

@@ -12,6 +12,7 @@ export default class PreferencesInterface extends RestrictedUserRoute {
         currentThemeId() === user.get("user_option.theme_ids")[0],
       makeTextSizeDefault:
         user.get("currentTextSize") === user.get("user_option.text_size"),
+      enableDarkMode: user.get("user_option.dark_scheme_id") !== -1,
     });
   }
 }

spec/system/page_objects/pages/user_preferences_interface.rb

@@ -20,6 +20,10 @@ module PageObjects
         self
       end
 
+      def dark_mode_checkbox
+        page.find('.dark-mode input[type="checkbox"]')
+      end
+
       def save_changes
         click_button "Save Changes"
         expect(page).to have_content(I18n.t("js.saved"))

spec/system/user_page/user_preferences_interface_spec.rb

@@ -61,4 +61,29 @@ describe "User preferences | Interface", type: :system do
       expect(dropdown).to have_no_option_value(UserOption::HOMEPAGES.key("new"))
     end
   end
+
+  describe "Color palette" do
+    context "when there's only 1 dark color palette" do
+      before do
+        dark = ColorScheme.find_by(base_scheme_id: "Dark")
+        ColorScheme.where.not(id: dark.id).destroy_all
+        user.user_option.update!(dark_scheme_id: dark.id, theme_ids: [SiteSetting.default_theme_id])
+      end
+
+      it "displays a checkbox for activating/deactivating the dark palette" do
+        user_preferences_interface_page.visit(user)
+
+        expect(user_preferences_interface_page.dark_mode_checkbox.checked?).to eq(true)
+
+        user_preferences_interface_page.dark_mode_checkbox.click
+        user_preferences_interface_page.save_changes
+
+        expect(user_preferences_interface_page.dark_mode_checkbox.checked?).to eq(false)
+
+        page.refresh
+
+        expect(user_preferences_interface_page.dark_mode_checkbox.checked?).to eq(false)
+      end
+    end
+  end
 end