Add new theming system (#2833)

* Add charcoal theme * Fix the themes * auto theming * fix broken theme things * Recompute node headers when theme color changes * Add some more themes * Adjust some colors * Separate dark and light mode selection * Add two more themes * Two more themes * Combine into single list + remove system theme option * Add setting migrations for new theme system (#2838) * Update src/renderer/components/SettingsModal.tsx Co-authored-by: Michael Schmidt <mitchi5000.ms@googlemail.com> * Update src/renderer/components/SettingsModal.tsx Co-authored-by: Michael Schmidt <mitchi5000.ms@googlemail.com> * Add system theme * change how colors get selected a bit * Update src/common/settings/migration.ts Co-authored-by: Michael Schmidt <mitchi5000.ms@googlemail.com> --------- Co-authored-by: Michael Schmidt <mitchi5000.ms@googlemail.com>
chaiNNer-org · May 10, 2024 · 6fa0abe · 6fa0abe
1 parent a4be51d
commit 6fa0abe
Show file tree

Hide file tree

Showing 13 changed files with 356 additions and 117 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -115,5 +115,15 @@
   "stylelint.validate": [
     "css",
     "scss"
-  ]
+  ],
+  "[scss]": {
+    "editor.defaultFormatter": "stylelint.vscode-stylelint",
+    "editor.formatOnSave": true,
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true,
+  },
+  "[javascript]": {
+    "editor.formatOnSave": true
+  }
 }
diff --git a/src/common/settings/migration.ts b/src/common/settings/migration.ts
@@ -55,3 +55,26 @@ export const migrateOldStorageSettings = (settings: ReadonlyStorage): Partial<Ch
         },
     };
 };
+
+const newThemeSystem: SettingsMigration = (settings) => {
+    const themeMap: Record<string, string> = {
+        dark: 'default-dark',
+        light: 'default-light',
+        system: 'default-system',
+    };
+    if (settings.theme && Object.hasOwn(themeMap, settings.theme)) {
+        // eslint-disable-next-line no-param-reassign
+        settings.theme = themeMap[settings.theme];
+    }
+    return settings;
+};
+
+type SettingsMigration = (settings: Partial<ChainnerSettings>) => Partial<ChainnerSettings>;
+const migrations: SettingsMigration[] = [newThemeSystem];
+export const migrateSettings = (settings: Partial<ChainnerSettings>): ChainnerSettings => {
+    for (const migration of migrations) {
+        // eslint-disable-next-line no-param-reassign
+        settings = migration(settings);
+    }
+    return { ...defaultSettings, ...settings };
+};
diff --git a/src/common/settings/settings.ts b/src/common/settings/settings.ts
@@ -5,7 +5,7 @@ export interface ChainnerSettings {
     systemPythonLocation: string;
 
     // renderer
-    theme: 'light' | 'dark' | 'system';
+    theme: string;
     checkForUpdatesOnStartup: boolean;
     startupTemplate: string;
     animateChain: boolean;
@@ -32,7 +32,7 @@ export const defaultSettings: Readonly<ChainnerSettings> = {
     systemPythonLocation: '',
 
     // renderer
-    theme: 'dark',
+    theme: 'default-dark',
     checkForUpdatesOnStartup: true,
     startupTemplate: '',
     animateChain: true,

diff --git a/src/main/setting-storage.ts b/src/main/setting-storage.ts
@@ -1,7 +1,8 @@
+import deepEqual from 'fast-deep-equal';
 import { existsSync, readFileSync, renameSync, writeFileSync } from 'fs';
 import { LocalStorage } from 'node-localstorage';
 import path from 'path';
-import { migrateOldStorageSettings } from '../common/settings/migration';
+import { migrateOldStorageSettings, migrateSettings } from '../common/settings/migration';
 import { ChainnerSettings, defaultSettings } from '../common/settings/settings';
 import { getRootDir } from './platform';
 
@@ -14,7 +15,17 @@ export const writeSettings = (settings: ChainnerSettings) => {
 export const readSettings = (): ChainnerSettings => {
     if (existsSync(settingsJson)) {
         // settings.json
-        return JSON.parse(readFileSync(settingsJson, 'utf-8')) as ChainnerSettings;
+        const fileContent = readFileSync(settingsJson, 'utf-8');
+        const partialSettings = JSON.parse(fileContent) as Partial<ChainnerSettings>;
+        const originalPartialSettings = { ...partialSettings };
+        const settings = migrateSettings(partialSettings);
+
+        if (!deepEqual(originalPartialSettings, settings)) {
+            // write settings if they aren't up to date
+            writeSettings(settings);
+        }
+
+        return settings;
     }
 
     // legacy settings
@@ -29,10 +40,7 @@ export const readSettings = (): ChainnerSettings => {
         keys: Array.from({ length: storage.length }, (_, i) => storage.key(i)),
         getItem: (key: string) => storage.getItem(key),
     });
-    const settings: ChainnerSettings = {
-        ...defaultSettings,
-        ...partialSettings,
-    };
+    const settings = migrateSettings(partialSettings);
 
     // write a new settings.json we'll use form now on
     writeSettings(settings);