diff --git a/nodes/config/locales/en-US/ui_theme.json b/nodes/config/locales/en-US/ui_theme.json
index 3d9f68372..334b8c0f9 100644
--- a/nodes/config/locales/en-US/ui_theme.json
+++ b/nodes/config/locales/en-US/ui_theme.json
@@ -3,6 +3,8 @@
         "label": {
             "themeName": "Theme Name",
             "colors": "Colors",
+            "colorsLight": "Light",
+            "colorsDark": "Dark",
             "dashboard": "Dashboard",
             "header": "Header",
             "primary": "Primary",
@@ -18,7 +20,8 @@
             "default": "Default (48px)",
             "comfortable": "Comfortable (38px)",
             "compact": "Compact (32px)",
-            "density": "Row Height"
+            "density": "Row Height",
+            "preview": "Preview"
         }
     }
 }
\ No newline at end of file
diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html
index f29bdeaff..4811fe620 100644
--- a/nodes/config/ui_base.html
+++ b/nodes/config/ui_base.html
@@ -1957,14 +1957,47 @@
                 $('<span>', { class: 'nrdb2-sb-title' }).text(theme.name || theme.id).appendTo(titleRow)
                 $('<span>', { class: 'nrdb2-sb-info' }).text(theme.users.length + ' ' + (theme.users.length > 1 ? c_('layout.pages') : c_('layout.page'))).appendTo(titleRow)
 
-                const palette = $('<div>', { class: 'nrdb2-sb-palette' }).appendTo(titleRow)
+                // backward compatibility
+                if (!hasProperty(theme.colors, 'light') && hasProperty(theme.colors, 'surface')) {
+                    // Set default values for light theme
+                    const updatedColors = {
+                        light: {
+                            surface: theme.colors.surface,
+                            primary: theme.colors.primary,
+                            bgPage: theme.colors.bgPage,
+                            groupBg: theme.colors.groupBg,
+                            groupOutline: theme.colors.groupOutline
+                        },
+
+                        // Set default values for dark theme
+                        dark: {
+                            surface: '#111111',
+                            primary: theme.colors.primary,
+                            bgPage: '#222222',
+                            groupBg: '#333333',
+                            groupOutline: '#cccccc'
+                        }
+                    }
+
+                    theme.colors = updatedColors
+                }
+
+                const paletteLight = $('<div>', { class: 'nrdb2-sb-palette' }).appendTo(titleRow)
                 const colors = theme.colors
 
-                palette.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.surface}` }))
-                palette.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.primary}` }))
-                palette.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.bgPage}` }))
-                palette.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.groupBg}` }))
-                palette.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.groupOutline}` }))
+                paletteLight.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.light.surface}` }))
+                paletteLight.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.light.primary}` }))
+                paletteLight.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.light.bgPage}` }))
+                paletteLight.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.light.groupBg}` }))
+                paletteLight.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.light.groupOutline}` }))
+
+                const paletteDark = $('<div>', { class: 'nrdb2-sb-palette' }).appendTo(titleRow)
+
+                paletteDark.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.dark.surface}` }))
+                paletteDark.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.dark.primary}` }))
+                paletteDark.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.dark.bgPage}` }))
+                paletteDark.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.dark.groupBg}` }))
+                paletteDark.append($('<div>', { class: 'nrdb2-sb-palette-color', style: `background-color: ${colors.dark.groupOutline}` }))
 
                 // theme - actions
                 const actions = $('<div>', { class: 'nrdb2-sb-list-header-actions' }).appendTo(titleRow)
diff --git a/nodes/config/ui_theme.html b/nodes/config/ui_theme.html
index f7a38654a..79dbd16ff 100644
--- a/nodes/config/ui_theme.html
+++ b/nodes/config/ui_theme.html
@@ -6,16 +6,30 @@
                 value: RED._('@flowfuse/node-red-dashboard/ui-theme:ui-theme.label.themeName'),
                 required: true
             },
+    
             // colors
             colors: {
                 value: {
-                    surface: '#ffffff',
-                    primary: '#0094CE',
-                    bgPage: '#eeeeee',
-                    groupBg: '#ffffff',
-                    groupOutline: '#cccccc'
+                    // light mode
+                    light: {
+                        surface: '#ffffff',
+                        primary: '#0094CE',
+                        bgPage: '#eeeeee',
+                        groupBg: '#ffffff',
+                        groupOutline: '#cccccc'
+                    },
+
+                    // dark mode
+                    dark: {
+                        surface: '#111111',
+                        primary: '#0094CE',
+                        bgPage: '#222222',
+                        groupBg: '#333333',
+                        groupOutline: '#cccccc'
+                    }
                 }
             },
+
             // sizes
             sizes: {
                 value: {
@@ -33,15 +47,44 @@
             }
 
             if (!this.colors) {
-                this.colors = {}
-                // set default values
-                this.colors.surface = '#ffffff'
-                this.colors.primary = '#0094CE'
-                // pages
-                this.colors.bgPage = '#eeeeee'
-                // groups
-                this.colors.groupBg = '#ffffff'
-                this.colors.groupOutline = '#cccccc'
+                this.colors = {
+                    light: {
+                        surface: '#ffffff',
+                        primary: '#0094CE',
+                        bgPage: '#eeeeee',
+                        groupBg: '#ffffff',
+                        groupOutline: '#cccccc'
+                    },
+                    dark: {
+                        surface: '#111111',
+                        primary: '#0094CE',
+                        bgPage: '#222222',
+                        groupBg: '#333333',
+                        groupOutline: '#cccccc'
+                    }
+                }
+            } else if (!hasProperty(this.colors, 'light') && hasProperty(this.colors, 'surface')) {
+                // Set default values for light theme
+                const updatedColors = {
+                    light: {
+                        surface: this.colors.surface,
+                        primary: this.colors.primary,
+                        bgPage: this.colors.bgPage,
+                        groupBg: this.colors.groupBg,
+                        groupOutline: this.colors.groupOutline
+                    },
+
+                    // Set default values for dark theme
+                    dark: {
+                        surface: '#111111',
+                        primary: this.colors.primary,
+                        bgPage: '#222222',
+                        groupBg: '#333333',
+                        groupOutline: '#cccccc'
+                    }
+                }
+
+                this.colors = updatedColors
             }
 
             if (!this.sizes) {
@@ -65,11 +108,12 @@
             }
 
             // loop over keys in this.colors
-            Object.keys(this.colors).forEach((color) => {
-                // get the value of the key
-                const value = this.colors[color]
-                // set the value of the input
-                $('#node-config-input-' + color).val(value)
+            Object.keys(this.colors).forEach((theme) => {
+                const colors = this.colors[theme]
+                Object.keys(colors).forEach((color) => {
+                    const value = colors[color]
+                    $('#node-config-input-' + theme + '-' + color).val(value)
+                })
             })
 
             // loop over keys in this.sizes
@@ -81,7 +125,118 @@
                 // set the value of the input
                 $('#node-config-input-' + size).val(value)
             })
+    
+            function hexToRgb (hex) {
+                const bigint = parseInt(hex.replace('#', ''), 16)
+                const r = (bigint >> 16) & 255
+                const g = (bigint >> 8) & 255
+                const b = bigint & 255
+                return [r, g, b]
+            }
+            // get the contrast of background color for text color
+            function getContrast (bg) {
+                const bgRgb = hexToRgb(bg)
+
+                // http://www.w3.org/TR/AERT#color-contrast
+                const brightness = Math.round(((parseInt(bgRgb[0]) * 299) +
+                    (parseInt(bgRgb[1]) * 587) +
+                    (parseInt(bgRgb[2]) * 114)) / 1000)
+
+                const textColor = (brightness > 125) ? '#000000' : '#ffffff'
+                return textColor
+            }
+
+            let activeTheme = 'light'
+
+            function setElementColor (colorPicker) {
+                const colorPickerId = colorPicker.attr('id')
+                const selectedColor = colorPicker.val()
+                const contrastColor = getContrast(selectedColor)
 
+                if (activeTheme === 'light') {
+                    switch (colorPickerId) {
+                    case 'node-config-input-light-surface':
+                        $('#header').css({
+                            'background-color': selectedColor,
+                            color: contrastColor
+                        })
+                        break
+                    case 'node-config-input-light-primary':
+                        $('.primary-btn').css({
+                            'background-color': selectedColor,
+                            color: contrastColor
+                        })
+                        break
+                    case 'node-config-input-light-bgPage':
+                        $('#bgPage').css({
+                            'background-color': selectedColor,
+                            color: contrastColor
+                        })
+                        break
+                    case 'node-config-input-light-groupBg':
+                        $('.group').each(function () {
+                            $(this).css({
+                                'background-color': selectedColor,
+                                color: contrastColor
+                            })
+                            if (!$(this).css('border-color')) {
+                                $(this).css('border-color', 'initial') // Ensures border color is not overwritten if not set
+                            }
+                        })
+                        break
+                    case 'node-config-input-light-groupOutline':
+                        $('.group').each(function () {
+                            $(this).css('border-color', selectedColor)
+                            if (!$(this).css('background-color')) {
+                                $(this).css('background-color', 'initial') // Ensures background color is not overwritten if not set
+                            }
+                        })
+                        break
+                    }
+                } else if (activeTheme === 'dark') {
+                    switch (colorPickerId) {
+                    case 'node-config-input-dark-surface':
+                        $('#header').css({
+                            'background-color': selectedColor,
+                            color: contrastColor
+                        })
+                        break
+                    case 'node-config-input-dark-primary':
+                        $('.primary-btn').css({
+                            'background-color': selectedColor,
+                            color: contrastColor
+                        })
+                        break
+                    case 'node-config-input-dark-bgPage':
+                        $('#bgPage').css({
+                            'background-color': selectedColor,
+                            color: contrastColor
+                        })
+                        break
+                    case 'node-config-input-dark-groupBg':
+                        $('.group').each(function () {
+                            $(this).css({
+                                'background-color': selectedColor,
+                                color: contrastColor
+                            })
+                            if (!$(this).css('border-color')) {
+                                $(this).css('border-color', 'initial') // Ensures border color is not overwritten if not set
+                            }
+                        })
+                        break
+                    case 'node-config-input-dark-groupOutline':
+                        $('.group').each(function () {
+                            $(this).css('border-color', selectedColor)
+                            if (!$(this).css('background-color')) {
+                                $(this).css('background-color', 'initial') // Ensures background color is not overwritten if not set
+                            }
+                        })
+                        break
+                    }
+                }
+            }
+    
+            // update label bg to match the colour input values
             // update label b/g to match the colour input values
             // this provides nicer styling than the default browser styling
             const colorWrappers = $('.color-picker-wrapper')
@@ -90,15 +245,48 @@
                 const colorPicker = wrapper.children("input[type='color']").eq(0)
                 colorPicker.on('change', () => {
                     wrapper.css('background-color', colorPicker.val())
+                    setElementColor(colorPicker)
                 })
                 wrapper.css('background-color', colorPicker.val())
+                setElementColor(colorPicker)
+            })
+
+            const that = this
+            const tabs = RED.tabs.create({
+                id: 'color-tabs',
+                onchange: function (tab) {
+                    $('#color-tabs-content').children().hide()
+                    $('#' + tab.id).show()
+                    activeTheme = tab.id === 'color-tab-light' ? 'light' : 'dark'
+                    // Update colors based on the active theme
+                    colorWrappers.each(function (i) {
+                        const wrapper = $(this)
+                        const colorPicker = wrapper.children("input[type='color']").eq(0)
+                        setElementColor(colorPicker)
+                    })
+                }
+            })
+            tabs.addTab({
+                id: 'color-tab-light',
+                iconClass: 'fa fa-sun-o',
+                label: that._('ui-theme.label.colorsLight')
             })
+
+            tabs.addTab({
+                id: 'color-tab-dark',
+                iconClass: 'fa fa-moon-o',
+                label: that._('ui-theme.label.colorsDark')
+            })
+
+            tabs.activateTab('color-tab-light')
         },
         oneditsave: function () {
             // update our config values from the input values
-            Object.keys(this.colors).forEach((color) => {
-                // set the value of the input
-                this.colors[color] = $('#node-config-input-' + color).val()
+            Object.keys(this.colors).forEach((theme) => {
+                const colors = this.colors[theme]
+                Object.keys(colors).forEach((color) => {
+                    this.colors[theme][color] = $('#node-config-input-' + theme + '-' + color).val()
+                })
             })
 
             // update our config values from the input values
@@ -124,49 +312,124 @@
         <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
     </div>
     <h3 style="margin: 0; margin-bottom: 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.colors"></h3>
-    <div class="form-row" style="margin-bottom: 3px;">
-        <h4 style="margin-bottom: 0;"><i class="fa fa-bar-chart"></i> <span data-i18n="ui-theme.label.dashboard"></h4>
-    </div>
-    <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
-        <div>
-            <label data-i18n="ui-theme.label.header"></label>
-            <label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
-                <input type="color" id="node-config-input-surface" style="opacity: 0; width: 100%;"/>
-            </label>
-        </div>
-        <div>
-            <label data-i18n="ui-theme.label.primary"></label>
-            <label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
-                <input type="color" id="node-config-input-primary" style="opacity: 0; width: 100%;"/>
-            </label>
-        </div>
-    </div>
-    <div class="form-row" style="margin-bottom: 3px;">
-        <h4 style="margin-bottom: 0;"><i class="fa fa-object-group"></i> <span data-i18n="ui-theme.label.pages"></h4>
+   
+    <!-- tabs -->
+    <div class="form-row color-tabs-row">
+        <ul style="min-width: 600px; margin-bottom: 20px;" id="color-tabs"></ul>
     </div>
-    <div class="form-row labels-right" style="margin-bottom: 3px;">
-        <label data-i18n="ui-theme.label.background"></label>
-        <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
-            <input type="color" id="node-config-input-bgPage" style="opacity: 0; width: 100%;"/>
-        </label>
-    </div>
-    <div class="form-row" style="margin-bottom: 3px;">
-        <h4 style="margin-bottom: 0;"><i class="fa fa-table"></i> <span data-i18n="ui-theme.label.groups"></h4>
-    </div>
-    <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
-        <div>
-            <label data-i18n="ui-theme.label.background"></label>
-            <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
-                <input type="color" id="node-config-input-groupBg" style="opacity: 0; width: 100%;"/>
-            </label>
+    <div id="color-tabs-content">
+        <div id="color-tab-light" style="display:none">
+            <div class="form-row node-text-editor-row" style="position:relative">
+                <div class="form-row" style="margin-bottom: 3px;">
+                    <h4 style="margin-bottom: 0;"><i class="fa fa-bar-chart"></i> <span
+                            data-i18n="ui-theme.label.dashboard"></h4>
+                </div>
+                <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
+                    <div>
+                        <label data-i18n="ui-theme.label.header"></label>
+                        <label class="color-picker-wrapper" for="node-config-input-light-surface"
+                            style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                            <input type="color" id="node-config-input-light-surface" style="opacity: 0; width: 100%;" />
+                        </label>
+                    </div>
+                    <div>
+                        <label data-i18n="ui-theme.label.primary"></label>
+                        <label class="color-picker-wrapper" for="node-config-input-light-primary"
+                            style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                            <input type="color" id="node-config-input-light-primary" style="opacity: 0; width: 100%;" />
+                        </label>
+                    </div>
+                </div>
+                <div class="form-row" style="margin-bottom: 3px;">
+                    <h4 style="margin-bottom: 0;"><i class="fa fa-object-group"></i> <span data-i18n="ui-theme.label.pages">
+                    </h4>
+                </div>
+                <div class="form-row labels-right" style="margin-bottom: 3px;">
+                    <label data-i18n="ui-theme.label.background"></label>
+                    <label class="color-picker-wrapper" for="node-config-input-light-bgPage"
+                        style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                        <input type="color" id="node-config-input-light-bgPage" style="opacity: 0; width: 100%;" />
+                    </label>
+                </div>
+                <div class="form-row" style="margin-bottom: 3px;">
+                    <h4 style="margin-bottom: 0;"><i class="fa fa-table"></i> <span data-i18n="ui-theme.label.groups"></h4>
+                </div>
+                <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
+                    <div>
+                        <label data-i18n="ui-theme.label.background"></label>
+                        <label class="color-picker-wrapper" for="node-config-input-light-groupBg"
+                            style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                            <input type="color" id="node-config-input-light-groupBg" style="opacity: 0; width: 100%;" />
+                        </label>
+                    </div>
+                    <div>
+                        <label data-i18n="ui-theme.label.outline"></label>
+                        <label class="color-picker-wrapper" for="node-config-input-light-groupOutline"
+                            style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                            <input type="color" id="node-config-input-light-groupOutline"
+                                style="opacity: 0; width: 100%;" />
+                        </label>
+                    </div>
+                </div>
+            </div>
         </div>
-        <div>
-            <label data-i18n="ui-theme.label.outline"></label>
-            <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
-                <input type="color" id="node-config-input-groupOutline" style="opacity: 0; width: 100%;"/>
-            </label>
+    
+        <div id="color-tab-dark" style="display:none">
+            <div class="form-row node-text-editor-row" style="position:relative">
+                <div class="form-row" style="margin-bottom: 3px;">
+                    <h4 style="margin-bottom: 0;"><i class="fa fa-bar-chart"></i> <span
+                            data-i18n="ui-theme.label.dashboard"></h4>
+                </div>
+                <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
+                    <div>
+                        <label data-i18n="ui-theme.label.header"></label>
+                        <label class="color-picker-wrapper" for="node-config-input-dark-surface"
+                            style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                            <input type="color" id="node-config-input-dark-surface" style="opacity: 0; width: 100%;" />
+                        </label>
+                    </div>
+                    <div>
+                        <label data-i18n="ui-theme.label.primary"></label>
+                        <label class="color-picker-wrapper" for="node-config-input-dark-primary"
+                            style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                            <input type="color" id="node-config-input-dark-primary" style="opacity: 0; width: 100%;" />
+                        </label>
+                    </div>
+                </div>
+                <div class="form-row" style="margin-bottom: 3px;">
+                    <h4 style="margin-bottom: 0;"><i class="fa fa-object-group"></i> <span data-i18n="ui-theme.label.pages">
+                    </h4>
+                </div>
+                <div class="form-row labels-right" style="margin-bottom: 3px;">
+                    <label data-i18n="ui-theme.label.background"></label>
+                    <label class="color-picker-wrapper" for="node-config-input-dark-bgPage"
+                        style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                        <input type="color" id="node-config-input-dark-bgPage" style="opacity: 0; width: 100%;" />
+                    </label>
+                </div>
+                <div class="form-row" style="margin-bottom: 3px;">
+                    <h4 style="margin-bottom: 0;"><i class="fa fa-table"></i> <span data-i18n="ui-theme.label.groups"></h4>
+                </div>
+                <div class="form-row form-row-flex labels-right" style="margin-bottom: 3px; gap: 9px;">
+                    <div>
+                        <label data-i18n="ui-theme.label.background"></label>
+                        <label class="color-picker-wrapper" for="node-config-input-dark-groupBg"
+                            style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                            <input type="color" id="node-config-input-dark-groupBg" style="opacity: 0; width: 100%;" />
+                        </label>
+                    </div>
+                    <div>
+                        <label data-i18n="ui-theme.label.outline"></label>
+                        <label class="color-picker-wrapper" for="node-config-input-dark-groupOutline"
+                            style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+                            <input type="color" id="node-config-input-dark-groupOutline" style="opacity: 0; width: 100%;" />
+                        </label>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
+   
     <h3 style="margin: 12px 0 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.sizings"></h3>
     <div class="form-row">
         <label for="node-config-input-density" data-i18n="ui-theme.label.density"></label>
@@ -192,6 +455,31 @@ <h3 style="margin: 12px 0 6px; border-bottom: 1px solid #eee; padding-bottom: 3p
         <label for="node-config-input-widgetGap" data-i18n="ui-theme.label.widgetGap"></label>
         <input type="text" id="node-config-input-widgetGap">
     </div>
+    <h3 style="margin: 12px 0 6px; border-bottom: 1px solid #eee; padding-bottom: 3px;" data-i18n="ui-theme.label.preview">
+    </h3>
+    <p style="font-size: small; margin-top: 10px;">*Only shows theme colors</p>
+    
+    <div class="ui-preview">
+        <div class="app-bar" id="header">
+            <i class="fa fa-bars" aria-hidden="true"></i>
+            <h1>Dashboard</h1>
+        </div>
+        <div class="page" id="bgPage">
+            <div class="group">
+                <h2>Group 1</h2>
+                <button class="primary-btn">Button1</button>
+            </div>
+            <div class="group">
+                <h2>Group 2</h2>
+                <button class="primary-btn">Button2</button>
+            </div>
+            <div class="group">
+                <h2>Group 3</h2>
+                <button class="primary-btn">Button3</button>
+            </div>
+        </div>
+    </div>
+      
 </script>
 
 <style>
@@ -204,4 +492,65 @@ <h3 style="margin: 12px 0 6px; border-bottom: 1px solid #eee; padding-bottom: 3p
 .labels-right label:first-child:after {
     content: ':';
 }
+
+/* UI Preview Styling */
+.ui-preview {
+    border: 2px solid grey;
+    border-radius: 10px;
+    overflow: hidden;
+    }
+
+.app-bar {
+    width: 100%;
+    height: 50px;
+    background-color: lightgrey;
+    display: flex; 
+    align-items: center; 
+    padding: 10px;
+}
+
+.app-bar h1 {
+    margin: 10; 
+    font-size: 1.5em;
+    margin-left: 15px; 
+    }
+
+.page {
+    width: 100%;
+    height: 300px;
+    background-color: white;
+    display: flex;
+    flex-wrap: wrap; 
+}
+
+.group {
+    width: 200px;
+    height: 100px;
+    background-color: lightgrey;
+    border: 2px solid darkgrey;
+    border-radius: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 12px;
+    position: relative;
+}
+
+.group h2 {
+    margin: 0;
+    font-size: 1em;
+    top: 5px;
+    left: 10px;
+    position: absolute;
+}
+
+.primary-btn {
+    background-color: rgb(0, 174, 255);
+    padding: 10px 20px;
+    border: none;
+    color: white;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
 </style>
\ No newline at end of file
diff --git a/nodes/config/ui_theme.js b/nodes/config/ui_theme.js
index daaefbba1..e96c5021c 100644
--- a/nodes/config/ui_theme.js
+++ b/nodes/config/ui_theme.js
@@ -32,7 +32,33 @@ module.exports = function (RED) {
             sizes.widgetGap = '12px'
         }
 
-        node.colors = { ...rest.colors }
+        const colors = { ...rest.colors }
+        node.colors = colors
+
+        if (!hasProperty(colors, 'light') && hasProperty(colors, 'surface')) {
+            // Set default values for light theme
+            const updatedColors = {
+                light: {
+                    surface: colors.surface,
+                    primary: colors.primary,
+                    bgPage: colors.bgPage,
+                    groupBg: colors.groupBg,
+                    groupOutline: colors.groupOutline
+                },
+
+                // Set default values for dark theme
+                dark: {
+                    surface: '#111111',
+                    primary: colors.primary,
+                    bgPage: '#222222',
+                    groupBg: '#333333',
+                    groupOutline: '#cccccc'
+                }
+            }
+
+            node.colors = updatedColors
+        }
+
         node.sizes = sizes
 
         let uiBase = null
diff --git a/test/nodes/fixtures/ui-theme.json b/test/nodes/fixtures/ui-theme.json
index 719d82568..55d2d33a9 100644
--- a/test/nodes/fixtures/ui-theme.json
+++ b/test/nodes/fixtures/ui-theme.json
@@ -1,12 +1,21 @@
 {
-    "id": "config-ui-theme",
-    "type": "ui-theme",
-    "name": "Theme 1",
-    "colors": {
-        "surface": "#ffffff",
-        "primary": "#0094ce",
-        "bgPage": "#eeeeee",
-        "groupBg": "#ffffff",
-        "groupOutline": "#cccccc"
+  "id": "config-ui-theme",
+  "type": "ui-theme",
+  "name": "Theme 1",
+  "colors": {
+    "light": {
+      "surface": "#ffffff",
+      "primary": "#0094CE",
+      "bgPage": "#eeeeee",
+      "groupBg": "#ffffff",
+      "groupOutline": "#cccccc"
+    },
+    "dark": {
+      "surface": "#111111",
+      "primary": "#0094CE",
+      "bgPage": "#222222",
+      "groupBg": "#333333",
+      "groupOutline": "#cccccc"
     }
+  }
 }
diff --git a/ui/src/layouts/Baseline.vue b/ui/src/layouts/Baseline.vue
index 860eb01b9..fe5ccdf8b 100644
--- a/ui/src/layouts/Baseline.vue
+++ b/ui/src/layouts/Baseline.vue
@@ -54,6 +54,18 @@
                         </template>
                     </v-tooltip>
                 </v-list>
+                <v-btn
+                    class="ma-4 position-absolute bottom-0 left-0" icon
+                    :color="darkMode ? 'grey-darken-4' : 'grey-lighten-3'"
+                    @click="toggleTheme"
+                >
+                    <v-icon
+                        :color="darkMode ? 'yellow-lighten-4' : 'yellow-darken-2'"
+                        size="32"
+                    >
+                        {{ darkMode ? 'mdi-weather-night' : 'mdi-weather-sunny' }}
+                    </v-icon>
+                </v-btn>
             </v-navigation-drawer>
             <slot class="nrdb-layout" />
             <div class="nrdb-layout-overlay">
@@ -77,14 +89,34 @@
     </v-app>
 </template>
 
-<script>
-import { mapGetters, mapState } from 'vuex'
+<script setup>
+import { useTheme } from 'vuetify'
+
+import { mapGetters, mapState, useStore } from 'vuex'
 
 import { editMode, editPage } from '../EditTracking.js'
 
 import Alerts from '../services/alerts'
 import UINotification from '../widgets/ui-notification/UINotification.vue'
 
+const theme = useTheme()
+const store = useStore()
+
+function toggleTheme () {
+    if (theme.global.name.value === 'nrdbDark') {
+        theme.global.name.value = 'nrdbLight'
+        store.commit('ui/setDarkMode', false)
+        localStorage.setItem('ndrb-theme-dark-mode', JSON.stringify(false))
+    } else {
+        theme.global.name.value = 'nrdbDark'
+        store.commit('ui/setDarkMode', true)
+        localStorage.setItem('ndrb-theme-dark-mode', JSON.stringify(true))
+    }
+}
+
+</script>
+
+<script>
 /**
  * Convert a hex to RGB color
  * @param {String(hex)} hex
@@ -138,7 +170,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('ui', ['dashboards', 'pages', 'themes', 'pageData', 'widgets']),
+        ...mapState('ui', ['dashboards', 'pages', 'themes', 'pageData', 'widgets', 'darkMode']),
         ...mapGetters('ui', ['siteTemplates', 'pageTemplates']),
         theme: function () {
             const page = this.pages[this.$route.meta.id]
@@ -305,22 +337,38 @@ export default {
             })
         },
         updateTheme () {
-            const colors = this.$vuetify.theme.themes.nrdb.colors // Modify the Vuetify Theming
+            const colorsLight = this.$vuetify.theme.themes.nrdbLight.colors // Modify the Vuetify Theming
+            const colorsDark = this.$vuetify.theme.themes.nrdbDark.colors // Modify the Vuetify Theming
             const sizes = this.customThemeDefinitions // Implement some of our own Theming
             // convert NR Theming to Vuetify Theming
             if (this.theme) {
-                colors['navigation-background'] = this.theme.colors.surface
+                // light theme
+                colorsLight['navigation-background'] = this.theme.colors.light.surface
+                // primary bg
+                colorsLight.primary = this.theme.colors.light.primary
+                // primary font - auto calculated
+                colorsLight['on-primary'] = getContrast(this.theme.colors.light.primary)
+                // UI Background
+                colorsLight.background = this.theme.colors.light.bgPage
+                // Group Styling
+                colorsLight['group-background'] = this.theme.colors.light.groupBg
+                colorsLight['group-outline'] = this.theme.colors.light.groupOutline
+                // widget background
+                colorsLight.surface = this.theme.colors.light.groupBg
+
+                // dark theme
+                colorsDark['navigation-background'] = this.theme.colors.dark.surface
                 // primary bg
-                colors.primary = this.theme.colors.primary
+                colorsDark.primary = this.theme.colors.dark.primary
                 // primary font - auto calculated
-                colors['on-primary'] = getContrast(this.theme.colors.primary)
+                colorsDark['on-primary'] = getContrast(this.theme.colors.dark.primary)
                 // UI Background
-                colors.background = this.theme.colors.bgPage
+                colorsDark.background = this.theme.colors.dark.bgPage
                 // Group Styling
-                colors['group-background'] = this.theme.colors.groupBg
-                colors['group-outline'] = this.theme.colors.groupOutline
+                colorsDark['group-background'] = this.theme.colors.dark.groupBg
+                colorsDark['group-outline'] = this.theme.colors.dark.groupOutline
                 // widget background
-                colors.surface = this.theme.colors.groupBg
+                colorsDark.surface = this.theme.colors.dark.groupBg
 
                 // sizes
                 sizes['--page-padding'] = this.theme.sizes.pagePadding
diff --git a/ui/src/main.mjs b/ui/src/main.mjs
index 5a7f1184b..f55ba62b1 100644
--- a/ui/src/main.mjs
+++ b/ui/src/main.mjs
@@ -34,21 +34,48 @@ function retrieveDefaultThemeFromCache () {
     return null
 }
 
+function retrieveDarkModeFromCache () {
+    const cachedDarkMode = localStorage.getItem('ndrb-theme-dark-mode')
+    if (cachedDarkMode) {
+        return JSON.parse(cachedDarkMode)
+    }
+    return false
+}
+
 const defaultTheme = retrieveDefaultThemeFromCache()
+const darkMode = retrieveDarkModeFromCache()
 
 // 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 = {
+const lightTheme = {
     dark: false,
     colors: {
-        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',
+        background: defaultTheme ? defaultTheme.colors.light.bgPage : '#fff',
+        'navigation-background': defaultTheme ? defaultTheme.colors.light.surface : '#ffffff',
+        'group-background': defaultTheme ? defaultTheme.colors.light.groupBg : '#ffffff',
+        'group-outline': defaultTheme ? defaultTheme.colors.light.groupOutline : '#d1d1d1',
+        primary: defaultTheme ? defaultTheme.colors.light.primary : '#0094CE',
+        accent: '#ff6b99',
+        secondary: '#26ff8c',
+        success: '#a5d64c',
+        surface: defaultTheme ? defaultTheme.colors.light.surface : '#ffffff',
+        info: '#ff53d0',
+        warning: '#ff8e00',
+        error: '#ff5252'
+    }
+}
+
+const darkTheme = {
+    dark: true,
+    colors: {
+        background: defaultTheme ? defaultTheme.colors.dark.bgPage : '#222222',
+        'navigation-background': defaultTheme ? defaultTheme.colors.dark.surface : '#111111',
+        'group-background': defaultTheme ? defaultTheme.colors.dark.groupBg : '#333333',
+        'group-outline': defaultTheme ? defaultTheme.colors.dark.groupOutline : '#cccccc',
+        primary: defaultTheme ? defaultTheme.colors.dark.primary : '#0094CE',
         accent: '#ff6b99',
         secondary: '#26ff8c',
         success: '#a5d64c',
-        surface: defaultTheme ? defaultTheme.colors.surface : '#ffffff',
+        surface: defaultTheme ? defaultTheme.colors.dark.surface : '#111111',
         info: '#ff53d0',
         warning: '#ff8e00',
         error: '#ff5252'
@@ -65,9 +92,10 @@ const vuetify = createVuetify({
         resize: Resize
     },
     theme: {
-        defaultTheme: 'nrdb',
+        defaultTheme: darkMode ? 'nrdbDark' : 'nrdbLight',
         themes: {
-            nrdb: theme
+            nrdbLight: lightTheme,
+            nrdbDark: darkTheme
         }
     },
     defaults: {
diff --git a/ui/src/store/ui.mjs b/ui/src/store/ui.mjs
index 8a41f8b41..d69a443bf 100644
--- a/ui/src/store/ui.mjs
+++ b/ui/src/store/ui.mjs
@@ -35,7 +35,8 @@ const state = () => ({
     /** @type {Widgets} */
     groups: null,
     /** @type {Widgets} */
-    widgets: null
+    widgets: null,
+    darkMode: JSON.parse(localStorage.getItem('ndrb-theme-dark-mode')) || false
 })
 
 // getters
@@ -66,6 +67,11 @@ const getters = {
     widgets (state) {
         return state.widgets
     },
+
+    darkMode (state) {
+        return state.darkMode
+    },
+
     pageByName: (state) => (name) => {
         if (state.pages) {
             return Object.values(state.pages).filter((p) => {
@@ -219,6 +225,9 @@ const mutations = {
         for (const prop in config) {
             state[item + 's'][itemId][prop] = config[prop]
         }
+    },
+    setDarkMode (state, darkMode) {
+        state.darkMode = darkMode
     }
 }