From f99ce02782b7d055175e28d77cdc47d780c4dfc6 Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Sat, 1 Nov 2025 13:47:32 +0300
Subject: [PATCH] im just doing shit atp

---
 .../theme/components/ColorPicker.vue          | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue
index 3615c4821..78cb9bb49 100644
--- a/docs/.vitepress/theme/components/ColorPicker.vue
+++ b/docs/.vitepress/theme/components/ColorPicker.vue
@@ -2,6 +2,7 @@
 import { colors } from '@fmhy/colors'
 import { useStorage, useStyleTag } from '@vueuse/core'
 import { watch } from 'vue'
+import Switch from './Switch.vue'
 
 const colorScales = [
   '50',
@@ -19,6 +20,7 @@ const colorScales = [
 
 type ColorNames = keyof typeof colors
 const selectedColor = useStorage<ColorNames>('preferred-color', 'swarm')
+const isAmoledMode = useStorage('amoled-mode', false)
 
 const colorOptions = Object.keys(colors).filter(
   (key) => typeof colors[key as keyof typeof colors] === 'object'
@@ -26,7 +28,7 @@ const colorOptions = Object.keys(colors).filter(
 
 const { css } = useStyleTag('', { id: 'brand-color' })
 
-const updateThemeColor = (colorName: ColorNames) => {
+const updateThemeColor = (colorName: ColorNames, amoledEnabled: boolean) => {
   const colorSet = colors[colorName]
 
   const cssVars = colorScales
@@ -52,10 +54,35 @@ const updateThemeColor = (colorName: ColorNames) => {
   `
 }
 
+
+
+  if (amoledEnabled) {
+    htmlElement.classList.add('theme-amoled')
+  } else {
+    htmlElement.classList.remove('theme-amoled')
+  }
+  
+  // Determine dark background color based on AMOLED mode
+  const darkBg = amoledEnabled ? '#000000' : 'rgb(26, 26, 26)'
+  const darkBgAlt = amoledEnabled ? '#000000' : 'rgb(23, 23, 23)'
+  const darkBgElv = amoledEnabled ? 'rgba(0, 0, 0, 0.9)' : 'rgba(23, 23, 23, 0.8)'
+  const darkBgSoft = amoledEnabled ? '#000000' : 'rgb(23, 23, 23)'
+  
+
+  if (typeof window !== 'undefined') {
+    const storedTheme = localStorage.getItem('preferred-color')
+    const storedAmoled = localStorage.getItem('amoled-mode')
+
+      if (storedAmoled === 'true') {
+      document.documentElement.classList.add('theme-amoled')
+    }
+  }
+
+
 // Initialize theme color
 updateThemeColor(selectedColor.value)
 
-watch(selectedColor, updateThemeColor)
+watch(selectedColor, updateThemeColorm, isAmoledMode.value)
 
 const normalizeColorName = (colorName: string) =>
   colorName.replaceAll(/-/g, ' ').charAt(0).toUpperCase() +
@@ -83,6 +110,10 @@ const normalizeColorName = (colorName: string) =>
 
     <div class="mt-2 text-sm text-$vp-c-text-2">
       Selected: {{ normalizeColorName(selectedColor) }}
+    </div>
+        <div class="mt-4 flex items-center gap-2">
+      <span class="text-sm text-$vp-c-text-2">AMOLED</span>
+      <Switch @click="isAmoledMode = !isAmoledMode" />
     </div>
   </div>
 </template>