From e6415e174352bf44b5b739263dbdbf958746a8de Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Thu, 4 Sep 2025 19:48:31 +0200
Subject: [PATCH 1/2] feat(custom/colors): Add toggle button for full accent
 background on user chat bubbles

- Add a toggle button in the "Colors" settings section to enable full accent background on user chat bubbles
- Provide an option for users to increase contrast in chat bubbles based on their preferences
- Ensure the toggle integrates seamlessly with the existing settings and applies the style dynamically

Changes summary:
- Added a new toggle button in the "Colors" section of the settings. This allows users to enable a full accent background on their chat bubbles for higher contrast, catering to personal preferences and improving readability.
---
 components/Cards/Toggle.vue         |  2 --
 components/Custom/Colors/Index.vue  | 20 ++++++++++++++++++++
 components/Icons/Pipe.vue           | 20 ++++++++++++++++++++
 styles/customs/_custom-toggles.scss | 10 ++++++++++
 styles/index.scss                   |  3 ++-
 utils/storage.js                    |  2 ++
 6 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 components/Icons/Pipe.vue

diff --git a/components/Cards/Toggle.vue b/components/Cards/Toggle.vue
index 0bb336e..3220a78 100644
--- a/components/Cards/Toggle.vue
+++ b/components/Cards/Toggle.vue
@@ -74,8 +74,6 @@ defineExpose({
 	focus: () => inputRef.value?.focus(),
 	blur: () => inputRef.value?.blur(),
 })
-
-console.log('props.modelValue: ', props.modelValue)
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/Custom/Colors/Index.vue b/components/Custom/Colors/Index.vue
index ea92d9a..7e672de 100644
--- a/components/Custom/Colors/Index.vue
+++ b/components/Custom/Colors/Index.vue
@@ -15,6 +15,17 @@
 			</div>
 		</div>
 
+		<Separator />
+
+		<CardToggle
+			v-model="toggleAccentUserBubble"
+			title="Accent User Bubble"
+			subtitle="Make User bubble fully accented for higher contrast"
+			:iconComponent="IconPipe"
+		/>
+
+		<Separator />
+
 		<footer class="section-footer">
 			<ButtonPrimary id="resetColors" @click="resetColors">Reset Colors</ButtonPrimary>
 		</footer>
@@ -26,6 +37,15 @@ import { ref, computed, watch, onMounted } from 'vue'
 import { accentLightItem, accentDarkItem } from '@/utils/storage'
 import { hexToHSL } from '@/composables/useColorConversion'
 import ButtonPrimary from '@/components/ButtonPrimary.vue'
+import CardToggle from '@/components/Cards/Toggle.vue'
+import IconPipe from '@/components/Icons/Pipe.vue'
+import Separator from '@/components/Separator.vue'
+
+import { accentUserBubbleItem } from '@/utils/storage'
+import { useToggleStorage } from '@/composables/useToggleStorage.js'
+
+// One toggle controls everything
+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('')
diff --git a/components/Icons/Pipe.vue b/components/Icons/Pipe.vue
new file mode 100644
index 0000000..f7d8087
--- /dev/null
+++ b/components/Icons/Pipe.vue
@@ -0,0 +1,20 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="icon icon-tabler icons-tabler-outline icon-tabler-test-pipe"
+	>
+		<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+		<path d="M20 8.04l-12.122 12.124a2.857 2.857 0 1 1 -4.041 -4.04l12.122 -12.124" />
+		<path d="M7 13h8" />
+		<path d="M19 15l1.5 1.6a2 2 0 1 1 -3 0l1.5 -1.6z" />
+		<path d="M15 3l6 6" />
+	</svg>
+</template>
diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss
index b391f07..12255fa 100644
--- a/styles/customs/_custom-toggles.scss
+++ b/styles/customs/_custom-toggles.scss
@@ -2,4 +2,14 @@ html[dsx-toggle-thinking-process] {
     .ds-think-content {
         display: none !important;
     }
+}
+
+html[dsx-toggle-accent-user-bubble] {
+    .fbb737a4 {
+        @include bg-accent;
+
+        ::selection {
+            @include bg-accent-inverse;
+        }
+    }
 }
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index 060eb13..c17f637 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -13,7 +13,6 @@
 @import 'global/_base';
 @import 'global/_scrollbars';
 @import 'customs/utils/_hideToggles';
-@import 'customs/_custom-toggles';
 
 @import 'components/_skeleton';
 @import 'components/_icons';
@@ -36,4 +35,6 @@
 @import 'elements/_right--sticky';
 @import 'elements/_right--textarea';
 
+@import 'customs/_custom-toggles';
+
 @import 'deepstyled/index';
\ No newline at end of file
diff --git a/utils/storage.js b/utils/storage.js
index 663d0a7..169efaf 100644
--- a/utils/storage.js
+++ b/utils/storage.js
@@ -36,6 +36,7 @@ const STORAGE_CONFIG = Object.freeze({
 		isOLEDItem: { key: 'local:isOLED', fallback: false },
 		accentLightItem: { key: 'local:accent-light', fallback: DEFAULT_ACCENT_LIGHT_HEX },
 		accentDarkItem: { key: 'local:accent-dark', fallback: DEFAULT_ACCENT_DARK_HEX },
+		accentUserBubbleItem: { key: 'local:accentUserBubble', fallback: null },
 	},
 	fonts: {
 		fontFamilyItem: { key: 'local:font-family', fallback: null },
@@ -78,4 +79,5 @@ export const {
 	maxWidthChatsItem,
 	maxWidthTextareaItem,
 	hideThinkingItem,
+	accentUserBubbleItem,
 } = storageItems

From 95ec6e9ad8055d56d83c9a8bb05adb5aa8a3fa29 Mon Sep 17 00:00:00 2001
From: itsmartashub <44645238+itsmartashub@users.noreply.github.com>
Date: Thu, 4 Sep 2025 20:03:22 +0200
Subject: [PATCH 2/2] feat(custom/colors): Add proper styling for selected text
 when user bubble is accent bg

---
 styles/customs/_custom-toggles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/customs/_custom-toggles.scss b/styles/customs/_custom-toggles.scss
index 12255fa..af6dff3 100644
--- a/styles/customs/_custom-toggles.scss
+++ b/styles/customs/_custom-toggles.scss
@@ -8,7 +8,7 @@ html[dsx-toggle-accent-user-bubble] {
     .fbb737a4 {
         @include bg-accent;
 
-        ::selection {
+        &::selection {
             @include bg-accent-inverse;
         }
     }