Add toggle button for full accent background on user chat bubbles

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>

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('')

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>

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;
+        }
+    }
 }

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';

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