refactor(custom/colors): Use useStyleTag for injecting accent color styles

- Refactor custom accent color logic to avoid directly updating CSS variables, which caused resets and disappearance from body styles on window resize
- Replace manual creation and injection of `<style>` tags with `vueuse`'s `useStyleTag` utility
- Ensure accent color styles are consistently applied without latency, lag, or DOM freezing
- Improve performance and reliability by leveraging `useStyleTag` for dynamic style injection

Changes summary:
- Refactored the custom accent color logic to use `vueuse`'s `useStyleTag` for injecting styles into the document head. This approach eliminates issues with CSS variables being reset or disappearing during window resize, while also removing latency, lag, and DOM freezing that occurred with manual `<style>` tag injection. The result is a smoother and more reliable implementation.

Author: itsmartashub

components/Custom/Colors/Index.vue

@@ -1,17 +1,17 @@
 <template>
 	<section class="section-colors colors">
 		<div class="section-cards">
-			<ColorPicker
+			<!-- <ColorPicker
 				v-for="picker in colorPickers"
 				:key="picker.id"
 				:id="picker.id"
 				:mode="picker.mode"
 				v-model="picker.model"
 				@change="picker.handler"
-			/>
+			/> -->
 
-			<!-- <ColorPicker id="lightColor" v-model="lightHex" mode="Light" @change="saveLight" />
-			<ColorPicker id="darkColor" v-model="darkHex" mode="Dark" @change="saveDark" /> -->
+			<ColorPicker id="lightColor" v-model="lightHex" mode="Light" @change="saveLight" />
+			<ColorPicker id="darkColor" v-model="darkHex" mode="Dark" @change="saveDark" />
 		</div>
 
 		<Separator />
@@ -32,8 +32,8 @@
 </template>
 
 <script setup>
-import { onMounted, watch, ref } from 'vue'
-import { useCssVar } from '@vueuse/core'
+import { onMounted, watch, computed } from 'vue'
+import { useStyleTag } from '@vueuse/core'
 import { useAccentColors } from '@/composables/useAccentColors.js'
 import ColorPicker from '@/components/Custom/Colors/ColorPicker.vue'
 import ButtonPrimary from '@/components/ButtonPrimary.vue'
@@ -44,42 +44,44 @@ import Separator from '@/components/Separator.vue'
 import { accentUserBubbleItem } from '@/utils/storage'
 import { useToggleStorage } from '@/composables/useToggleStorage.js'
 
-// toggle
 const toggleAccentUserBubble = useToggleStorage(accentUserBubbleItem, 'dsx-toggle-accent-user-bubble')
 
 const { lightHex, darkHex, load, saveLight, saveDark, reset, lightHSL, darkHSL } = useAccentColors()
 
-// Reactive array for color pickers
-const colorPickers = ref([
-	{ id: 'lightColor', model: lightHex, mode: 'Light', handler: saveLight },
-	{ id: 'darkColor', model: darkHex, mode: 'Dark', handler: saveDark },
-])
+const accentCSS = computed(() => {
+	const [lightH, lightS, lightL] = lightHSL.value
+	const [darkH, darkS, darkL] = darkHSL.value
 
-// Apply CSS variables efficiently without reparsing stylesheets
-let rafId
-let cssH, cssS, cssL
-const applyLiveCssVars = () => {
-	if (rafId) cancelAnimationFrame(rafId)
-	rafId = requestAnimationFrame(() => {
-		const isDark = document.body.classList.contains('dark')
-		const h = isDark ? darkHSL.value[0] : lightHSL.value[0]
-		const s = isDark ? darkHSL.value[1] : lightHSL.value[1]
-		const l = isDark ? darkHSL.value[2] : lightHSL.value[2]
-		cssH.value = String(h)
-		cssS.value = `${s}%`
-		cssL.value = `${l}%`
-	})
-}
+	return `
+		body.light{
+			--accent-h: ${String(lightH)} !important;
+			--accent-s: ${lightS}% !important;
+			--accent-l: ${lightL}% !important;
+		}
+		
+		body.dark{
+			--accent-h: ${String(darkH)} !important;
+			--accent-s: ${darkS}% !important;
+			--accent-l: ${darkL}% !important;
+		}
+	`
+})
 
-onMounted(async () => {
-	// bind css vars to body element
-	cssH = useCssVar('--accent-h', () => document.body)
-	cssS = useCssVar('--accent-s', () => document.body)
-	cssL = useCssVar('--accent-l', () => document.body)
+const {
+	css,
+	load: loadStyles,
+	unload: unloadStyles,
+} = useStyleTag(accentCSS.value, { id: 'dsx-accent-styles', immediate: true })
 
+// Update CSS when accent values change
+watch(accentCSS, (newCSS) => {
+	css.value = newCSS
+})
+
+onMounted(async () => {
 	await load()
-	applyLiveCssVars()
 })
 
-watch([lightHSL, darkHSL], applyLiveCssVars, { deep: false })
+// optional: clean up on unmount if needed
+// onUnmounted(() => unloadStyles())
 </script>