切换主题

src/App.vue

@@ -8,26 +8,34 @@
 
 <script setup lang="ts">
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-let rgb_: any = '239, 87, 16'
-let rgbSub_: any = '239, 87, 16'
-if (localStorage.getItem('themeMainColor')) {
-  rgb_ = localStorage.getItem('themeMainColor')
-  rgbSub_ = localStorage.getItem('themeMainColor')
-}
-document.documentElement.style.setProperty(
-  '--czr-main-color',
-  `rgba(${rgb_}, 1)`,
-)
-document.documentElement.style.setProperty('--czr-main-color-rgb', rgb_)
-document.documentElement.style.setProperty(
-  '--czr-main-sub-color',
-  `rgba(${rgbSub_}, 1)`,
-)
-document.documentElement.style.setProperty('--czr-main-sub-color-rgb', rgbSub_)
-document.documentElement.style.setProperty(
-  '--czr-quasar-color',
-  'var(--czr-main-color)',
-)
+import { extractRgbFromRgba, hexToRgb } from '@/utils/czr-util'
+
+try {
+  let color = '#EF5710'
+  if (localStorage.getItem('themeMainColor')) {
+    color = localStorage.getItem('themeMainColor')
+  }
+  const rgb_: string = extractRgbFromRgba(hexToRgb(color)).join(',')
+  const rgbSub_ = rgb_
+  document.documentElement.style.setProperty(
+    '--czr-main-color',
+    `rgba(${rgb_}, 1)`,
+  )
+  document.documentElement.style.setProperty('--czr-main-color-rgb', rgb_)
+  document.documentElement.style.setProperty(
+    '--czr-main-sub-color',
+    `rgba(${rgbSub_}, 1)`,
+  )
+  document.documentElement.style.setProperty(
+    '--czr-main-sub-color-rgb',
+    rgbSub_,
+  )
+  document.documentElement.style.setProperty(
+    '--czr-quasar-color',
+    'var(--czr-main-color)',
+  )
+} catch (e) {}
+
 if (localStorage.getItem('vconsole') == 1) {
   import('vconsole').then((module) => {
     new module.default()

src/views/study/components/study-layout.vue

@@ -121,7 +121,7 @@
     </q-card>
   </q-dialog>
   <q-dialog v-model="state.showColor">
-    <q-card style="width: 40%; max-width: 40%">
+    <q-card style="width: 60%; max-width: 60%">
       <q-card-section>
         <div class="text-h6 flex items-center">
           切换主题
@@ -135,13 +135,23 @@
       </q-card-section>
       <q-card-section class="q-pt-none">
         <div class="grid grid-cols-3 gap-4">
-          <template v-for="item in AppStore.colors">
-            <div
-              :style="{ backgroundColor: item }"
-              class="col-span-1 h-20 rounded-xl"
-              @click="onSwitchTheme(item)"
+          <div class="col-span-1">
+            <q-color
+              v-model="state.color"
+              no-header
+              no-footer
+              @change="onSwitchTheme"
             />
-          </template>
+          </div>
+          <div class="col-span-2 grid grid-cols-4 gap-4">
+            <template v-for="item in AppStore.colors">
+              <div
+                :style="{ backgroundColor: item }"
+                class="col-span-1 rounded-xl"
+                @click="onSwitchTheme(item)"
+              />
+            </template>
+          </div>
         </div>
       </q-card-section>
     </q-card>
@@ -162,6 +172,7 @@ const router = useRouter()
 const state: any = reactive({
   showInfo: false,
   showColor: false,
+  color: localStorage.getItem('themeMainColor') || AppStore.colors[0],
   avatar: '',
 })
 const infoCpt = computed(() => {
@@ -179,6 +190,7 @@ const menusCpt = computed(() => {
   return router.getRoutes().filter((v) => v.meta?.isMenu)
 })
 const onSwitchTheme = (color) => {
+  state.color = color
   const rgb_: string = extractRgbFromRgba(hexToRgb(color)).join(',')
   const rgbSub_ = rgb_
   document.documentElement.style.setProperty(
@@ -194,7 +206,7 @@ const onSwitchTheme = (color) => {
     '--czr-main-sub-color-rgb',
     rgbSub_,
   )
-  localStorage.setItem('themeMainColor', rgb_)
+  localStorage.setItem('themeMainColor', color)
 }
 const handleAvatarSuccess = (response, uploadFile) => {
   state.avatar = URL.createObjectURL(uploadFile.raw!)