IDE startup theme based on OS theme (#1160)

* add patch for setting IDE startup theme based on OS theme

* Patched the default theme behavior.

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

* add custom themes in register

Co-authored-by: Akos Kitta <a.kitta@arduino.cc>

electron/.gitignore

@@ -6,7 +6,6 @@ working-copy/
 src-gen/
 node_modules/
 build/yarn.lock
-webpack.config.js
 lib/
 
 # The electron-builder output.

electron/build/patch/frontend/index.js

@@ -0,0 +1,59 @@
+// Patch for the startup theme. Customizes the `ThemeService.get().defaultTheme();` to dispatch the default IDE2 theme based on the OS' theme.
+// For all subsequent starts of the IDE the theme applied will be the last one set by the user.
+
+// With the current version of Theia adopted (1.25) it is not possible to extend the `ThemeService`, it will be possible starting from Theia 1.27.
+// Once the version of Theia is updated, this patch will be removed and this functionality will be implemented via dependency injection.
+// Ideally, we should open a PR in Theia and add support for `light` and `dark` default themes in the app config.
+
+const {
+  ThemeService,
+  ThemeServiceSymbol,
+  BuiltinThemeProvider,
+} = require('@theia/core/lib/browser/theming');
+const {
+  ApplicationProps,
+} = require('@theia/application-package/lib/application-props');
+
+const lightTheme = 'arduino-theme';
+const darkTheme = 'arduino-theme-dark';
+const defaultTheme =
+  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? darkTheme
+    : lightTheme;
+
+const arduinoDarkTheme = {
+  id: 'arduino-theme-dark',
+  type: 'dark',
+  label: 'Dark (Arduino)',
+  editorTheme: 'arduino-theme-dark',
+  activate() { },
+  deactivate() { }
+};
+
+const arduinoLightTheme = {
+  id: 'arduino-theme',
+  type: 'light',
+  label: 'Light (Arduino)',
+  editorTheme: 'arduino-theme',
+  activate() { },
+  deactivate() { }
+};
+
+if (!window[ThemeServiceSymbol]) {
+  const themeService = new ThemeService();
+  Object.defineProperty(themeService, 'defaultTheme', {
+    get: function () {
+      return (
+        this.themes[defaultTheme] ||
+        this.themes[ApplicationProps.DEFAULT.frontend.config.defaultTheme]
+      );
+    },
+  });
+  themeService.register(...BuiltinThemeProvider.themes, arduinoDarkTheme, arduinoLightTheme);
+  themeService.startupTheme();
+  themeService.setCurrentTheme(defaultTheme);
+  window[ThemeServiceSymbol] = themeService;
+}
+
+// Require the original, generated `index.js` for `webpack` as the next entry for the `bundle.js`.
+require('../../src-gen/frontend/index');

electron/build/template-package.json

@@ -23,7 +23,7 @@
     "package": "cross-env DEBUG=* && electron-builder --publish=never",
     "package:publish": "cross-env DEBUG=* && electron-builder --publish=always",
     "download:plugins": "theia download:plugins",
-    "patch": "ncp ./patch/main.js ./src-gen/backend/main.js && node ./scripts/patch-theia-preload.js ./lib/index.html"
+    "patch": "ncp ./patch/backend/main.js ./src-gen/backend/main.js && node ./scripts/patch-theia-preload.js ./lib/index.html"
   },
   "engines": {
     "node": ">=14.0.0 <15"
@@ -157,4 +157,4 @@
     "vscode-language-pack-pt-BR": "https://open-vsx.org/api/MS-CEINTL/vscode-language-pack-pt-BR/1.69.0/file/MS-CEINTL.vscode-language-pack-pt-BR-1.69.0.vsix",
     "vscode-language-pack-cs": "https://open-vsx.org/api/MS-CEINTL/vscode-language-pack-cs/1.69.0/file/MS-CEINTL.vscode-language-pack-cs-1.69.0.vsix"
   }
-}
+}

electron/build/webpack.config.js

@@ -0,0 +1,10 @@
+// @ts-check
+const config = require('./gen-webpack.config.js');
+const path = require('path');
+
+// Load the patched `index.js` that sets the desired theme in IDE2 based on the OS' theme.
+// The `patch/frontend/index.js` will require the original, generated `index.js`.
+// See: https://github.com/arduino/arduino-ide/pull/1160.
+config.entry.bundle = path.resolve(__dirname, 'patch/frontend/index.js');
+
+module.exports = config;

electron/packager/index.js

@@ -52,6 +52,7 @@
     'resources',
     'scripts',
     'template-package.json',
+    'webpack.config.js'
   ];
   fs.readdirSync(path('..', 'build'))
     .filter((filename) => resourcesToKeep.indexOf(filename) === -1)