Use Node-RED defined Default themes on error and loading pages

Caches Node-RED Dashboard Default theme on config received. Theme will be retrieved from cache on subsequent app launches for use when loading or disconnected (to show error messages)
FlowFuse · Nov 10, 2024 · 5d3cb54 · 5d3cb54
1 parent 7cd70e1
commit 5d3cb54
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -250,6 +250,15 @@ export default {
             this.$store.commit('ui/groups', payload.groups)
             this.$store.commit('ui/widgets', payload.widgets)
             this.$store.commit('ui/themes', payload.themes)
+
+            for (const key in payload.themes) {
+                // check if "Default Theme" theme exists
+                if (payload.themes[key].name === 'Default Theme') {
+                    // store the default theme in local storage for use when disconnected from Node-RED
+                    localStorage.setItem('defaultNRDBTheme', JSON.stringify(payload.themes[key]))
+                    break
+                }
+            }
         })
     },
     methods: {

diff --git a/ui/src/main.mjs b/ui/src/main.mjs
@@ -26,18 +26,32 @@ import './stylesheets/common.css'
 import store from './store/index.mjs'
 import { useDataTracker } from './widgets/data-tracker.mjs' // eslint-disable-line import/order
 
-// set a base theme on which we will add our custom NR-defined theme
+// Retrieve the "Default" theme from cache
+function retrieveDefaultThemeFromCache () {
+    const cachedTheme = localStorage.getItem('defaultNRDBTheme')
+    if (cachedTheme) {
+        console.log('Found cached theme in localStorage')
+        return JSON.parse(cachedTheme)
+    }
+    console.log('No cached theme found in localStorage')
+    return null
+}
+
+const defaultTheme = retrieveDefaultThemeFromCache()
+
+// set a base theme on which we will add our custom NR-defined theme (initially set to the default theme if exists in cache)
 const theme = {
     dark: false,
     colors: {
-        background: '#fff',
-        'navigation-background': '#ffffff',
-        'group-background': '#ffffff',
-        primary: '#0094CE',
+        background: defaultTheme ? defaultTheme.colors.bgPage : '#fff',
+        'navigation-background': defaultTheme ? defaultTheme.colors.surface : '#ffffff',
+        'group-background': defaultTheme ? defaultTheme.colors.groupBg : '#ffffff',
+        'group-outline': defaultTheme ? defaultTheme.colors.groupOutline : '#d1d1d1',
+        primary: defaultTheme ? defaultTheme.colors.primary : '#0094CE',
         accent: '#ff6b99',
         secondary: '#26ff8c',
         success: '#a5d64c',
-        surface: '#ffffff',
+        surface: defaultTheme ? defaultTheme.colors.surface : '#ffffff',
         info: '#ff53d0',
         warning: '#ff8e00',
         error: '#ff5252'

diff --git a/ui/src/stylesheets/common.css b/ui/src/stylesheets/common.css
@@ -83,7 +83,7 @@ main {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #eee;
+    background-color: rgb(var(--v-theme-background, 238, 238, 238)); /* Fallback to light gray (#eee) */
 }
 
 .nrdb-placeholder {
@@ -92,12 +92,13 @@ main {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: #222;
     text-align: center;
     padding: 1.5rem 2rem;
-    border-radius: 6px;
-    border: 1px solid #d1d1d1;
-    background-color: #fff;
+    margin: 1rem;
+    border-radius: var(--group-border-radius, 6px);
+    border: 1px solid rgb(var(--v-theme-group-outline, 209, 209, 209)); /* Fallback to light gray (#d1d1d1) */
+    color: rgb(var(--v-theme-on-group-background, 34, 34, 34)); /* Fallback to dark gray (#222) */ 
+    background-color: rgb(var(--v-theme-group-background, 255, 255, 255)); /* Fallback to white (#fff) */
 }
 
 .nrdb-placeholder img {
@@ -119,7 +120,7 @@ main {
 
 .nrdb-placeholder .status-duplicates {
     font-weight: 400;
-    color: #222;
+    color: rgb(var(--v-theme-on-surface, 34, 34, 34)); /* Fallback to dark gray (#222) */
     margin-top: 0.5rem;
 }