code refactor

src/components/desktop/ColorSelect.vue

@@ -11,7 +11,7 @@
     >
         <template #selection="{ item }">
             <v-label class="cursor-pointer" style="padding-top: 3px">
-                <v-icon size="28" :icon="mdiSquareRounded" :color="getFinalColor(item.raw)"/>
+                <v-icon size="28" :icon="mdiSquareRounded" :color="getDisplayColor(item.raw)"/>
             </v-label>
         </template>
 
@@ -23,14 +23,14 @@
                     <div class="text-center" :key="colorInfo.color" v-for="colorInfo in row">
                         <div class="cursor-pointer" @click="color = colorInfo.color">
                             <v-icon class="ma-2" size="28"
-                                    :icon="mdiSquareRounded" :color="getFinalColor(colorInfo.color)"
+                                    :icon="mdiSquareRounded" :color="getDisplayColor(colorInfo.color)"
                                     v-if="!modelValue || modelValue !== colorInfo.color" />
                             <v-badge class="right-bottom-icon" color="primary"
                                      offset-x="8" offset-y="8"
                                      :location="`bottom ${textDirection === TextDirection.LTR ? 'right' : 'left'}`"
                                      :icon="mdiCheck"
                                      v-if="modelValue && modelValue === colorInfo.color">
-                                <v-icon class="ma-2" size="28" :icon="mdiSquareRounded" :color="getFinalColor(colorInfo.color)" />
+                                <v-icon class="ma-2" size="28" :icon="mdiSquareRounded" :color="getDisplayColor(colorInfo.color)" />
                             </v-badge>
                         </div>
                     </div>
@@ -47,9 +47,9 @@ import { useI18n } from '@/locales/helpers.ts';
 
 import { TextDirection } from '@/core/text.ts';
 import type { ColorValue, ColorInfo } from '@/core/color.ts';
-import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
+
 import { arrayContainsFieldValue } from '@/lib/common.ts';
-import { getColorsInRows } from '@/lib/color.ts';
+import { getColorsInRows, getDisplayColor } from '@/lib/color.ts';
 import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
 
 import {
@@ -86,14 +86,6 @@ function hasSelectedIcon(row: ColorInfo[]): boolean {
     return arrayContainsFieldValue(row, 'id', props.modelValue);
 }
 
-function getFinalColor(color: ColorValue): string {
-    if (color && color !== DEFAULT_ICON_COLOR) {
-        return '#' + color;
-    } else {
-        return 'var(--default-icon-color)';
-    }
-}
-
 function onMenuStateChanged(state: boolean): void {
     if (state) {
         nextTick(() => {