* (bluefox) Allowed setting theme name directly by theme toggle

ioBroker · Jun 20, 2023 · d0f690f · d0f690f
1 parent 1cebc91
commit d0f690f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 31 deletions.
diff --git a/.github/workflows/test-and-release.yml b/.github/workflows/test-and-release.yml
@@ -67,12 +67,12 @@ jobs:
           npm publish
 
       - name: Create Github Release
-        uses: actions/create-release@v1
+        uses: softprops/action-gh-release@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           tag_name: ${{ github.ref }}
-          release_name: Release v${{ steps.extract_release.outputs.VERSION }}
+          name: Release v${{ steps.extract_release.outputs.VERSION }}
           draft: false
           # Prerelease versions create pre-releases on GitHub
           prerelease: ${{ contains(steps.extract_release.outputs.VERSION, '-') }}

diff --git a/README.md b/README.md
@@ -661,6 +661,9 @@ socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey')
 -->
 
 ## Changelog
+### **WORK IN PROGRESS**
+* (bluefox) Allowed setting theme name directly by theme toggle
+
 ### 4.1.0 (2023-05-10)
 * (bluefox) `craco-module-federation.js` was added. For node 16
 

diff --git a/package.json b/package.json
@@ -34,41 +34,41 @@
   },
   "homepage": "https://github.com/ioBroker/adapter-react-v5#readme",
   "dependencies": {
-    "@emotion/react": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.3",
+    "@mui/material": "^5.13.5",
     "@mui/styles": "^5.13.2",
-    "@mui/x-date-pickers": "6.4.0",
-    "@iobroker/socket-client": "^2.0.7",
+    "@mui/x-date-pickers": "6.8.0",
+    "@iobroker/socket-client": "^2.1.0",
     "react-cropper": "^2.3.3",
-    "@sentry/browser": "^7.52.1",
-    "@sentry/integrations": "^7.52.1",
+    "@sentry/browser": "^7.56.0",
+    "@sentry/integrations": "^7.56.0",
     "@types/iobroker": "^4.0.5",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-dropzone": "^14.2.3",
-    "react-icons": "^4.8.0",
+    "react-icons": "^4.9.0",
     "react-inlinesvg": "^3.0.2",
     "react-text-mask": "^5.5.0"
   },
   "devDependencies": {
     "@alcalzone/release-script": "^3.5.9",
     "@alcalzone/release-script-plugin-license": "^3.5.9",
-    "@types/node": "^20.2.5",
-    "@babel/core": "^7.22.1",
+    "@types/node": "^20.3.1",
+    "@babel/core": "^7.22.5",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.22.4",
+    "@babel/plugin-transform-runtime": "^7.22.5",
     "babel-plugin-inline-json-import": "^0.3.2",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-flow": "^7.21.4",
-    "@babel/preset-react": "^7.22.3",
-    "@types/react": "^17.0.59",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-flow": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@types/react": "^18.2.13",
     "babel": "^6.23.0",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-typescript": "^6.0.0-alpha.1",
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.3"
   }
 }
diff --git a/src/GenericApp.js b/src/GenericApp.js
@@ -458,27 +458,30 @@ class GenericApp extends Router {
 
     /**
      * Changes the current theme
-     */
-    toggleTheme() {
+     * @param {string} newThemeName Theme name
+     **/
+    toggleTheme(newThemeName) {
         const themeName = this.state.themeName;
 
         // dark => blue => colored => light => dark
-        const newThemeName = themeName === 'dark' ? 'blue' :
+        newThemeName = newThemeName || (themeName === 'dark' ? 'blue' :
             (themeName === 'blue' ? 'colored' :
-                (themeName === 'colored' ? 'light' : 'dark'));
+                (themeName === 'colored' ? 'light' : 'dark')));
 
-        Utils.setThemeName(newThemeName);
+        if (newThemeName !== themeName) {
+            Utils.setThemeName(newThemeName);
 
-        const theme = this.createTheme(newThemeName);
+            const theme = this.createTheme(newThemeName);
 
-        this.setState({
-            theme,
-            themeName: this.getThemeName(theme),
-            themeType: this.getThemeType(theme),
-        }, () => {
-            this.props.onThemeChange && this.props.onThemeChange(newThemeName);
-            this.onThemeChanged && this.onThemeChanged(newThemeName);
-        });
+            this.setState({
+                theme,
+                themeName: this.getThemeName(theme),
+                themeType: this.getThemeType(theme),
+            }, () => {
+                this.props.onThemeChange && this.props.onThemeChange(newThemeName);
+                this.onThemeChanged && this.onThemeChanged(newThemeName);
+            });
+        }
     }
 
     /**