fix(ui): improve colors contrast in dark mode

Fixes #4091

src/App.vue

@@ -35,7 +35,7 @@
 					>
 						<v-list-item-action>
 							<v-badge
-								color="red"
+								color="error"
 								:value="item.badge"
 								:content="item.badge"
 								dot
@@ -139,7 +139,7 @@
 							dark
 							medium
 							style="cursor: default"
-							:color="statusColor || 'orange'"
+							:color="statusColor || 'warning'"
 							v-on="on"
 							>swap_horizontal_circle</v-icon
 						>
@@ -187,7 +187,7 @@
 							class="mr-3"
 							:content="updateAvailable"
 							:value="updateAvailable"
-							color="red"
+							color="error"
 							overlap
 						>
 							<v-btn small icon @click="showUpdateDialog">
@@ -572,13 +572,13 @@ export default {
 				case InclusionState.Excluding:
 					toReturn.message = 'Exclusion is active'
 					toReturn.icon = 'cancel'
-					toReturn.color = 'red'
+					toReturn.color = 'error'
 					break
 				case InclusionState.Busy:
 					toReturn.message =
 						'Waiting for inclusion/exclusion to complete...'
 					toReturn.icon = 'hourglass_bottom'
-					toReturn.color = 'yellow'
+					toReturn.color = 'warning'
 					break
 				case InclusionState.SmartStart:
 					toReturn.message = 'SmartStart inclusion is active'
@@ -799,8 +799,8 @@ export default {
 			options = options || {}
 
 			const levelMap = {
-				warning: 'orange',
-				alert: 'red',
+				warning: 'warning',
+				alert: 'error',
 			}
 
 			options.color = options.color || levelMap[level] || 'primary'
@@ -811,8 +811,8 @@ export default {
 			options = options || {}
 
 			const levelMap = {
-				warning: 'orange',
-				alert: 'red',
+				warning: 'warning',
+				alert: 'error',
 			}
 
 			options.color = options.color || levelMap[level] || 'primary'
@@ -1111,7 +1111,7 @@ export default {
 			})
 
 			this.socket.on('connect', () => {
-				this.updateStatus('Connected', 'green')
+				this.updateStatus('Connected', 'success')
 				log.info('Socket connected')
 				this.socket.emit(
 					socketActions.init,
@@ -1133,15 +1133,15 @@ export default {
 
 			this.socket.on('disconnect', () => {
 				log.info('Socket disconnected')
-				this.updateStatus('Disconnected', 'red')
+				this.updateStatus('Disconnected', 'error')
 			})
 
 			this.socket.on('error', (err) => {
 				log.info('Socket error', err)
 			})
 
 			this.socket.on('reconnecting', () => {
-				this.updateStatus('Reconnecting', 'yellow')
+				this.updateStatus('Reconnecting', 'warning')
 			})
 
 			if (log.enabledFor(logger.DEBUG)) {

src/components/ValueId.vue

@@ -225,7 +225,7 @@
 						:color="
 							value.newValue === true && !value.list
 								? 'white'
-								: 'green'
+								: 'success'
 						"
 						dark
 						@click="updateValue(value, true)"
@@ -235,7 +235,7 @@
 							:color="
 								value.newValue === true && !value.list
 									? 'white'
-									: 'green'
+									: 'success'
 							"
 							style="rotate: 90deg"
 							>horizontal_rule</v-icon
@@ -255,7 +255,7 @@
 						:color="
 							value.newValue === false && !value.list
 								? 'white'
-								: 'red'
+								: 'error'
 						"
 						@click="updateValue(value, false)"
 						dark
@@ -265,7 +265,7 @@
 							:color="
 								value.newValue === false && !value.list
 									? 'white'
-									: 'red'
+									: 'error'
 							"
 							>radio_button_unchecked</v-icon
 						>

src/components/custom/StatisticsArrows.vue

@@ -4,12 +4,12 @@
 			<center v-on="on">
 				<blink-icon
 					icon="north"
-					:activeColor="node.errorTransmit ? 'error' : 'green'"
+					:activeColor="node.errorTransmit ? 'error' : 'success'"
 					:active="now - node.lastTransmit < 200"
 				/>
 				<blink-icon
 					icon="south"
-					:activeColor="node.errorReceive ? 'error' : 'green'"
+					:activeColor="node.errorReceive ? 'error' : 'success'"
 					:active="now - node.lastReceive < 200"
 				/>
 				<div class="text-caption">

src/components/custom/StatisticsCard.vue

@@ -97,17 +97,21 @@ export default {
 					divider: true,
 					stats: {
 						...this.createStat('CAN', 'CAN'),
-						...this.createStat('NAK', 'NAK', 'red'),
-						...this.createStat('timeoutACK', 'Timeout ACK', 'red'),
+						...this.createStat('NAK', 'NAK', 'error'),
+						...this.createStat(
+							'timeoutACK',
+							'Timeout ACK',
+							'error',
+						),
 						...this.createStat(
 							'timeoutResponse',
 							'Timeout Response',
-							'red',
+							'error',
 						),
 						...this.createStat(
 							'timeoutCallback',
 							'Timeout Callback',
-							'red',
+							'error',
 						),
 					},
 					cols: 6,
@@ -121,12 +125,12 @@ export default {
 						...this.createStat(
 							'commandsDroppedTX',
 							'Dropped TX',
-							'red',
+							'error',
 						),
 						...this.createStat(
 							'commandsDroppedRX',
 							'Dropped RX',
-							'red',
+							'error',
 						),
 					},
 					cols: 3,
@@ -143,12 +147,12 @@ export default {
 						...this.createStat(
 							'messagesDroppedTX',
 							'Dropped TX',
-							'red',
+							'error',
 						),
 						...this.createStat(
 							'messagesDroppedRX',
 							'Dropped RX',
-							'red',
+							'error',
 						),
 					},
 					cols: 3,

src/components/dialogs/DialogLinkReliability.vue

@@ -82,7 +82,7 @@
 							v-if="running"
 							:indeterminate="this.infinite"
 							:value="this.infinite ? null : this.progress"
-							color="green darken-1"
+							color="success"
 						></v-progress-linear>
 						<v-list dense>
 							<v-list-item>

src/components/dialogs/DialogNodesManager.vue

@@ -60,7 +60,7 @@
 											<template v-slot:label>
 												<div class="option">
 													<v-icon
-														color="green accent-4"
+														color="success"
 														small
 														>add_circle</v-icon
 													>
@@ -97,9 +97,7 @@
 										>
 											<template v-slot:label>
 												<div class="option">
-													<v-icon
-														color="red accent-4"
-														small
+													<v-icon color="error" small
 														>remove_circle</v-icon
 													>
 													<strong>Exclusion</strong>
@@ -219,7 +217,7 @@
 											<template v-slot:label>
 												<div class="option">
 													<v-icon
-														color="green accent-4"
+														color="success"
 														small
 														>add_circle</v-icon
 													>
@@ -392,7 +390,7 @@
 											<template v-slot:label>
 												<div class="option">
 													<v-icon
-														color="green accent-4"
+														color="success"
 														small
 														>enhanced_encryption</v-icon
 													>

src/components/nodes-table/AssociationGroups.vue

@@ -10,14 +10,14 @@
 				<template v-slot:top>
 					<v-btn
 						text
-						color="green"
+						color="success"
 						@click="dialogAssociation = true"
 						class="mb-2"
 						>Add</v-btn
 					>
 					<v-btn
 						text
-						color="red"
+						color="error"
 						@click="removeAllAssociations"
 						class="mb-2"
 						>Remove All</v-btn
@@ -57,7 +57,7 @@
 					}}
 				</template>
 				<template v-slot:[`item.actions`]="{ item }">
-					<v-icon small color="red" @click="removeAssociation(item)"
+					<v-icon small color="error" @click="removeAssociation(item)"
 						>delete</v-icon
 					>
 				</template>

src/components/nodes-table/ExpandedNode.vue

@@ -54,7 +54,7 @@
 					</v-btn>
 					<v-btn
 						dark
-						color="green"
+						color="success"
 						depressed
 						@click="advancedShowDialog = true"
 					>
@@ -425,7 +425,7 @@ export default {
 								},
 							],
 							icon: 'update',
-							color: 'red',
+							color: 'error',
 							desc: 'Perform a firmware update OTW (Over The Wire)',
 						},
 					]
@@ -443,6 +443,7 @@ export default {
 								},
 							],
 							icon: 'update',
+							color: 'error',
 							desc: 'Start/Stop a firmware update',
 						},
 						{
@@ -480,6 +481,7 @@ export default {
 									action: 'replaceFailedNode',
 								},
 							],
+							color: 'error',
 							icon: 'dangerous',
 							desc: 'Manage nodes that are dead and/or marked as failed with the controller',
 						},
@@ -499,6 +501,7 @@ export default {
 						},
 					],
 					icon: 'healing',
+					color: 'warning',
 					desc: 'Discover and assign new routes from node to the controller and other nodes.',
 				})
 			}
@@ -509,6 +512,7 @@ export default {
 						{
 							name: 'Clear',
 							action: 'removeAllAssociations',
+							color: 'error',
 							args: {
 								confirm:
 									"This action will remove all associations of this node. This will also clear lifeline association with controller node, the node won't report state changes until that is set up again",
@@ -589,6 +593,7 @@ export default {
 						},
 					],
 					icon: 'link_off',
+					color: 'error',
 					desc: 'Clear all node associations / Remove node from all associations',
 				},
 				...CCActions,

src/components/nodes-table/HomeAssistant.vue

@@ -23,7 +23,7 @@
 					<template v-slot:activator="{ on }">
 						<v-btn
 							v-on="on"
-							color="blue darken-1"
+							color="primary"
 							text
 							@click="storeDevices(false)"
 							>Store</v-btn
@@ -39,7 +39,7 @@
 					<template v-slot:activator="{ on }">
 						<v-btn
 							v-on="on"
-							color="red darken-1"
+							color="error"
 							text
 							@click="storeDevices(true)"
 							>Remove Store</v-btn
@@ -54,7 +54,7 @@
 					<template v-slot:activator="{ on }">
 						<v-btn
 							v-on="on"
-							color="green darken-1"
+							color="success"
 							text
 							@click="rediscoverNode"
 							>Rediscover Node</v-btn
@@ -70,7 +70,7 @@
 					<template v-slot:activator="{ on }">
 						<v-btn
 							v-on="on"
-							color="yellow darken-1"
+							color="warning"
 							text
 							@click="disableDiscovery"
 							>Disable Discovery</v-btn
@@ -125,7 +125,7 @@
 					<template v-slot:activator="{ on }">
 						<v-btn
 							v-on="on"
-							color="blue darken-1"
+							color="primary"
 							:disabled="errorDevice"
 							text
 							@click="addDevice()"
@@ -139,7 +139,7 @@
 					<template v-slot:activator="{ on }">
 						<v-btn
 							v-on="on"
-							color="blue darken-1"
+							color="primary"
 							:disabled="errorDevice"
 							text
 							@click="updateDeviceJSON()"
@@ -156,7 +156,7 @@
 					<template v-slot:activator="{ on }">
 						<v-btn
 							v-on="on"
-							color="green darken-1"
+							color="success"
 							:disabled="errorDevice"
 							text
 							@click="rediscoverDevice"
@@ -170,7 +170,7 @@
 					<template v-slot:activator="{ on }">
 						<v-btn
 							v-on="on"
-							color="red darken-1"
+							color="error"
 							:disabled="errorDevice"
 							text
 							@click="deleteDevice"

src/components/nodes-table/NodeDetails.vue

@@ -303,7 +303,7 @@
 											<v-btn
 												width="60px"
 												@click.stop="configurationGet()"
-												color="green"
+												color="success"
 												x-small
 												dark
 											>

src/components/nodes-table/NodeScheduler.vue

@@ -47,7 +47,7 @@
 						outlined
 						text
 						:disabled="schedule.numSlots <= items.length"
-						color="green"
+						color="success"
 						@click="editSlot()"
 						class="mb-2"
 						>Add</v-btn
@@ -66,7 +66,7 @@
 				</template>
 
 				<template v-slot:[`item.actions`]="{ item }">
-					<v-icon small color="red" @click="removeSlot(item.slot)"
+					<v-icon small color="error" @click="removeSlot(item.slot)"
 						>delete</v-icon
 					>
 					<v-icon small color="success" @click="editSlot(item.slot)"

src/components/nodes-table/OTAUpdates.vue

@@ -7,7 +7,7 @@
 						:disabled="loading"
 						outlined
 						class="my-auto"
-						color="green"
+						color="success"
 						@click="checkUpdates"
 						>Check updates</v-btn
 					>

src/components/nodes-table/index.vue

@@ -95,7 +95,7 @@
 				<v-tooltip bottom>
 					<template v-slot:activator="{ on }">
 						<v-btn
-							color="blue darken-1"
+							color="primary"
 							class="my-auto"
 							text
 							v-on="on"
@@ -109,7 +109,7 @@
 				<v-tooltip bottom>
 					<template v-slot:activator="{ on }">
 						<v-btn
-							color="blue darken-1"
+							color="primary"
 							class="my-auto"
 							text
 							v-on="on"

src/components/nodes-table/nodes-table.js

@@ -51,6 +51,9 @@ export default {
 	},
 	computed: {
 		...mapState(useBaseStore, ['nodes']),
+		currentTheme() {
+			return this.$vuetify.theme.currentTheme
+		},
 	},
 	data: function () {
 		return {
@@ -100,12 +103,12 @@ export default {
 							v.icon = mdiCheckCircle
 							v.iconStyle =
 								node.security === 'S0_Legacy'
-									? `color: ${colors.orange.base}`
-									: `color: ${colors.green.base}`
+									? `color: ${this.currentTheme.warning}`
+									: `color: ${this.currentTheme.success}`
 							v.description = node.security
 						} else if (node.isSecure === false) {
 							v.icon = mdiMinusCircle
-							v.iconStyle = `color: ${colors.red.base}`
+							v.iconStyle = `color: ${this.currentTheme.error}`
 							v.description = 'No security'
 						}
 						return v
@@ -123,12 +126,12 @@ export default {
 							},
 							true: {
 								icon: mdiCheckCircle,
-								iconStyle: `color: ${colors.green.base}`,
+								iconStyle: `color: ${this.currentTheme.success}`,
 								description: 'Beaming is supported',
 							},
 							false: {
 								icon: mdiMinusCircle,
-								iconStyle: `color: ${colors.red.base}`,
+								iconStyle: `color: ${this.currentTheme.error}`,
 								description: 'Beaming is unsupported',
 							},
 						}),
@@ -141,15 +144,15 @@ export default {
 							align: 'center',
 							icon: node.ready ? mdiMinusCircle : mdiHelpCircle,
 							iconStyle: node.ready
-								? `color: ${colors.red.base}`
+								? `color: ${this.currentTheme.error}`
 								: 'color: grey',
 							description: node.ready
 								? 'No'
 								: 'Unknown ZWave+ version',
 						}
 						if (node.zwavePlusVersion === undefined) return v
 						v.description = `ZWave+ version: ${node.zwavePlusVersion}`
-						v.iconStyle = `color: ${colors.green.base}`
+						v.iconStyle = `color: ${this.currentTheme.success}`
 						if (node.zwavePlusVersion === 1) {
 							v.icon = mdiNumeric1Circle
 						} else if (node.zwavePlusVersion === 2) {
@@ -169,7 +172,7 @@ export default {
 							align: 'center',
 							icon: node.ready ? mdiMinusCircle : mdiHelpCircle,
 							iconStyle: node.ready
-								? `color: ${colors.red.base}`
+								? `color: ${this.currentTheme.error}`
 								: 'color: grey',
 							description: node.ready ? 'No' : 'Unknown Protocol',
 						}
@@ -198,19 +201,19 @@ export default {
 						switch (node.status) {
 							case 'Asleep':
 								v.icon = mdiSleep
-								v.iconStyle = `color: ${colors.orange.base}`
+								v.iconStyle = `color: ${this.currentTheme.warning}`
 								break
 							case 'Awake':
 								v.icon = mdiEmoticon
-								v.iconStyle = `color: ${colors.green.base}`
+								v.iconStyle = `color: ${this.currentTheme.success}`
 								break
 							case 'Dead':
 								v.icon = mdiEmoticonDead
-								v.iconStyle = `color: ${colors.red.base}`
+								v.iconStyle = `color: ${this.currentTheme.error}`
 								break
 							case 'Alive':
 								v.icon = mdiCheckCircle
-								v.iconStyle = `color: ${colors.green.base}`
+								v.iconStyle = `color: ${this.currentTheme.success}`
 								break
 						}
 						return v
@@ -249,11 +252,11 @@ export default {
 		getRebuildRoutesIcon(status) {
 			switch (status) {
 				case 'done':
-					return { icon: 'done', color: 'green' }
+					return { icon: 'done', color: 'success' }
 				case 'failed':
-					return { icon: 'error', color: 'red' }
+					return { icon: 'error', color: 'error' }
 				case 'skipped':
-					return { icon: 'next_plan', color: 'blue' }
+					return { icon: 'next_plan', color: 'primary' }
 			}
 
 			return undefined
@@ -285,17 +288,21 @@ export default {
 		interviewStageColor(status) {
 			let map = {
 				None: 'grey',
-				ProtocolInfo: 'red',
-				NodeInfo: 'orange',
-				CommandClasses: 'orange',
-				OverwriteConfig: 'blue',
-				Complete: 'green',
+				ProtocolInfo: 'error',
+				NodeInfo: 'warning',
+				CommandClasses: 'warning',
+				OverwriteConfig: 'primary',
+				Complete: 'success',
 			}
 			return map[status] || 'grey'
 		},
 		powerRichValue(node) {
+			console.log(
+				'powerRichValue',
+				this.$vuetify.theme.currentTheme.success,
+			)
 			let level = node.minBatteryLevel
-			let iconStyle = `color: ${colors.green.base}`
+			let iconStyle = `color: ${this.$vuetify.theme.currentTheme.success}`
 			let icon = ''
 			let label = ''
 			let description = ''
@@ -307,10 +314,10 @@ export default {
 				description = getBatteryDescription(node)
 				if (level <= 10) {
 					icon = mdiBatteryAlertVariantOutline
-					iconStyle = `color: ${colors.red.base}`
+					iconStyle = `color: ${this.currentTheme.error}`
 				} else if (level <= 30) {
 					icon = mdiBattery20
-					iconStyle = `color: ${colors.orange.base}`
+					iconStyle = `color: ${this.currentTheme.warning}`
 				} else if (level <= 70) {
 					icon = mdiBattery50
 				} else if (level <= 90) {

src/plugins/vuetify.js

@@ -7,12 +7,23 @@ import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure
 
 Vue.use(Vuetify)
 
+/** @type { import('vuetify').UserVuetifyPreset } */
 const opts = {
 	icons: {
 		iconfont: 'md',
 	},
 	theme: {
 		options: { customProperties: true }, // enable sass/scss variables
+		themes: {
+			dark: {
+				purple: '#BA68C8',
+				primary: '#42A5F5',
+				warning: '#FFB74D',
+				success: '#81C784',
+				error: '#EF5350',
+				info: '#42A5F5',
+			},
+		},
 	},
 }
 

src/views/ControlPanel.vue

@@ -68,7 +68,7 @@
 		<v-speed-dial bottom fab right fixed v-model="fab">
 			<template v-slot:activator>
 				<v-btn
-					:color="selected.length === 0 ? 'blue darken-2' : 'success'"
+					:color="selected.length === 0 ? 'primary' : 'success'"
 					dark
 					fab
 					hover
@@ -85,7 +85,7 @@
 						v-if="selected.length === 0"
 						dark
 						small
-						color="green"
+						color="success"
 						@click="showNodesManager()"
 						v-bind="attrs"
 						v-on="on"
@@ -221,7 +221,7 @@ export default {
 						},
 					],
 					icon: 'warning',
-					color: 'red',
+					color: 'error',
 					desc: 'Reset controller to factory defaults (all paired devices will be removed)',
 				},
 				{
@@ -288,7 +288,7 @@ export default {
 						},
 					],
 					icon: 'update',
-					color: 'red',
+					color: 'error',
 					desc: 'Perform a firmware update OTW (Over The Wire)',
 				},
 				{

src/views/Debug.vue

@@ -92,7 +92,7 @@ export default {
 					id: 'start',
 					label: 'Start',
 					icon: 'play_arrow',
-					color: 'green',
+					color: 'success',
 					tooltip: 'Start',
 					action: () => this.toggleDebug(true),
 					disabled: this.debugActive,
@@ -101,7 +101,7 @@ export default {
 					id: 'stop',
 					label: 'Stop',
 					icon: 'stop',
-					color: 'red',
+					color: 'error',
 					tooltip: 'Stop',
 					action: () => this.toggleDebug(false),
 					disabled: !this.debugActive,
@@ -110,7 +110,7 @@ export default {
 					id: 'clear',
 					label: 'Clear',
 					icon: 'delete',
-					color: 'orange',
+					color: 'warning',
 					tooltip: 'Clear',
 					action: () => (this.debug = []),
 					disabled: this.debug.length === 0,

src/views/Mesh.vue

@@ -9,12 +9,12 @@
 
 		<!-- <v-speed-dial style="left: 100px" bottom fab left fixed v-model="fab">
 			<template v-slot:activator>
-				<v-btn color="blue darken-2" dark fab hover v-model="fab">
+				<v-btn color="primary" dark fab hover v-model="fab">
 					<v-icon v-if="fab">close</v-icon>
 					<v-icon v-else>add</v-icon>
 				</v-btn>
 			</template>
-			<v-btn fab dark small color="green" @click="debounceRefresh">
+			<v-btn fab dark small color="success" @click="debounceRefresh">
 				<v-icon>refresh</v-icon>
 			</v-btn>
 		</v-speed-dial> -->

src/views/Scenes.vue

@@ -48,13 +48,11 @@
 			class="elevation-1"
 		>
 			<template v-slot:top>
-				<v-btn color="red darken-1" text @click="removeScene"
-					>Delete</v-btn
-				>
-				<v-btn color="green darken-1" text @click="activateScene"
+				<v-btn color="error" text @click="removeScene">Delete</v-btn>
+				<v-btn color="success" text @click="activateScene"
 					>Activate</v-btn
 				>
-				<v-btn color="blue darken-1" text @click="dialogValue = true"
+				<v-btn color="primary" text @click="dialogValue = true"
 					>New Value</v-btn
 				>
 			</template>
@@ -73,12 +71,12 @@
 					<td>
 						<v-icon
 							small
-							color="green"
+							color="success"
 							class="mr-2"
 							@click="editItem(item)"
 							>edit</v-icon
 						>
-						<v-icon small color="red" @click="deleteItem(item)"
+						<v-icon small color="error" @click="deleteItem(item)"
 							>delete</v-icon
 						>
 					</td>

src/views/Settings.vue

@@ -194,7 +194,7 @@
 								>
 									<template v-slot:top>
 										<v-btn
-											color="blue darken-1"
+											color="primary"
 											text
 											@click="dialogValue = true"
 										>
@@ -241,14 +241,14 @@
 										<v-icon
 											small
 											class="mr-2"
-											color="green"
+											color="success"
 											@click="editItem(item)"
 										>
 											edit
 										</v-icon>
 										<v-icon
 											small
-											color="red"
+											color="error"
 											@click="deleteItem(item)"
 										>
 											delete
@@ -276,7 +276,7 @@
 								>
 									<template v-slot:top>
 										<v-btn
-											color="blue darken-1"
+											color="primary"
 											text
 											@click="editJob()"
 										>
@@ -295,7 +295,9 @@
 									>
 										<v-icon
 											:color="
-												item.enabled ? 'green' : 'red'
+												item.enabled
+													? 'success'
+													: 'error'
 											"
 										>
 											{{
@@ -310,7 +312,9 @@
 									>
 										<v-icon
 											:color="
-												item.runOnInit ? 'green' : 'red'
+												item.runOnInit
+													? 'success'
+													: 'error'
 											"
 										>
 											{{
@@ -326,14 +330,14 @@
 										<v-icon
 											small
 											class="mr-2"
-											color="green"
+											color="warning"
 											@click="editJob(item)"
 										>
 											edit
 										</v-icon>
 										<v-icon
 											small
-											color="red"
+											color="error"
 											@click="deleteJob(item)"
 										>
 											delete
@@ -2003,32 +2007,28 @@
 				backgroundColor: internalDarkMode ? '#272727' : '#f5f5f5',
 			}"
 		>
-			<v-btn class="mr-2" small color="red darken-1" @click="resetConfig">
+			<v-btn class="mr-2" small color="error" @click="resetConfig">
 				Reset
 				<v-icon right dark>clear</v-icon>
 			</v-btn>
 			<v-btn
 				class="mr-2"
 				small
-				color="purple darken-1"
+				color="purple"
+				dark
 				@click="importSettings"
 			>
 				Import
 				<v-icon right dark>file_upload</v-icon>
 			</v-btn>
-			<v-btn
-				class="mr-2"
-				small
-				color="green darken-1"
-				@click="exportSettings"
-			>
+			<v-btn class="mr-2" small color="success" @click="exportSettings">
 				Export
 				<v-icon right dark>file_download</v-icon>
 			</v-btn>
 			<v-btn
 				class="mr-5"
 				small
-				color="blue darken-1"
+				color="primary"
 				type="submit"
 				:loading="saving"
 				:disabled="saving || !settingsChanged"

src/views/SmartStart.vue

@@ -188,7 +188,7 @@
 				</div>
 			</template>
 			<template v-slot:[`item.actions`]="{ item }">
-				<v-icon small color="red" @click="removeItem(item)"
+				<v-icon small color="error" @click="removeItem(item)"
 					>delete</v-icon
 				>
 				<v-icon small color="success" @click="editItem(item)"
@@ -205,7 +205,7 @@
 			class="mb-7"
 		>
 			<template v-slot:activator>
-				<v-btn v-model="fab" color="blue darken-3" dark fab>
+				<v-btn v-model="fab" color="primary" dark fab>
 					<v-icon v-if="fab"> close </v-icon>
 					<v-icon v-else> menu </v-icon>
 				</v-btn>
@@ -265,7 +265,7 @@
 						dark
 						small
 						@click="importList"
-						color="red"
+						color="error"
 						v-bind="attrs"
 						v-on="on"
 					>

src/views/Store.vue

@@ -21,10 +21,10 @@
 					style="max-height: calc(100vh - 64px); overflow-y: auto"
 				>
 					<template v-slot:prepend="{ item, open }">
-						<v-icon color="#FFC107" v-if="item.children">
+						<v-icon color="warning" v-if="item.children">
 							{{ open ? 'folder_open' : 'folder' }}
 						</v-icon>
-						<v-icon color="blue" v-else> text_snippet </v-icon>
+						<v-icon color="primary" v-else> text_snippet </v-icon>
 					</template>
 					<template v-slot:label="{ item }">
 						<span class="subtitle-2">{{ item.name }}</span>
@@ -44,7 +44,7 @@
 										@click.stop="writeFile(item.path, true)"
 									>
 										<v-list-item-icon>
-											<v-icon color="yellow"
+											<v-icon color="warning"
 												>create_new_folder</v-icon
 											>
 										</v-list-item-icon>
@@ -74,7 +74,9 @@
 										@click.stop="deleteFile(item)"
 									>
 										<v-list-item-icon>
-											<v-icon color="red">delete</v-icon>
+											<v-icon color="error"
+												>delete</v-icon
+											>
 										</v-list-item-icon>
 										<v-list-item-title
 											>Delete</v-list-item-title
@@ -85,7 +87,7 @@
 										@click.stop="uploadFile(item)"
 									>
 										<v-list-item-icon>
-											<v-icon color="orange"
+											<v-icon color="warning"
 												>upload</v-icon
 											>
 										</v-list-item-icon>
@@ -98,7 +100,7 @@
 							<!-- only show delete -->
 							<v-icon
 								v-else
-								color="red"
+								color="error"
 								@click.stop="deleteFile(item)"
 								>delete</v-icon
 							>
@@ -114,13 +116,7 @@
 				</div>
 				<v-speed-dial bottom fab right absolute v-model="fab">
 					<template v-slot:activator>
-						<v-btn
-							color="blue darken-2"
-							dark
-							fab
-							hover
-							v-model="fab"
-						>
+						<v-btn color="primary" dark fab hover v-model="fab">
 							<v-icon v-if="fab">close</v-icon>
 							<v-icon v-else>settings</v-icon>
 						</v-btn>
@@ -131,7 +127,7 @@
 								fab
 								dark
 								small
-								color="green"
+								color="success"
 								@click="restoreZip()"
 								v-bind="attrs"
 								v-on="on"
@@ -148,7 +144,7 @@
 								fab
 								dark
 								small
-								color="orange"
+								color="warining"
 								@click="uploadFile()"
 								v-bind="attrs"
 								v-on="on"
@@ -182,7 +178,7 @@
 								fab
 								dark
 								small
-								color="yellow"
+								color="warning"
 								@click="refreshTree"
 								v-bind="attrs"
 								v-on="on"
@@ -218,7 +214,7 @@
 								fab
 								dark
 								small
-								color="red"
+								color="error"
 								@click="deleteSelected"
 								v-bind="attrs"
 								v-on="on"
@@ -271,19 +267,11 @@
 					<div class="sticky-bottom pa-0" v-if="!notSupported">
 						<v-toolbar>
 							<v-spacer></v-spacer>
-							<v-btn
-								color="purple darken-1"
-								text
-								@click="writeFile"
-							>
+							<v-btn color="purple" text @click="writeFile">
 								SAVE
 								<v-icon right dark>save</v-icon>
 							</v-btn>
-							<v-btn
-								color="green darken-1"
-								text
-								@click="downloadFile"
-							>
+							<v-btn color="success" text @click="downloadFile">
 								DOWNLOAD
 								<v-icon right dark>file_download</v-icon>
 							</v-btn>