fix(ui): enhance theme handling and protocol color management

robertsLando · robertsLando · commit d0efbb105ccc · 2025-06-27T09:44:08.000+02:00
diff --git a/src/App.vue b/src/App.vue
@@ -612,6 +612,14 @@ export default {
 
 			return toReturn
 		},
+		currentTheme() {
+			const { isDark, themes } = this.$vuetify.theme
+			if (isDark) {
+				return themes.dark
+			} else {
+				return themes.light
+			}
+		},
 	},
 	watch: {
 		$route(value) {
diff --git a/src/components/nodes-table/nodes-table.js b/src/components/nodes-table/nodes-table.js
@@ -29,6 +29,7 @@ import {
 	getProtocol,
 	getProtocolColor,
 } from '../../lib/utils.js'
+import { instances, manager } from '../../lib/instanceManager.js'
 
 export default {
 	props: {
@@ -51,8 +52,11 @@ export default {
 	},
 	computed: {
 		...mapState(useBaseStore, ['nodes']),
+		app() {
+			return manager.getInstance(instances.APP)
+		},
 		currentTheme() {
-			return this.$vuetify.theme.currentTheme
+			return this.app.currentTheme
 		},
 	},
 	data: function () {
@@ -180,7 +184,7 @@ export default {
 
 						v.icon = mdiZWave
 						v.description = getProtocol(node)
-						v.iconStyle = `color: ${getProtocolColor(node)}`
+						v.iconStyle = `color: ${getProtocolColor(node, this.currentTheme)}`
 						return v
 					},
 				},
@@ -261,7 +265,9 @@ export default {
 
 			return undefined
 		},
-		getProtocolIcon,
+		getProtocolIcon(protocol) {
+			return getProtocolIcon(protocol, this.currentTheme)
+		},
 		groupValue(group) {
 			return this.managedNodes.groupValue(group)
 		},
@@ -297,12 +303,9 @@ export default {
 			return map[status] || 'grey'
 		},
 		powerRichValue(node) {
-			console.log(
-				'powerRichValue',
-				this.$vuetify.theme.currentTheme.success,
-			)
+			console.log('powerRichValue', this.currentTheme.success)
 			let level = node.minBatteryLevel
-			let iconStyle = `color: ${this.$vuetify.theme.currentTheme.success}`
+			let iconStyle = `color: ${this.currentTheme.success}`
 			let icon = ''
 			let label = ''
 			let description = ''
diff --git a/src/lib/utils.js b/src/lib/utils.js
@@ -202,12 +202,12 @@ export function getProtocol(node) {
 	}
 }
 
-export function getProtocolColor(node) {
+export function getProtocolColor(node, currentTheme) {
 	switch (node.protocol) {
 		case Protocols.ZWave:
-			return 'primary'
+			return currentTheme.info
 		case Protocols.ZWaveLongRange:
-			return 'purple'
+			return currentTheme.purple
 		default:
 			return 'grey'
 	}
@@ -319,17 +319,20 @@ export function isPopupWindow() {
 	return window.opener !== null && window.opener !== window
 }
 
-export function getProtocolIcon(protocol) {
+export function getProtocolIcon(protocol, currentTheme) {
 	if (typeof protocol === 'boolean') {
 		protocol = protocol ? Protocols.ZWaveLongRange : Protocols.ZWave
 	}
 
 	return {
 		align: 'center',
 		icon: mdiZWave,
-		iconStyle: `color: ${getProtocolColor({
-			protocol,
-		})}`,
+		iconStyle: `color: ${getProtocolColor(
+			{
+				protocol,
+			},
+			currentTheme,
+		)}`,
 		description: getProtocol({ protocol }),
 	}
 }
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -15,14 +15,12 @@ const opts = {
 	theme: {
 		options: { customProperties: true }, // enable sass/scss variables
 		themes: {
-			// dark: {
-			// 	purple: '#BA68C8',
-			// 	primary: '#42A5F5',
-			// 	warning: '#FFB74D',
-			// 	success: '#81C784',
-			// 	error: '#EF5350',
-			// 	info: '#42A5F5',
-			// },
+			dark: {
+				purple: '#BA68C8',
+			},
+			light: {
+				purple: '#BA68C8',
+			},
 		},
 	},
 }
diff --git a/src/views/SmartStart.vue b/src/views/SmartStart.vue
@@ -437,7 +437,9 @@ export default {
 			this.showInfoTooltip = false
 		},
 		getProtocol,
-		getProtocolColor,
+		getProtocolColor(node) {
+			return getProtocolColor(node, this.app.currentTheme)
+		},
 		showNodeDialog(entity) {
 			const node = this.nodes.find((n) => n.id === entity.nodeId)
 			if (node) {
diff --git a/src/views/Zniffer.vue b/src/views/Zniffer.vue
@@ -120,10 +120,7 @@
 							<!-- add to append-outer slot the total numer of frames -->
 
 							<template v-slot:append-outer>
-								<v-col
-									style="margin-top: -7px"
-									v-if="totalFrames"
-									class="pa-0 caption grey--text text-center"
+								<v-colappaption grey--text text-center"
 								>
 									<p class="mb-0">Frames</p>
 									<p class="mb-0">
@@ -401,6 +398,7 @@ import {
 	getProtocolIcon,
 	isPopupWindow,
 } from '../lib/utils'
+import { instances, manager } from '../lib/instanceManager.js'
 
 export default {
 	name: 'Zniffer',
@@ -417,6 +415,9 @@ export default {
 	},
 	computed: {
 		...mapState(useBaseStore, ['zniffer', 'znifferState']),
+		app() {
+			return manager.getInstance(instances.APP)
+		},
 		buttons() {
 			return [
 				{
@@ -676,7 +677,6 @@ export default {
 	},
 	methods: {
 		...mapActions(useBaseStore, ['showSnackbar']),
-		getProtocolIcon,
 		openInWindow,
 		humanFriendlyNumber,
 		initializeViewState() {
@@ -689,6 +689,9 @@ export default {
 				this.viewState = 'initial'
 			}
 		},
+		getProtocolIcon(protocol) {
+			return getProtocolIcon(protocol, this.app.currentTheme)
+		},
 		emptyQueue() {
 			if (this.framesQueue.length > 0) {
 				this.frames.push(...this.framesQueue)

Original file line number	Diff line number	Diff line change
`@@ -202,12 +202,12 @@ export function getProtocol(node) {`
`202`	`202`	`}`
`203`	`203`	`}`
`204`	`204`
`205`		`-export function getProtocolColor(node) {`
	`205`	`+export function getProtocolColor(node, currentTheme) {`
`206`	`206`	`switch (node.protocol) {`
`207`	`207`	`case Protocols.ZWave:`
`208`		`- return 'primary'`
	`208`	`+ return currentTheme.info`
`209`	`209`	`case Protocols.ZWaveLongRange:`
`210`		`- return 'purple'`
	`210`	`+ return currentTheme.purple`
`211`	`211`	`default:`
`212`	`212`	`return 'grey'`
`213`	`213`	`}`
`@@ -319,17 +319,20 @@ export function isPopupWindow() {`
`319`	`319`	`return window.opener !== null && window.opener !== window`
`320`	`320`	`}`
`321`	`321`
`322`		`-export function getProtocolIcon(protocol) {`
	`322`	`+export function getProtocolIcon(protocol, currentTheme) {`
`323`	`323`	`if (typeof protocol === 'boolean') {`
`324`	`324`	`protocol = protocol ? Protocols.ZWaveLongRange : Protocols.ZWave`
`325`	`325`	`}`
`326`	`326`
`327`	`327`	`return {`
`328`	`328`	`align: 'center',`
`329`	`329`	`icon: mdiZWave,`
`330`		- iconStyle: `color: ${getProtocolColor({
`331`		`- protocol,`
`332`		- })}`,
	`330`	+ iconStyle: `color: ${getProtocolColor(
	`331`	`+ {`
	`332`	`+ protocol,`
	`333`	`+ },`
	`334`	`+ currentTheme,`
	`335`	+ )}`,
`333`	`336`	`description: getProtocol({ protocol }),`
`334`	`337`	`}`
`335`	`338`	`}`