feat(theme): add custom color support with ColorPicker

Author: Ayideyia

frontend/src/assets/styles/theme.less

@@ -75,6 +75,9 @@
   --input-color: ~'var(--input-color-@{theme})';
   --input-bg: ~'var(--input-bg-@{theme})';
 
+  // ColorPicker
+  --color-picker-bg: ~'var(--color-picker-bg-@{theme})';
+
   // Divider
   --divider-color: ~'var(--divider-color-@{theme})';
 

frontend/src/assets/styles/utilities/size.less

@@ -1,4 +1,4 @@
-@size-values: 0, 8, 10, 12, 16, 18, 24, 30, 32, 42, 64, 128, 256;
+@size-values: 0, 8, 10, 12, 16, 18, 24, 26, 30, 32, 42, 64, 128, 256;
 @percent-values: 25, 36, 50, 60, 75, 90, 100;
 
 .generate-size(@i: 1) when (@i <= length(@size-values)) {

frontend/src/assets/styles/variables.less

@@ -126,6 +126,10 @@
   --input-color-dark: #fff;
   --input-bg-dark: rgba(255, 255, 255, 0.06);
 
+  // ColorPicker
+  --color-picker-bg-light: #fff;
+  --color-picker-bg-dark: rgba(255, 255, 255, 0.06);
+
   // Divider
   --divider-color-light: #c6c6c6;
   --divider-color-dark: #4d4d4d;

frontend/src/components/ColorPicker/index.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { useTemplateRef } from 'vue'
+
+const model = defineModel<string>({ default: '#000' })
+
+const emit = defineEmits(['change'])
+
+const inputRef = useTemplateRef('inputRef')
+
+const onChange = (v: Event) => {
+  const val = (v.target as HTMLInputElement).value
+  emit('change', val)
+}
+
+const pick = () => {
+  inputRef.value?.click()
+}
+</script>
+
+<template>
+  <div
+    :class="{ 'pr-8': $slots.suffix }"
+    class="gui-color-picker rounded-full inline-flex items-center overflow-hidden"
+  >
+    <div v-if="$slots.prefix" class="flex items-center line-clamp-1 break-all">
+      <slot name="prefix" v-bind="{ pick }"></slot>
+    </div>
+    <input
+      ref="inputRef"
+      v-model="model"
+      @change="(e) => onChange(e)"
+      type="color"
+      class="w-26 border-0 bg-transparent cursor-pointer"
+    />
+    <div v-if="$slots.suffix" class="flex items-center line-clamp-1 break-all">
+      <slot name="suffix" v-bind="{ pick }"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.gui-color-picker {
+  color: var(--color);
+  border: 1px solid var(--primary-color);
+  background: var(--color-picker-bg);
+}
+
+input::-webkit-color-swatch {
+  border-radius: 6px;
+  border: none;
+}
+</style>

frontend/src/components/components.d.ts

@@ -6,6 +6,7 @@ declare module 'vue' {
     Card: (typeof import('./Card/index.vue'))['default']
     CheckBox: (typeof import('./CheckBox/index.vue'))['default']
     CodeViewer: (typeof import('./CodeViewer/index.vue'))['default']
+    ColorPicker: (typeof import('./ColorPicker/index.vue'))['default']
     Confirm: (typeof import('./Confirm/index.vue'))['default']
     CustomAction: (typeof import('./CustomAction/index.vue'))['default']
     Divider: (typeof import('./Divider/index.vue'))['default']

frontend/src/constant/app.ts

@@ -36,22 +36,6 @@ export const Colors = {
     primary: 'rgb(0, 89, 214)',
     secondary: 'rgb(5, 62, 142)',
   },
-  [Color.Orange]: {
-    primary: 'orange',
-    secondary: '#ab7207',
-  },
-  [Color.Pink]: {
-    primary: 'pink',
-    secondary: '#f1768b',
-  },
-  [Color.Red]: {
-    primary: 'red',
-    secondary: '#9e0404',
-  },
-  [Color.Skyblue]: {
-    primary: 'skyblue',
-    secondary: '#0ca4e2',
-  },
   [Color.Green]: {
     primary: 'green',
     secondary: '#025f02',
@@ -60,6 +44,10 @@ export const Colors = {
     primary: 'purple',
     secondary: '#6a0f9c',
   },
+  [Color.Custom]: {
+    primary: '#000',
+    secondary: '#000',
+  },
 }
 
 export const ViewOptions = [
@@ -101,22 +89,6 @@ export const ColorOptions = [
     label: 'settings.color.default',
     value: Color.Default,
   },
-  {
-    label: 'settings.color.orange',
-    value: Color.Orange,
-  },
-  {
-    label: 'settings.color.pink',
-    value: Color.Pink,
-  },
-  {
-    label: 'settings.color.red',
-    value: Color.Red,
-  },
-  {
-    label: 'settings.color.skyblue',
-    value: Color.Skyblue,
-  },
   {
     label: 'settings.color.green',
     value: Color.Green,
@@ -125,6 +97,10 @@ export const ColorOptions = [
     label: 'settings.color.purple',
     value: Color.Purple,
   },
+  {
+    label: 'settings.color.custom',
+    value: Color.Custom,
+  },
 ]
 
 export const WindowStateOptions = [

frontend/src/enums/app.ts

@@ -32,12 +32,9 @@ export enum ControllerCloseMode {
 
 export enum Color {
   Default = 'default',
-  Orange = 'orange',
-  Pink = 'pink',
-  Red = 'red',
-  Skyblue = 'skyblue',
   Green = 'green',
   Purple = 'purple',
+  Custom = 'custom',
 }
 
 export enum Branch {

frontend/src/lang/locale/en.ts

@@ -570,12 +570,11 @@ export default {
     color: {
       name: 'Color',
       default: 'Default',
-      orange: 'Orange',
-      pink: 'Pink',
-      red: 'Red',
-      skyblue: 'Skyblue',
       green: 'Green',
       purple: 'Purple',
+      custom: 'Custom',
+      primary: 'Primary',
+      secondary: 'Secondary',
     },
     fontFamily: 'Font-Family',
     resetFont: 'Reset Font-Family',

frontend/src/lang/locale/zh.ts

@@ -569,12 +569,11 @@ export default {
     color: {
       name: '颜色',
       default: '默认',
-      orange: '橘色',
-      pink: '粉色',
-      red: '红色',
-      skyblue: '天蓝色',
       green: '绿色',
       purple: '紫色',
+      custom: '自定义',
+      primary: '主颜色',
+      secondary: '次颜色',
     },
     fontFamily: '字体',
     resetFont: '重置字体',

frontend/src/stores/appSettings.ts

@@ -47,6 +47,8 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
     lang: Lang.EN,
     theme: Theme.Auto,
     color: Color.Default,
+    primaryColor: '#000',
+    secondaryColor: '#545454',
     fontFamily: DefaultFontFamily,
     profilesView: View.Grid,
     subscribesView: View.Grid,
@@ -176,7 +178,12 @@ export const useAppSettingsStore = defineStore('app-settings', () => {
           ? Theme.Dark
           : Theme.Light
         : settings.theme
-    const { primary, secondary } = Colors[settings.color]
+    let primary, secondary
+    if (settings.color === Color.Custom) {
+      ;({ primaryColor: primary, secondaryColor: secondary } = settings)
+    } else {
+      ;({ primary, secondary } = Colors[settings.color] ?? { primary: '', secondary: '' })
+    }
     document.documentElement.style.setProperty('--primary-color', primary)
     document.documentElement.style.setProperty('--secondary-color', secondary)
     document.body.style.fontFamily = settings.fontFamily