frontend/dark-mode: update darkreader, improve config, remove unused config param grayscale, refactor code

haraldschilly · haraldschilly · commit 5697cf983c9a · 2025-10-03T14:54:19.000+02:00
diff --git a/src/packages/frontend/account/dark-mode.ts b/src/packages/frontend/account/dark-mode.ts
@@ -3,23 +3,21 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { throttle, isEqual } from "lodash";
+import { throttle, isEqual, debounce } from "lodash";
+
+import { DARK_MODE_DEFAULTS } from "@cocalc/util/db-schema/accounts";
 import { AccountStore } from "./store";
 
-export const dark_mode_mins = {
-  brightness: 20,
-  contrast: 20,
+export const DARK_MODE_KEYS = ["brightness", "contrast", "sepia"] as const;
+
+type Config = Record<(typeof DARK_MODE_KEYS)[number], number>;
+
+export const DARK_MODE_MINS: Config = {
+  brightness: 30,
+  contrast: 30,
   sepia: 0,
-  grayscale: 0,
 } as const;
 
-interface Config {
-  brightness: number;
-  contrast: number;
-  sepia: number;
-  grayscale: number;
-}
-
 // Returns number between 0 and 100.
 function to_number(x: any, default_value: number): number {
   if (x == null) return default_value;
@@ -44,25 +42,17 @@ export function get_dark_mode_config(other_settings?: {
   dark_mode_brightness?: number;
   dark_mode_contrast?: number;
   dark_mode_sepia?: number;
-  dark_mode_grayscale?: number;
 }): Config {
-  const brightness = Math.max(
-    dark_mode_mins.brightness,
-    to_number(other_settings?.dark_mode_brightness, 100),
-  );
-  const contrast = Math.max(
-    dark_mode_mins.contrast,
-    to_number(other_settings?.dark_mode_contrast, 90),
-  );
-  const sepia = to_number(
-    other_settings?.dark_mode_sepia,
-    dark_mode_mins.sepia,
-  );
-  const grayscale = to_number(
-    other_settings?.dark_mode_grayscale,
-    dark_mode_mins.grayscale,
-  );
-  return { brightness, contrast, sepia, grayscale };
+  const config = {} as Config;
+
+  for (const key of DARK_MODE_KEYS) {
+    config[key] = Math.max(
+      DARK_MODE_MINS[key],
+      to_number(other_settings?.[`dark_mode_${key}`], DARK_MODE_DEFAULTS[key]),
+    );
+  }
+
+  return config;
 }
 
 let currentDarkMode: boolean = false;
@@ -71,7 +61,7 @@ let last_config: Config | undefined = undefined;
 export function init_dark_mode(account_store: AccountStore): void {
   account_store.on(
     "change",
-    throttle(async () => {
+    debounce(async () => {
       const dark_mode = !!account_store.getIn(["other_settings", "dark_mode"]);
       currentDarkMode = dark_mode;
       const config = get_dark_mode_config(
@@ -87,11 +77,12 @@ export function init_dark_mode(account_store: AccountStore): void {
       last_dark_mode = dark_mode;
       last_config = config;
       if (dark_mode) {
+        disable();
         enable(config);
       } else {
         disable();
       }
-    }, 3000),
+    }, 1000, {trailing: true, leading: false}),
   );
 }
 
diff --git a/src/packages/frontend/account/other-settings.tsx b/src/packages/frontend/account/other-settings.tsx
@@ -3,9 +3,11 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Card, InputNumber } from "antd";
+import { Button, Card, Slider } from "antd";
+import { debounce } from "lodash";
 import { Map } from "immutable";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useMemo } from "react";
+import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
 import { Checkbox, Panel } from "@cocalc/frontend/antd-bootstrap";
 import { Rendered, redux, useTypedRedux } from "@cocalc/frontend/app-framework";
@@ -41,13 +43,33 @@ import track from "@cocalc/frontend/user-tracking";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { DEFAULT_NEW_FILENAMES, NEW_FILENAMES } from "@cocalc/util/db-schema";
 import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
-import { dark_mode_mins, get_dark_mode_config } from "./dark-mode";
+import {
+  DARK_MODE_KEYS,
+  DARK_MODE_MINS,
+  get_dark_mode_config,
+} from "./dark-mode";
+import { DARK_MODE_DEFAULTS } from "@cocalc/util/db-schema/accounts";
 import { I18NSelector, I18N_MESSAGE, I18N_TITLE } from "./i18n-selector";
 import Messages from "./messages";
 import Tours from "./tours";
 import { useLanguageModelSetting } from "./useLanguageModelSetting";
 import { UserDefinedLLMComponent } from "./user-defined-llm";
 
+const DARK_MODE_LABELS = defineMessages({
+  brightness: {
+    id: "account.other-settings.theme.dark_mode.brightness",
+    defaultMessage: "Brightness",
+  },
+  contrast: {
+    id: "account.other-settings.theme.dark_mode.contrast",
+    defaultMessage: "Contrast",
+  },
+  sepia: {
+    id: "account.other-settings.theme.dark_mode.sepia",
+    defaultMessage: "Sepia",
+  },
+});
+
 // See https://github.com/sagemathinc/cocalc/issues/5620
 // There are weird bugs with relying only on mathjax, whereas our
 // implementation of katex with a fallback to mathjax works very well.
@@ -79,6 +101,17 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
     redux.getActions("account").set_other_settings(name, value);
   }
 
+  // Debounced version for dark mode sliders to reduce CPU usage
+  const on_change_dark_mode = useMemo(
+    () =>
+      debounce(
+        (name: string, value: any) => on_change(name, value),
+        50,
+        { trailing: true, leading: false }
+      ),
+    []
+  );
+
   function toggle_global_banner(val: boolean): void {
     if (val) {
       // this must be "null", not "undefined" – otherwise the data isn't stored in the DB.
@@ -363,7 +396,6 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
   function render_dark_mode(): Rendered {
     const checked = !!props.other_settings.get("dark_mode");
     const config = get_dark_mode_config(props.other_settings.toJS());
-    const label_style = { width: "100px", display: "inline-block" } as const;
     return (
       <div>
         <Checkbox
@@ -400,57 +432,38 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
               defaultMessage: "Dark Mode Configuration",
             })}
           >
-            <span style={label_style}>
-              <FormattedMessage
-                id="account.other-settings.theme.dark_mode.brightness"
-                defaultMessage="Brightness"
-              />
-            </span>
-            <InputNumber
-              min={dark_mode_mins.brightness}
-              max={100}
-              value={config.brightness}
-              onChange={(x) => on_change("dark_mode_brightness", x)}
-            />
-            <br />
-            <span style={label_style}>
-              <FormattedMessage
-                id="account.other-settings.theme.dark_mode.contrast"
-                defaultMessage="Contrast"
-              />
-            </span>
-            <InputNumber
-              min={dark_mode_mins.contrast}
-              max={100}
-              value={config.contrast}
-              onChange={(x) => on_change("dark_mode_contrast", x)}
-            />
-            <br />
-            <span style={label_style}>
-              <FormattedMessage
-                id="account.other-settings.theme.dark_mode.sepia"
-                defaultMessage="Sepia"
-              />
-            </span>
-            <InputNumber
-              min={dark_mode_mins.sepia}
-              max={100}
-              value={config.sepia}
-              onChange={(x) => on_change("dark_mode_sepia", x)}
-            />
-            <br />
-            <span style={label_style}>
-              <FormattedMessage
-                id="account.other-settings.theme.dark_mode.grayscale"
-                defaultMessage="Grayscale"
-              />
-            </span>
-            <InputNumber
-              min={dark_mode_mins.grayscale}
-              max={100}
-              value={config.grayscale}
-              onChange={(x) => on_change("dark_mode_grayscale", x)}
-            />
+            <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+              {DARK_MODE_KEYS.map((key) => (
+                <div
+                  key={key}
+                  style={{ display: "flex", gap: 10, alignItems: "center" }}
+                >
+                  <div style={{ width: 100 }}>
+                    {intl.formatMessage(DARK_MODE_LABELS[key])}
+                  </div>
+                  <Slider
+                    min={DARK_MODE_MINS[key]}
+                    max={100}
+                    value={config[key]}
+                    onChange={(x) => on_change_dark_mode(`dark_mode_${key}`, x)}
+                    marks={{
+                      [DARK_MODE_DEFAULTS[key]]: String(
+                        DARK_MODE_DEFAULTS[key],
+                      ),
+                    }}
+                    style={{ flex: 1, width: 0 }}
+                  />
+                  <Button
+                    size="small"
+                    onClick={() =>
+                      on_change_dark_mode(`dark_mode_${key}`, DARK_MODE_DEFAULTS[key])
+                    }
+                  >
+                    {intl.formatMessage(labels.reset)}
+                  </Button>
+                </div>
+              ))}
+            </div>
           </Card>
         ) : undefined}
       </div>
diff --git a/src/packages/frontend/account/types.ts b/src/packages/frontend/account/types.ts
@@ -51,7 +51,6 @@ export interface AccountState {
     dark_mode_brightness: number;
     dark_mode_contrast: number;
     dark_mode_sepia: number;
-    dark_mode_grayscale: number;
     news_read_until: number; // JavaScript timestamp in milliseconds
     [OTHER_SETTINGS_USERDEFINED_LLM]: string; // string is JSON: CustomLLM[]
     [OTHER_SETTINGS_LOCALE_KEY]?: string;
diff --git a/src/packages/frontend/cspell.json b/src/packages/frontend/cspell.json
@@ -82,6 +82,7 @@
     "antd",
     "buttonbar",
     "collab",
+    "darkreader",
     "descr",
     "flyoutdragbar",
     "flyouts",
diff --git a/src/packages/frontend/package.json b/src/packages/frontend/package.json
@@ -85,7 +85,7 @@
     "csv-parse": "^5.3.6",
     "csv-stringify": "^6.3.0",
     "d3": "^3.5.6",
-    "darkreader": "4.9.95",
+    "darkreader": "4.9.109",
     "dayjs": "^1.11.11",
     "debug": "^4.4.0",
     "direction": "^1.0.4",
diff --git a/src/packages/next/components/account/config/system/appearance.tsx b/src/packages/next/components/account/config/system/appearance.tsx
@@ -31,7 +31,6 @@ interface Data {
     dark_mode_brightness: number;
     dark_mode_contrast: number;
     dark_mode_sepia: number;
-    dark_mode_grayscale: number;
   };
 }
 
@@ -84,12 +83,6 @@ register({
               min={0}
               max={100}
             />
-            <EditNumber
-              path="other_settings.dark_mode_grayscale"
-              title="Grayscale"
-              min={0}
-              max={100}
-            />
           </div>
         </div>
       );
diff --git a/src/packages/pnpm-lock.yaml b/src/packages/pnpm-lock.yaml
diff --git a/src/packages/util/db-schema/accounts.ts b/src/packages/util/db-schema/accounts.ts
@@ -70,6 +70,12 @@ export const AUTOBALANCE_DEFAULTS = {
   enabled: true,
 } as AutoBalance;
 
+export const DARK_MODE_DEFAULTS = {
+  brightness: 100,
+  contrast: 90,
+  sepia: 0,
+} as const;
+
 // throw error if not valid
 export function ensureAutoBalanceValid(obj) {
   if (obj == null) {
@@ -501,10 +507,9 @@ Table({
             no_free_warnings: false,
             allow_mentions: true,
             dark_mode: false,
-            dark_mode_brightness: 100,
-            dark_mode_contrast: 90,
-            dark_mode_sepia: 0,
-            dark_mode_grayscale: 0,
+            dark_mode_brightness: DARK_MODE_DEFAULTS.brightness,
+            dark_mode_contrast: DARK_MODE_DEFAULTS.contrast,
+            dark_mode_sepia: DARK_MODE_DEFAULTS.sepia,
             news_read_until: 0,
             hide_project_popovers: false,
             hide_file_popovers: false,
