chore: rename color and update color options (#395)

src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue

@@ -29,7 +29,7 @@ const {
   theme,
   fontFamily,
   fontSize,
-  fontColor,
+  primaryColor,
   codeBlockTheme,
   legend,
   isMacCodeBlock,
@@ -89,7 +89,7 @@ function customStyle() {
       <StyleOptionMenu
         title="主题色"
         :options="colorOptions"
-        :current="fontColor"
+        :current="primaryColor"
         :change="colorChanged"
       />
       <StyleOptionMenu
@@ -109,7 +109,7 @@ function customStyle() {
           <HoverCardContent side="right" class="w-min">
             <el-color-picker
               ref="colorPicker"
-              v-model="fontColor"
+              v-model="primaryColor"
               :teleported="false"
               show-alpha
               class="ml-auto"
@@ -123,7 +123,7 @@ function customStyle() {
         自定义主题色
         <el-color-picker
           ref="colorPicker"
-          v-model="fontColor"
+          v-model="primaryColor"
           :teleported="false"
           show-alpha
           class="ml-auto"

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -82,7 +82,7 @@ const {
   isDark,
   isCiteStatus,
   output,
-  fontColor,
+  primaryColor,
 } = storeToRefs(store)
 
 const {
@@ -130,7 +130,7 @@ function copy() {
         .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
         // 适配主题中的颜色变量
         .replaceAll(`var(--el-text-color-regular)`, `#3f3f3f`)
-        .replaceAll(`var(--md-primary-color)`, fontColor.value)
+        .replaceAll(`var(--md-primary-color)`, primaryColor.value)
         .replaceAll(/--md-primary-color:.+?;/g, ``)
       clipboardDiv.focus()
       window.getSelection().removeAllRanges()
@@ -299,7 +299,7 @@ function updateOpen(isOpen) {
                 :key="value"
                 class="w-full"
                 variant="outline" :class="{
-                  'border-black dark:border-white': store.fontColor === value }" @click="store.colorChanged(value)"
+                  'border-black dark:border-white': store.primaryColor === value }" @click="store.colorChanged(value)"
               >
                 <span
                   class="mr-2 inline-block h-4 w-4 rounded-full" :style="{
@@ -316,7 +316,7 @@ function updateOpen(isOpen) {
             </h2>
             <div>
               <el-color-picker
-                v-model="fontColor"
+                v-model="primaryColor"
                 :teleported="false"
                 show-alpha
                 @change="store.colorChanged"

src/config/style.ts

@@ -50,17 +50,17 @@ export const colorOptions: IConfigOption[] = [
   {
     label: `经典蓝`,
     value: `#0F4C81`,
-    desc: `最新流行`,
+    desc: `稳重冷静`,
   },
   {
     label: `翡翠绿`,
     value: `#009874`,
-    desc: `优雅清新`,
+    desc: `自然平衡`,
   },
   {
     label: `活力橘`,
     value: `#FA5151`,
-    desc: `热情活泼`,
+    desc: `热情活力`,
   },
   {
     label: `柠檬黄`,
@@ -68,19 +68,39 @@ export const colorOptions: IConfigOption[] = [
     desc: `明亮温暖`,
   },
   {
-    label: `樱桃红`,
+    label: `薰衣紫`,
-    value: `#FF445F`,
-    desc: `浪漫热情`,
-  },
-  {
-    label: `浅紫色`,
     value: `#92617E`,
-    desc: `优雅高贵`,
+    desc: `优雅神秘`,
   },
   {
     label: `天空蓝`,
     value: `#55C9EA`,
-    desc: `清新脱俗`,
+    desc: `清爽自由`,
+  },
+  {
+    label: `玫瑰金`,
+    value: `#B76E79`,
+    desc: `奢华现代`,
+  },
+  {
+    label: `橄榄绿`,
+    value: `#556B2F`,
+    desc: `沉稳自然`,
+  },
+  {
+    label: `石墨黑`,
+    value: `#333333`,
+    desc: `内敛极简`,
+  },
+  {
+    label: `雾烟灰`,
+    value: `#A9A9A9`,
+    desc: `柔和低调`,
+  },
+  {
+    label: `樱花粉`,
+    value: `#FFB7C5`,
+    desc: `浪漫甜美`,
   },
 ]
 

src/stores/index.js

@@ -36,8 +36,8 @@ export const useStore = defineStore(`store`, () => {
   const fontFamily = useStorage(`fonts`, fontFamilyOptions[0].value)
   // 文本大小
   const fontSize = useStorage(`size`, fontSizeOptions[2].value)
-  // 文本颜色
+  // 主色
-  const fontColor = useStorage(`color`, colorOptions[0].value)
+  const primaryColor = useStorage(`color`, colorOptions[0].value)
   // 代码块主题
   const codeBlockTheme = useStorage(`codeBlockTheme`, codeBlockThemeOptions[23].value)
   // 图注格式
@@ -46,7 +46,7 @@ export const useStore = defineStore(`store`, () => {
   const fontSizeNumber = computed(() => fontSize.value.replace(`px`, ``))
 
   const renderer = initRenderer({
-    theme: customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber.value, color: fontColor.value }),
+    theme: customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber.value, color: primaryColor.value }),
     fonts: fontFamily.value,
   })
 
@@ -173,7 +173,7 @@ export const useStore = defineStore(`store`, () => {
   // 更新 CSS
   const updateCss = () => {
     const json = css2json(cssEditor.value.getValue())
-    const newTheme = customCssWithTemplate(json, fontColor.value, customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber.value, color: fontColor.value }))
+    const newTheme = customCssWithTemplate(json, primaryColor.value, customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber.value, color: primaryColor.value }))
     renderer.setOptions({
       theme: newTheme,
     })
@@ -226,7 +226,7 @@ export const useStore = defineStore(`store`, () => {
     fontFamily.value = fontFamilyOptions[0].value
     fontFamily.value = fontFamilyOptions[0].value
     fontSize.value = fontSizeOptions[2].value
-    fontColor.value = colorOptions[0].value
+    primaryColor.value = colorOptions[0].value
     codeBlockTheme.value = codeBlockThemeOptions[2].value
     legend.value = legendOptions[3].value
 
@@ -262,7 +262,7 @@ export const useStore = defineStore(`store`, () => {
 
   const themeChanged = withAfterRefresh((newTheme) => {
     renderer.setOptions({
-      theme: customizeTheme(themeMap[newTheme], { fontSize: fontSizeNumber.value, color: fontColor.value }),
+      theme: customizeTheme(themeMap[newTheme], { fontSize: fontSizeNumber.value, color: primaryColor.value }),
     })
     theme.value = newTheme
   })
@@ -276,7 +276,7 @@ export const useStore = defineStore(`store`, () => {
   })
 
   const sizeChanged = withAfterRefresh((size) => {
-    const theme = getTheme(size, fontColor.value)
+    const theme = getTheme(size, primaryColor.value)
     renderer.setOptions({
       size,
       theme,
@@ -291,7 +291,7 @@ export const useStore = defineStore(`store`, () => {
       theme,
     })
 
-    fontColor.value = newColor
+    primaryColor.value = newColor
   })
 
   const codeBlockThemeChanged = withAfterRefresh((newTheme) => {
@@ -404,7 +404,7 @@ export const useStore = defineStore(`store`, () => {
     theme,
     fontFamily,
     fontSize,
-    fontColor,
+    primaryColor,
     codeBlockTheme,
     legend,