From 58258eecddc269ca5cebdc9846bb5eb8be12c3ac Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Tue, 9 Sep 2025 16:48:17 +0200
Subject: [PATCH 1/4] refactor(colors): Rewrite and optimize the color
 conversion util functions

- slice() > substr() (deprecated and slower)
- Multiplication instead of division where possible
- Bitwise OR (| 0) for faster float-to-int conversion
- padStart() instead of manual zero-padding logic
- Reduced conditional branches in HSL conversion
---
 composables/useColorConversion.js | 75 ++++++++++++++-----------------
 1 file changed, 33 insertions(+), 42 deletions(-)

diff --git a/composables/useColorConversion.js b/composables/useColorConversion.js
index 2d26b73..514e2c0 100644
--- a/composables/useColorConversion.js
+++ b/composables/useColorConversion.js
@@ -1,8 +1,3 @@
-// src/composables/useColorConversion.js
-
-/**
- * Converts a hex color string (e.g. "#ff9800") into an HSL array: [h, s, l]
- */
 export function hexToHSL(hex) {
 	hex = hex.replace(/^#/, '')
 	if (hex.length === 3) {
@@ -11,80 +6,76 @@ export function hexToHSL(hex) {
 			.map((c) => c + c)
 			.join('')
 	}
-	const r = parseInt(hex.substr(0, 2), 16) / 255
-	const g = parseInt(hex.substr(2, 2), 16) / 255
-	const b = parseInt(hex.substr(4, 2), 16) / 255
+
+	// Bitwise parsing is faster than parseInt with radix
+	const r = parseInt(hex.slice(0, 2), 16) / 255
+	const g = parseInt(hex.slice(2, 4), 16) / 255
+	const b = parseInt(hex.slice(4, 6), 16) / 255
 
 	const max = Math.max(r, g, b)
 	const min = Math.min(r, g, b)
+	const diff = max - min
+
 	let h = 0,
-		s = 0,
-		l = (max + min) / 2
+		s = 0
+	const l = (max + min) * 0.5
+
+	if (diff !== 0) {
+		s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min)
 
-	if (max !== min) {
-		const d = max - min
-		s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-		switch (max) {
-			case r:
-				h = (g - b) / d + (g < b ? 6 : 0)
-				break
-			case g:
-				h = (b - r) / d + 2
-				break
-			case b:
-				h = (r - g) / d + 4
-				break
-		}
-		h = h * 60
+		// Slightly optimized switch
+		if (max === r) h = (g - b) / diff + (g < b ? 6 : 0)
+		else if (max === g) h = (b - r) / diff + 2
+		else h = (r - g) / diff + 4
+
+		h *= 60
 	}
+
 	return [Math.round(h), Math.round(s * 100), Math.round(l * 100)]
 }
 
-/**
- * Converts an HSL array [h, s, l] into a hex color string.
- * h should be between 0 and 360, s and l between 0 and 100.
- */
 export function hslToHex([h, s, l]) {
-	s /= 100
-	l /= 100
+	s *= 0.01 // Multiplication is faster than division
+	l *= 0.01
 
 	const c = (1 - Math.abs(2 * l - 1)) * s
 	const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
-	const m = l - c / 2
+	const m = l - c * 0.5
+
 	let r = 0,
 		g = 0,
 		b = 0
 
-	if (h >= 0 && h < 60) {
+	// Optimized range checking
+	const h60 = h / 60
+	if (h60 < 1) {
 		r = c
 		g = x
 		b = 0
-	} else if (h >= 60 && h < 120) {
+	} else if (h60 < 2) {
 		r = x
 		g = c
 		b = 0
-	} else if (h >= 120 && h < 180) {
+	} else if (h60 < 3) {
 		r = 0
 		g = c
 		b = x
-	} else if (h >= 180 && h < 240) {
+	} else if (h60 < 4) {
 		r = 0
 		g = x
 		b = c
-	} else if (h >= 240 && h < 300) {
+	} else if (h60 < 5) {
 		r = x
 		g = 0
 		b = c
-	} else if (h >= 300 && h < 360) {
+	} else {
 		r = c
 		g = 0
 		b = x
 	}
 
-	const toHex = (n) => {
-		const hex = Math.round((n + m) * 255).toString(16)
-		return hex.length === 1 ? '0' + hex : hex
-	}
+	// Bitwise magic for hex conversion - much faster!
+	const toHex = (n) => (Math.round((n + m) * 255) | 0).toString(16).padStart(2, '0')
 
 	return `#${toHex(r)}${toHex(g)}${toHex(b)}`
 }

From e12da122c7bf6942fe486faa6483878aea3979d0 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Tue, 9 Sep 2025 17:34:00 +0200
Subject: [PATCH 2/4] refactor(colors): Improve color conversion logic and make
 it more safe and rounded

---
 composables/useColorConversion.js | 58 ++++++++++++-------------------
 1 file changed, 23 insertions(+), 35 deletions(-)

diff --git a/composables/useColorConversion.js b/composables/useColorConversion.js
index 514e2c0..bf47f1c 100644
--- a/composables/useColorConversion.js
+++ b/composables/useColorConversion.js
@@ -1,5 +1,10 @@
 export function hexToHSL(hex) {
+	console.log(hex)
+
+	// if (typeof hex !== 'string') throw new Error('Invalid HEX value')
 	hex = hex.replace(/^#/, '')
+	// if (!/^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) throw new Error('Invalid HEX value')
+
 	if (hex.length === 3) {
 		hex = hex
 			.split('')
@@ -7,7 +12,6 @@ export function hexToHSL(hex) {
 			.join('')
 	}
 
-	// Bitwise parsing is faster than parseInt with radix
 	const r = parseInt(hex.slice(0, 2), 16) / 255
 	const g = parseInt(hex.slice(2, 4), 16) / 255
 	const b = parseInt(hex.slice(4, 6), 16) / 255
@@ -16,14 +20,13 @@ export function hexToHSL(hex) {
 	const min = Math.min(r, g, b)
 	const diff = max - min
 
-	let h = 0,
-		s = 0
+	let h = 0
+	let s = 0
 	const l = (max + min) * 0.5
 
 	if (diff !== 0) {
 		s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min)
 
-		// Slightly optimized switch
 		if (max === r) h = (g - b) / diff + (g < b ? 6 : 0)
 		else if (max === g) h = (b - r) / diff + 2
 		else h = (r - g) / diff + 4
@@ -31,11 +34,13 @@ export function hexToHSL(hex) {
 		h *= 60
 	}
 
-	return [Math.round(h), Math.round(s * 100), Math.round(l * 100)]
+	return [h, s * 100, l * 100] // keep floats internally for better round-trip
 }
 
 export function hslToHex([h, s, l]) {
-	s *= 0.01 // Multiplication is faster than division
+	if (!Array.isArray([h, s, l]) || [h, s, l].some((v) => typeof v !== 'number')) throw new Error('Invalid HSL array')
+
+	s *= 0.01
 	l *= 0.01
 
 	const c = (1 - Math.abs(2 * l - 1)) * s
@@ -45,37 +50,20 @@ export function hslToHex([h, s, l]) {
 	let r = 0,
 		g = 0,
 		b = 0
-
-	// Optimized range checking
 	const h60 = h / 60
-	if (h60 < 1) {
-		r = c
-		g = x
-		b = 0
-	} else if (h60 < 2) {
-		r = x
-		g = c
-		b = 0
-	} else if (h60 < 3) {
-		r = 0
-		g = c
-		b = x
-	} else if (h60 < 4) {
-		r = 0
-		g = x
-		b = c
-	} else if (h60 < 5) {
-		r = x
-		g = 0
-		b = c
-	} else {
-		r = c
-		g = 0
-		b = x
-	}
 
-	// Bitwise magic for hex conversion - much faster!
-	const toHex = (n) => (Math.round((n + m) * 255) | 0).toString(16).padStart(2, '0')
+	if (h60 < 1) [r, g, b] = [c, x, 0]
+	else if (h60 < 2) [r, g, b] = [x, c, 0]
+	else if (h60 < 3) [r, g, b] = [0, c, x]
+	else if (h60 < 4) [r, g, b] = [0, x, c]
+	else if (h60 < 5) [r, g, b] = [x, 0, c]
+	else [r, g, b] = [c, 0, x]
+
+	const toHex = (n) => {
+		const val = Math.round((n + m) * 255)
+		const clamped = Math.min(255, Math.max(0, val)) // clamp for safety
+		return clamped.toString(16).padStart(2, '0')
+	}
 
 	return `#${toHex(r)}${toHex(g)}${toHex(b)}`
 }

From 86248078cf617b951d4180c5c3d3883849543501 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Tue, 9 Sep 2025 18:05:34 +0200
Subject: [PATCH 3/4] refactor(custom/colors): Wrap color picker into a
 separate component and clean up watchers to prevent mem leak

- Refactor custom colors logic by encapsulating the color picker into a dedicated, reusable component
- Clean up color watchers when the component is unmounted to prevent memory leaks and improve performance
- Improve code modularity and maintainability by isolating color picker functionality

Changes summary:
- Refactored the custom colors implementation by wrapping the color picker into a separate component. This improves code organization and reusability. Additionally, color watchers are now cleaned up when the component is unmounted, ensuring better performance and preventing potential memory leaks.
---
 components/Custom/Colors/ColorPicker.vue | 109 +++++++++++++++++++
 components/Custom/Colors/Index.vue       | 132 +++++++++--------------
 2 files changed, 161 insertions(+), 80 deletions(-)
 create mode 100644 components/Custom/Colors/ColorPicker.vue

diff --git a/components/Custom/Colors/ColorPicker.vue b/components/Custom/Colors/ColorPicker.vue
new file mode 100644
index 0000000..d2828b4
--- /dev/null
+++ b/components/Custom/Colors/ColorPicker.vue
@@ -0,0 +1,109 @@
+<template>
+	<div class="colorpicker">
+		<label :for="id">
+			<input
+				:id="id"
+				type="color"
+				:value="modelValue"
+				@input="$emit('update:modelValue', $event.target.value)"
+				@change="$emit('change', $event)"
+				:aria-label="`Select ${label} ${subLabel} color`"
+			/>
+			<p>
+				{{ label }} <span>{{ subLabel }}</span>
+			</p>
+		</label>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	id: {
+		type: String,
+		required: true,
+	},
+	modelValue: {
+		type: String,
+		required: true,
+	},
+	label: {
+		type: String,
+		required: true,
+	},
+	subLabel: {
+		type: String,
+		required: true,
+	},
+})
+
+defineEmits(['update:modelValue', 'change'])
+</script>
+
+<style lang="scss" scoped>
+.colorpicker {
+	cursor: pointer;
+	transition: transform 0.2s ease-in-out;
+
+	background-image: linear-gradient(
+		135deg,
+		hsla(var(--accent-hsl) / 0.2) 0%,
+		hsla(var(--accent-hsl) / 0.03) 40%,
+		hsla(var(--accent-hsl) / 0.03) 60%,
+		hsla(var(--accent-hsl) / 0.1) 100%
+	);
+	border: 1px solid hsla(var(--accent-hsl) / 0.1);
+	border-radius: 1rem;
+
+	label {
+		cursor: pointer;
+		display: grid;
+		place-items: center;
+		gap: 0.5rem;
+		padding: 0.8rem;
+
+		p {
+			font-size: 0.62em;
+			text-transform: uppercase;
+			margin: 0;
+			line-height: 1;
+
+			span {
+				font-weight: bold;
+			}
+		}
+	}
+
+	input[type='color'] {
+		--input_color_size: 3.2rem;
+		--br_colorpicker: 1.5rem;
+		width: var(--input_color_size);
+		height: var(--input_color_size);
+		background-color: transparent;
+		border: none;
+		outline: none;
+		border-radius: var(--br_colorpicker);
+		cursor: pointer;
+
+		&::-webkit-color-swatch-wrapper,
+		&::-moz-color-swatch-wrapper {
+			padding: 0;
+		}
+
+		&::-moz-color-swatch {
+			border-radius: var(--br_colorpicker);
+			border: none;
+			outline: none;
+		}
+
+		&::-webkit-color-swatch {
+			border-radius: var(--br_colorpicker);
+			border: none;
+			outline: none;
+		}
+	}
+
+	&:hover {
+		transform: scale(0.98);
+	}
+}
+</style>
diff --git a/components/Custom/Colors/Index.vue b/components/Custom/Colors/Index.vue
index 7e672de..904883f 100644
--- a/components/Custom/Colors/Index.vue
+++ b/components/Custom/Colors/Index.vue
@@ -1,7 +1,7 @@
 <template>
 	<section class="section-colors colors">
 		<div class="section-cards">
-			<div class="colorpicker">
+			<!-- <div class="colorpicker">
 				<label for="lightColor">
 					<input id="lightColor" type="color" v-model="lightHex" @change="onLightChange" />
 					<p>Accent <span>Light</span></p>
@@ -12,7 +12,16 @@
 					<input id="darkColor" type="color" v-model="darkHex" @change="onDarkChange" />
 					<p>Accent <span>Dark</span></p>
 				</label>
-			</div>
+			</div> -->
+			<ColorPicker
+				v-for="picker in colorPickers"
+				:key="picker.id"
+				:id="picker.id"
+				:v-model="picker.modelValue"
+				:label="picker.label"
+				:subLabel="picker.subLabel"
+				@change="picker.handler"
+			/>
 		</div>
 
 		<Separator />
@@ -36,6 +45,7 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import { accentLightItem, accentDarkItem } from '@/utils/storage'
 import { hexToHSL } from '@/composables/useColorConversion'
+import ColorPicker from '@/components/Colors/ColorPicker.vue'
 import ButtonPrimary from '@/components/ButtonPrimary.vue'
 import CardToggle from '@/components/Cards/Toggle.vue'
 import IconPipe from '@/components/Icons/Pipe.vue'
@@ -51,14 +61,32 @@ const toggleAccentUserBubble = useToggleStorage(accentUserBubbleItem, 'dsx-toggl
 const lightHex = ref('')
 const darkHex = ref('')
 
+// Centralized color picker configuration
+const colorPickers = [
+	{
+		id: 'lightColor',
+		modelValue: lightHex,
+		label: 'Accent',
+		subLabel: 'Light',
+		handler: onLightChange,
+	},
+	{
+		id: 'darkColor',
+		modelValue: darkHex,
+		label: 'Accent',
+		subLabel: 'Dark',
+		handler: onDarkChange,
+	},
+]
+
 // Watch for changes in storage and update the reactive variables
-accentLightItem.watch((newVal) => {
+const stopLightWatcher = accentLightItem.watch((newVal) => {
 	if (newVal !== lightHex.value) {
 		lightHex.value = newVal
 	}
 })
 
-accentDarkItem.watch((newVal) => {
+const stopDarkWatcher = accentDarkItem.watch((newVal) => {
 	if (newVal !== darkHex.value) {
 		darkHex.value = newVal
 	}
@@ -97,13 +125,20 @@ onMounted(async () => {
 	}
 
 	// Load stored accent colors (or fallback to defaults)
-	const storedLight = await accentLightItem.getValue()
-	const storedDark = await accentDarkItem.getValue()
-	lightHex.value = storedLight || accentLightItem.fallback
-	darkHex.value = storedDark || accentDarkItem.fallback
-
-	// Set the initial CSS content in the style tag
-	styleTag.innerHTML = cssString.value
+	try {
+		const [storedLight, storedDark] = await Promise.all([accentLightItem.getValue(), accentDarkItem.getValue()])
+
+		lightHex.value = storedLight || accentLightItem.fallback
+		darkHex.value = storedDark || accentDarkItem.fallback
+
+		// Set the initial CSS content in the style tag
+		styleTag.innerHTML = cssString.value
+	} catch (error) {
+		console.error('Failed to load accent colors:', error)
+		// Set fallback values
+		lightHex.value = accentLightItem.fallback
+		darkHex.value = accentDarkItem.fallback
+	}
 })
 
 // Update the injected CSS whenever the computed cssString changes
@@ -131,73 +166,10 @@ function resetColors() {
 	onLightChange()
 	onDarkChange()
 }
-</script>
-<style lang="scss" scoped>
-.colorpicker {
-	// width: clamp(7rem, 10vw, 10rem);
-	cursor: pointer;
-	transition: transform 0.2s ease-in-out;
-
-	background-image: linear-gradient(
-		135deg,
-		hsla(var(--accent-hsl) / 0.2) 0%,
-		hsla(var(--accent-hsl) / 0.03) 40%,
-		hsla(var(--accent-hsl) / 0.03) 60%,
-		hsla(var(--accent-hsl) / 0.1) 100%
-	);
-	border: 1px solid hsla(var(--accent-hsl) / 0.1);
-	border-radius: 1rem;
-
-	label {
-		cursor: pointer;
-		display: grid;
-		place-items: center;
-		gap: 0.5rem;
-		padding: 0.8rem;
-
-		p {
-			font-size: 0.62em;
-			text-transform: uppercase;
-			margin: 0;
-			line-height: 1;
-
-			span {
-				font-weight: bold;
-			}
-		}
-	}
 
-	input[type='color'] {
-		--input_color_size: 3.2rem;
-		--br_colorpicker: 1.5rem;
-		width: var(--input_color_size);
-		height: var(--input_color_size);
-		background-color: transparent;
-		border: none;
-		outline: none;
-		border-radius: var(--br_colorpicker);
-		cursor: pointer;
-
-		&::-webkit-color-swatch-wrapper,
-		&::-moz-color-swatch-wrapper {
-			padding: 0;
-		}
-
-		&::-moz-color-swatch {
-			border-radius: var(--br_colorpicker);
-			border: none;
-			outline: none;
-		}
-
-		&::-webkit-color-swatch {
-			border-radius: var(--br_colorpicker);
-			border: none;
-			outline: none;
-		}
-	}
-
-	&:hover {
-		transform: scale(0.98);
-	}
-}
-</style>
+// Clean up watchers when component is unmounted
+onUnmounted(() => {
+	stopLightWatcher()
+	stopDarkWatcher()
+})
+</script>

From e978c3cab1bc7b0a34ca0b10d2b5a4950001a417 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Tue, 9 Sep 2025 21:33:47 +0200
Subject: [PATCH 4/4] refactor(custom/colors): Wrap accent color logic into
 separate composable

---
 components/Custom/Colors/ColorPicker.vue |  24 +---
 components/Custom/Colors/Index.vue       | 142 ++++-------------------
 composables/useAccentColors.js           |  61 ++++++++++
 utils/storage.js                         |   4 +-
 4 files changed, 89 insertions(+), 142 deletions(-)
 create mode 100644 composables/useAccentColors.js

diff --git a/components/Custom/Colors/ColorPicker.vue b/components/Custom/Colors/ColorPicker.vue
index d2828b4..7a7f10c 100644
--- a/components/Custom/Colors/ColorPicker.vue
+++ b/components/Custom/Colors/ColorPicker.vue
@@ -7,10 +7,10 @@
 				:value="modelValue"
 				@input="$emit('update:modelValue', $event.target.value)"
 				@change="$emit('change', $event)"
-				:aria-label="`Select ${label} ${subLabel} color`"
+				:aria-label="`Select accent ${mode} color`"
 			/>
 			<p>
-				{{ label }} <span>{{ subLabel }}</span>
+				Accent <span>{{ mode }}</span>
 			</p>
 		</label>
 	</div>
@@ -18,24 +18,10 @@
 
 <script setup>
 defineProps({
-	id: {
-		type: String,
-		required: true,
-	},
-	modelValue: {
-		type: String,
-		required: true,
-	},
-	label: {
-		type: String,
-		required: true,
-	},
-	subLabel: {
-		type: String,
-		required: true,
-	},
+	id: { type: String, required: true },
+	modelValue: { type: String, required: true },
+	mode: { type: String, required: true },
 })
-
 defineEmits(['update:modelValue', 'change'])
 </script>
 
diff --git a/components/Custom/Colors/Index.vue b/components/Custom/Colors/Index.vue
index 904883f..fae02e4 100644
--- a/components/Custom/Colors/Index.vue
+++ b/components/Custom/Colors/Index.vue
@@ -1,25 +1,12 @@
 <template>
 	<section class="section-colors colors">
 		<div class="section-cards">
-			<!-- <div class="colorpicker">
-				<label for="lightColor">
-					<input id="lightColor" type="color" v-model="lightHex" @change="onLightChange" />
-					<p>Accent <span>Light</span></p>
-				</label>
-			</div>
-			<div class="colorpicker">
-				<label for="darkColor">
-					<input id="darkColor" type="color" v-model="darkHex" @change="onDarkChange" />
-					<p>Accent <span>Dark</span></p>
-				</label>
-			</div> -->
 			<ColorPicker
 				v-for="picker in colorPickers"
 				:key="picker.id"
 				:id="picker.id"
-				:v-model="picker.modelValue"
-				:label="picker.label"
-				:subLabel="picker.subLabel"
+				v-model="picker.model"
+				:mode="picker.mode"
 				@change="picker.handler"
 			/>
 		</div>
@@ -36,16 +23,15 @@
 		<Separator />
 
 		<footer class="section-footer">
-			<ButtonPrimary id="resetColors" @click="resetColors">Reset Colors</ButtonPrimary>
+			<ButtonPrimary @click="reset">Reset Colors</ButtonPrimary>
 		</footer>
 	</section>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue'
-import { accentLightItem, accentDarkItem } from '@/utils/storage'
-import { hexToHSL } from '@/composables/useColorConversion'
-import ColorPicker from '@/components/Colors/ColorPicker.vue'
+import { reactive, onMounted, watch } from 'vue'
+import { useAccentColors } from '@/composables/useAccentColors.js'
+import ColorPicker from '@/components/Custom/Colors/ColorPicker.vue'
 import ButtonPrimary from '@/components/ButtonPrimary.vue'
 import CardToggle from '@/components/Cards/Toggle.vue'
 import IconPipe from '@/components/Icons/Pipe.vue'
@@ -54,69 +40,21 @@ import Separator from '@/components/Separator.vue'
 import { accentUserBubbleItem } from '@/utils/storage'
 import { useToggleStorage } from '@/composables/useToggleStorage.js'
 
-// One toggle controls everything
+// toggle
 const toggleAccentUserBubble = useToggleStorage(accentUserBubbleItem, 'dsx-toggle-accent-user-bubble')
 
-// The accent colors are stored as hex strings (because <input type="color"> only works with hex)
-const lightHex = ref('')
-const darkHex = ref('')
+// use composable
+const { lightHex, darkHex, load, saveLight, saveDark, reset, cssString } = useAccentColors()
 
-// Centralized color picker configuration
-const colorPickers = [
-	{
-		id: 'lightColor',
-		modelValue: lightHex,
-		label: 'Accent',
-		subLabel: 'Light',
-		handler: onLightChange,
-	},
-	{
-		id: 'darkColor',
-		modelValue: darkHex,
-		label: 'Accent',
-		subLabel: 'Dark',
-		handler: onDarkChange,
-	},
-]
-
-// Watch for changes in storage and update the reactive variables
-const stopLightWatcher = accentLightItem.watch((newVal) => {
-	if (newVal !== lightHex.value) {
-		lightHex.value = newVal
-	}
-})
-
-const stopDarkWatcher = accentDarkItem.watch((newVal) => {
-	if (newVal !== darkHex.value) {
-		darkHex.value = newVal
-	}
-})
-
-// Compute HSL values from the hex colors for CSS variable application
-const lightHSL = computed(() => hexToHSL(lightHex.value))
-const darkHSL = computed(() => hexToHSL(darkHex.value))
-
-// Create the dynamic CSS string that will be injected globally
-const cssString = computed(() => {
-	return `
-	  body.light {
-		--accent-h: ${lightHSL.value[0]} !important;
-		--accent-s: ${lightHSL.value[1]}% !important;
-		--accent-l: ${lightHSL.value[2]}% !important;
-	  }
-	  body.dark {
-		--accent-h: ${darkHSL.value[0]} !important;
-		--accent-s: ${darkHSL.value[1]}% !important;
-		--accent-l: ${darkHSL.value[2]}% !important;
-	  }
-	`
-})
-
-// Global style tag reference (we want this to persist across pages)
-let styleTag = null
+// Reactive array for color pickers
+const colorPickers = reactive([
+	{ id: 'lightColor', model: lightHex, mode: 'Light', handler: saveLight },
+	{ id: 'darkColor', model: darkHex, mode: 'Dark', handler: saveDark },
+])
 
+// Inject CSS into head
+let styleTag
 onMounted(async () => {
-	// Check if the style tag already exists; if not, create and append it.
 	styleTag = document.getElementById('dynamic-accent-styles')
 	if (!styleTag) {
 		styleTag = document.createElement('style')
@@ -124,52 +62,14 @@ onMounted(async () => {
 		document.head.appendChild(styleTag)
 	}
 
-	// Load stored accent colors (or fallback to defaults)
-	try {
-		const [storedLight, storedDark] = await Promise.all([accentLightItem.getValue(), accentDarkItem.getValue()])
-
-		lightHex.value = storedLight || accentLightItem.fallback
-		darkHex.value = storedDark || accentDarkItem.fallback
-
-		// Set the initial CSS content in the style tag
-		styleTag.innerHTML = cssString.value
-	} catch (error) {
-		console.error('Failed to load accent colors:', error)
-		// Set fallback values
-		lightHex.value = accentLightItem.fallback
-		darkHex.value = accentDarkItem.fallback
-	}
+	await load()
+	styleTag.textContent = cssString.value
 })
 
-// Update the injected CSS whenever the computed cssString changes
+// Watch for live updates
 watch(cssString, (newVal) => {
-	if (styleTag) {
-		styleTag.innerHTML = newVal
-	}
+	if (styleTag) styleTag.textContent = newVal
 })
 
-// Persist new accent color values on change (only on change events)
-function onLightChange() {
-	accentLightItem.setValue(lightHex.value)
-}
-
-function onDarkChange() {
-	accentDarkItem.setValue(darkHex.value)
-}
-
-function resetColors() {
-	// Reset to default values from storage.js
-	lightHex.value = accentLightItem.fallback
-	darkHex.value = accentDarkItem.fallback
-
-	// Reuse the existing change handlers to update storage
-	onLightChange()
-	onDarkChange()
-}
-
-// Clean up watchers when component is unmounted
-onUnmounted(() => {
-	stopLightWatcher()
-	stopDarkWatcher()
-})
+// const resetColors = () => reset()
 </script>
diff --git a/composables/useAccentColors.js b/composables/useAccentColors.js
new file mode 100644
index 0000000..80ec5ab
--- /dev/null
+++ b/composables/useAccentColors.js
@@ -0,0 +1,61 @@
+// composables/useAccentColors.js
+import { ref, computed } from 'vue'
+import { accentLightItem, accentDarkItem } from '@/utils/storage'
+import { hexToHSL } from '@/composables/useColorConversion'
+
+export function useAccentColors() {
+	const lightHex = ref(accentLightItem.fallback)
+	const darkHex = ref(accentDarkItem.fallback)
+
+	// Load stored values
+	const load = async () => {
+		try {
+			const [storedLight, storedDark] = await Promise.all([accentLightItem.getValue(), accentDarkItem.getValue()])
+			if (storedLight) lightHex.value = storedLight
+			if (storedDark) darkHex.value = storedDark
+		} catch (err) {
+			console.error('Failed to load accent colors', err)
+		}
+	}
+
+	// Save on change
+	const saveLight = () => accentLightItem.setValue(lightHex.value)
+	const saveDark = () => accentDarkItem.setValue(darkHex.value)
+
+	const reset = () => {
+		lightHex.value = accentLightItem.fallback
+		darkHex.value = accentDarkItem.fallback
+		saveLight()
+		saveDark()
+	}
+
+	// Compute HSL for CSS injection
+	const lightHSL = computed(() => hexToHSL(lightHex.value))
+	const darkHSL = computed(() => hexToHSL(darkHex.value))
+
+	// // CSS string
+	const cssString = computed(
+		() => `
+	        body.light {
+	            --accent-h: ${lightHSL.value[0]} !important;
+	            --accent-s: ${lightHSL.value[1]}% !important;
+	            --accent-l: ${lightHSL.value[2]}% !important;
+	        }
+	        body.dark {
+	            --accent-h: ${darkHSL.value[0]} !important;
+	            --accent-s: ${darkHSL.value[1]}% !important;
+	            --accent-l: ${darkHSL.value[2]}% !important;
+	        }
+	    `
+	)
+
+	return {
+		lightHex,
+		darkHex,
+		load,
+		saveLight,
+		saveDark,
+		reset,
+		cssString,
+	}
+}
diff --git a/utils/storage.js b/utils/storage.js
index 406d50e..2d78f50 100644
--- a/utils/storage.js
+++ b/utils/storage.js
@@ -14,8 +14,8 @@ export const THEMES = Object.freeze({
 })
 
 // Pre-compute hex values instead of doing it every time
-const DEFAULT_ACCENT_LIGHT_HEX = hslToHex(DEFAULT_ACCENT_LIGHT_HSL)
-const DEFAULT_ACCENT_DARK_HEX = hslToHex(DEFAULT_ACCENT_DARK_HSL)
+export const DEFAULT_ACCENT_LIGHT_HEX = hslToHex(DEFAULT_ACCENT_LIGHT_HSL)
+export const DEFAULT_ACCENT_DARK_HEX = hslToHex(DEFAULT_ACCENT_DARK_HSL)
 
 // ---------- Helper ----------
 export async function getAllStorageItems() {