Use toggle attributes on root document instead css vars for managing UI states

components/Custom/Layouts/Toggles.vue

@@ -18,5 +18,5 @@ import CardToggle from '@/components/Cards/Toggle.vue'
 import IconThinkingProcess from '@/components/Icons/ThinkingProcess.vue'
 
 // One toggle controls everything
-const hideThinkingState = useToggleStorage(hideThinkingItem, '--displayThinkingProcess')
+const hideThinkingState = useToggleStorage(hideThinkingItem, 'dsx-toggle-thinking-process')
 </script>

composables/useToggleStorage.js

@@ -1,36 +1,43 @@
 import { ref, watch } from 'vue'
 
-export function useToggleStorage(storageItem, cssVar) {
+export function useToggleStorage(storageItem, attributeName) {
 	const state = ref(false)
+	let initialized = false
 
-	// Initialize state from storage immediately
+	// Initialize state from storage
 	const initializeState = async () => {
 		try {
 			const val = await storageItem.getValue()
 			state.value = Boolean(val)
 		} catch (error) {
 			console.warn('Failed to load storage value:', error)
+		} finally {
+			initialized = true
 		}
 	}
 
-	// Fire and forget initialization
 	initializeState()
 
-	// Reactive sync: state → CSS + storage
-	watch(
-		state,
-		async (val) => {
-			const display = val ? 'none' : 'block'
-			document.documentElement.style.setProperty(cssVar, display)
-
-			try {
-				await storageItem.setValue(val)
-			} catch (error) {
-				console.warn('Failed to save storage value:', error)
-			}
-		},
-		{ immediate: true } // Apply initial state to CSS
-	)
+	watch(state, async (val, oldVal) => {
+		// Skip until initialization finishes
+		if (!initialized) return
+
+		// Only update if value actually changed
+		if (val === oldVal) return
+
+		const root = document.documentElement
+		if (val) {
+			if (!root.hasAttribute(attributeName)) root.setAttribute(attributeName, '')
+		} else {
+			if (root.hasAttribute(attributeName)) root.removeAttribute(attributeName)
+		}
+
+		try {
+			await storageItem.setValue(val)
+		} catch (error) {
+			console.warn('Failed to save storage value:', error)
+		}
+	})
 
 	return state
 }

styles/abstract/_root.scss

@@ -13,8 +13,6 @@
 
     --ds-font-family: var(--fontFamily) !important; // override DS font-family
 
-    --displayThinkingProcess: none;
-
     /* ? --- Custom Widths --- */
     --defaultWidthChats: 800px;
     // --defaultWidthChats: var(--message-list-max-width);

styles/customs/_custom-toggles.scss

@@ -0,0 +1,5 @@
+html[dsx-toggle-thinking-process] {
+    .ds-think-content {
+        display: none !important;
+    }
+}

styles/customs/utils/_hideToggles.scss

@@ -0,0 +1,12 @@
+// Define your toggle states in a map for scalability
+$toggle-states: (
+    "thinking-process",
+    "user-accent",
+);
+
+// Mixin to generate all toggle styles
+@mixin toggleStyles($state, $styles) {
+    html[dsx-toggle-#{$state}] & {
+        @content;
+    }
+}

styles/elements/_right--main.scss

@@ -123,11 +123,14 @@
         /* Thinking process texts */
         .ds-think-content {
             --thinking-p-left: 13px; // this is from ds deafult
-            display: var(--displayThinkingProcess) !important;
             color: var(--c-subtext-2) !important;
             transition: font-size 0.15s ease-in-out,
                 line-height 0.15s ease-in-out;
 
+            // @include toggleStyles('thinking-process', ()) {
+            //     display: none !important;
+            // }
+
             &:not(:empty) {
                 @extend .fadeIn;
             }
@@ -143,28 +146,6 @@
                 line-height: calc((var(--lineHeight) / 16) * 0.85) !important;
             }
         }
-
-        // /* Thinking process texts */
-        // .e1675d8b {
-        //     --thinking-p-left: 13px; // this is from ds deafult
-        //     display: var(--displayThinkingProcess) !important;
-
-        //     &:not(:empty) {
-        //         @extend .fadeIn;
-        //     }
-
-        //     color: var(--c-subtext-2) !important;
-        //     // font-size: calc(calc((var(--fontSize) / 16) * 1rem) * 0.75) !important;
-        //     // line-height: calc((var(--lineHeight) / 16) * 0.5) !important;
-        //     transition: font-size 0.15s ease-in-out,
-        //     line-height 0.15s ease-in-out;
-
-        //     /* Thinking border on the left */
-        //     ._9ecc93a {
-        //         border-color: currentColor !important;
-        //         opacity: 0.6;
-        //     }
-        // }
     }
 
     /* Shirmer animation on "Thought" txt while thinking */

styles/index.scss

@@ -12,6 +12,8 @@
 
 @import 'global/_base';
 @import 'global/_scrollbars';
+@import 'customs/utils/_hideToggles';
+@import 'customs/_custom-toggles';
 
 @import 'components/_skeleton';
 @import 'components/_icons';

utils/storage.js

@@ -15,8 +15,13 @@ export const THEMES = {
 	OLED: 'oled',
 }
 
-export function getAllStorageItems() {
-	storage.snapshot('local').then((res) => console.table(res))
+export async function getAllStorageItems() {
+	try {
+		const res = await storage.snapshot('local')
+		console.table(res)
+	} catch (e) {
+		console.warn('Failed to snapshot storage:', e)
+	}
 }
 
 export const themeItem = storage.defineItem('local:theme', {