fix(editor): the editor color scheme follows a switch between light and dark themes (#1100)

Switching the IDE theme kept an explicitly chosen editor color scheme, so a light theme could keep a dark editor. When the applied theme turns light or dark, a chosen scheme of the other kind now switches back to the theme's own; a scheme picked to go with the current theme is kept. Reacts to the applied theme, so Quick Switch, Settings, Welcome › Customize, other windows and Sync with OS are all covered.

src/editor/core/colorSchemeRuntime.ts

@@ -1,11 +1,13 @@
 /**
  * Applies Settings › Editor › Color Scheme (scheme + attribute overrides) as one
  * stylesheet, and Editor › Font › Typography Settings as the root's
- * `--fw-code` / `--fw-code-bold`.
+ * `--fw-code` / `--fw-code-bold`. When the IDE theme turns light or dark, a chosen
+ * scheme of the other kind is switched back to the theme's own.
  */
 import { useProject } from "@/platform/project";
 import { editorPrefs, fontWeightVars } from "@/platform/editorSettings";
-import { schemeCss } from "@/platform/colorScheme";
+import { schemeAfterThemeChange, schemeCss } from "@/platform/colorScheme";
+import { call, commands, isTauri } from "@/platform/ipc";
 
 export function installColorScheme(): () => void {
   if (typeof document === "undefined") return () => {};
@@ -21,11 +23,36 @@ export function installColorScheme(): () => void {
     for (const [name, value] of Object.entries(fontWeightVars(prefs.fontWeight, prefs.boldFontWeight)))
       if (root.style.getPropertyValue(name) !== value) root.style.setProperty(name, value);
   };
+  let kind = root.dataset.theme;
+  const followTheme = () => {
+    const next = root.dataset.theme;
+    if (next === kind) return;
+    const previous = kind;
+    kind = next;
+    const settings = useProject.getState().settings;
+    if (!previous || !settings || (next !== "light" && next !== "dark")) return;
+    const scheme = schemeAfterThemeChange(settings.editor?.colorScheme, next, editorPrefs(settings).customSchemes);
+    if (scheme === null) return;
+    if (!isTauri()) {
+      useProject.setState({ settings: { ...settings, editor: { ...settings.editor, colorScheme: scheme } } });
+      return;
+    }
+    call(commands.settingsSet("global", "editor.colorScheme", JSON.stringify(scheme))).then(
+      (updated) => useProject.setState({ settings: updated }),
+      (e) => console.warn("[color scheme] cannot follow the theme", e),
+    );
+  };
   apply();
   const unsubscribe = useProject.subscribe((s, prev) => {
     if (s.settings !== prev.settings) apply();
   });
-  const observer = typeof MutationObserver !== "undefined" ? new MutationObserver(apply) : null;
+  const observer =
+    typeof MutationObserver !== "undefined"
+      ? new MutationObserver(() => {
+          apply();
+          followTheme();
+        })
+      : null;
   observer?.observe(document.documentElement, {
     attributes: true,
     attributeFilter: ["data-theme", "data-contrast", "data-color-theme", "data-plugin-theme"],