diff --git a/src/components/base/ItemIconBase.ts b/src/components/base/ItemIconBase.ts
index ae10b11e..e73b93af 100644
--- a/src/components/base/ItemIconBase.ts
+++ b/src/components/base/ItemIconBase.ts
@@ -1,8 +1,9 @@
 import { computed } from 'vue';
 
-import type { ColorValue } from '@/core/color.ts';
+import type {ColorStyleValue, ColorValue} from '@/core/color.ts';
 import { ALL_ACCOUNT_ICONS, DEFAULT_ACCOUNT_ICON, ALL_CATEGORY_ICONS, DEFAULT_CATEGORY_ICON } from '@/consts/icon.ts';
-import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
+import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR, DEFAULT_COLOR_STYLE_VARIABLE } from '@/consts/color.ts';
+
 import { isNumber } from '@/lib/common.ts';
 
 type IconItemStyleName = string;
@@ -14,14 +15,14 @@ export interface CommonIconProps {
     iconType: CommonIconItemType | MobileIconItemType;
     iconId: string | number;
     color?: ColorValue;
-    defaultColor?: ColorValue;
+    defaultColor?: ColorStyleValue;
     additionalColorAttr?: string;
     size?: string | number;
 }
 
 export function useItemIconBase(props: CommonIconProps) {
     const style = computed<Record<IconItemStyleName, IconItemStyleValue>>(() => {
-        let defaultColor = 'var(--default-icon-color)';
+        let defaultColor: ColorStyleValue = DEFAULT_COLOR_STYLE_VARIABLE;
 
         if (props.defaultColor) {
             defaultColor = props.defaultColor;
@@ -60,15 +61,15 @@ export function useItemIconBase(props: CommonIconProps) {
         return ALL_CATEGORY_ICONS[iconId].icon;
     }
 
-    function getAccountIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
+    function getAccountIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
+        let displayColor: ColorStyleValue | undefined = defaultColor;
+
         if (color && color !== DEFAULT_ACCOUNT_COLOR) {
-            color = '#' + color;
-        } else {
-            color = defaultColor;
+            displayColor = `#${color}`;
         }
 
         const ret: Record<IconItemStyleName, IconItemStyleValue> = {
-            color: color
+            color: displayColor
         };
 
         if (additionalColorAttr) {
@@ -82,15 +83,15 @@ export function useItemIconBase(props: CommonIconProps) {
         return ret;
     }
 
-    function getCategoryIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
+    function getCategoryIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
+        let displayColor: ColorStyleValue | undefined = defaultColor;
+
         if (color && color !== DEFAULT_CATEGORY_COLOR) {
-            color = '#' + color;
-        } else {
-            color = defaultColor;
+            displayColor = `#${color}`;
         }
 
         const ret: Record<IconItemStyleName, IconItemStyleValue> = {
-            color: color
+            color: displayColor
         };
 
         if (additionalColorAttr) {
@@ -104,15 +105,15 @@ export function useItemIconBase(props: CommonIconProps) {
         return ret;
     }
 
-    function getDefaultIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
+    function getDefaultIconStyle(color?: ColorValue, defaultColor?: ColorStyleValue, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
+        let displayColor: ColorStyleValue | undefined = defaultColor;
+
         if (color && color !== DEFAULT_ICON_COLOR) {
-            color = '#' + color;
-        } else {
-            color = defaultColor;
+            displayColor = `#${color}`;
         }
 
         const ret: Record<IconItemStyleName, IconItemStyleValue> = {
-            color: color
+            color: displayColor
         };
 
         if (additionalColorAttr) {
diff --git a/src/components/base/MonthlyTrendsChartBase.ts b/src/components/base/MonthlyTrendsChartBase.ts
index cdb4bb9a..973ee620 100644
--- a/src/components/base/MonthlyTrendsChartBase.ts
+++ b/src/components/base/MonthlyTrendsChartBase.ts
@@ -11,8 +11,6 @@ import type {
     YearMonthUnixTime
 } from '@/core/datetime.ts';
 import type { FiscalYearUnixTime } from '@/core/fiscalyear.ts';
-import type { ColorValue } from '@/core/color.ts';
-import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
 import type { YearMonthItems } from '@/models/transaction.ts';
 
 import { getAllDateRangesFromItems } from '@/lib/statistics.ts';
@@ -49,19 +47,10 @@ export function useMonthlyTrendsChartBase<T extends Year1BasedMonth>(props: Comm
         return props.translateName ? tt(name) : name;
     }
 
-    function getColor(color: string): ColorValue {
-        if (color && color !== DEFAULT_ICON_COLOR) {
-            color = '#' + color;
-        }
-
-        return color;
-    }
-
     return {
         // computed states
         allDateRanges,
         // functions
-        getItemName,
-        getColor
+        getItemName
     }
 }
diff --git a/src/components/base/PieChartBase.ts b/src/components/base/PieChartBase.ts
index dff9d38e..23b9abf8 100644
--- a/src/components/base/PieChartBase.ts
+++ b/src/components/base/PieChartBase.ts
@@ -2,9 +2,11 @@ import { ref, computed, watch } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
+import type { ColorValue, ColorStyleValue } from '@/core/color.ts';
 import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
 
 import { isNumber } from '@/lib/common.ts';
+import { getDisplayColor } from '@/lib/color.ts';
 
 export interface CommonPieChartDataItem {
     id: string;
@@ -13,7 +15,7 @@ export interface CommonPieChartDataItem {
     value: number;
     percent: number;
     actualPercent: number;
-    color: string;
+    color: ColorStyleValue;
     sourceItem: Record<string, unknown>;
     displayPercent?: string;
     displayValue?: string;
@@ -68,7 +70,7 @@ export function usePieChartBase(props: CommonPieChartProps) {
                     value: value,
                     percent: (isNumber(percent) && percent >= 0) ? percent : (value / totalValidValue * 100),
                     actualPercent: value / totalValidValue,
-                    color: (props.colorField && item[props.colorField]) ? item[props.colorField] as string : DEFAULT_CHART_COLORS[validItems.length % DEFAULT_CHART_COLORS.length],
+                    color: getDisplayColor((props.colorField && item[props.colorField]) ? item[props.colorField] as ColorValue : DEFAULT_CHART_COLORS[validItems.length % DEFAULT_CHART_COLORS.length]),
                     sourceItem: item
                 };
 
diff --git a/src/components/desktop/AccountBalanceTrendsChart.vue b/src/components/desktop/AccountBalanceTrendsChart.vue
index 50d2d09d..0b8113a5 100644
--- a/src/components/desktop/AccountBalanceTrendsChart.vue
+++ b/src/components/desktop/AccountBalanceTrendsChart.vue
@@ -14,7 +14,7 @@ import { useUserStore } from '@/stores/user.ts';
 
 import type { NameValue } from '@/core/base.ts';
 import { TextDirection } from '@/core/text.ts';
-import type { ColorValue } from '@/core/color.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { AccountBalanceTrendChartType } from '@/core/statistics.ts';
 import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
@@ -32,10 +32,10 @@ interface AccountBalanceTrendsChartDataItem {
     id: string;
     name: string;
     itemStyle: {
-        color: ColorValue;
-        color0?: string;
-        borderColor?: string;
-        borderColor0?: string;
+        color: ColorStyleValue;
+        color0?: ColorStyleValue;
+        borderColor?: ColorStyleValue;
+        borderColor0?: ColorStyleValue;
     };
     selected: boolean;
     type: string;
diff --git a/src/components/desktop/ColorSelect.vue b/src/components/desktop/ColorSelect.vue
index 8588ba46..be2408ef 100644
--- a/src/components/desktop/ColorSelect.vue
+++ b/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(() => {
diff --git a/src/components/desktop/MonthlyTrendsChart.vue b/src/components/desktop/MonthlyTrendsChart.vue
index f2d36c4b..a80eff98 100644
--- a/src/components/desktop/MonthlyTrendsChart.vue
+++ b/src/components/desktop/MonthlyTrendsChart.vue
@@ -16,10 +16,12 @@ import { useUserStore } from '@/stores/user.ts';
 
 import { TextDirection } from '@/core/text.ts';
 import { type Year1BasedMonth, DateRangeScene } from '@/core/datetime.ts';
-import type { ColorValue } from '@/core/color.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { TrendChartType, ChartDateAggregationType } from '@/core/statistics.ts';
+
 import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+
 import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
 
 import {
@@ -32,6 +34,9 @@ import {
     getDateTypeByDateRange,
     getFiscalYearFromUnixTime
 } from '@/lib/datetime.ts';
+import {
+    getDisplayColor
+} from '@/lib/color.ts';
 import {
     sortStatisticsItems
 } from '@/lib/statistics.ts';
@@ -47,7 +52,7 @@ interface MonthlyTrendsChartDataItem {
     id: string;
     name: string;
     itemStyle: {
-        color: ColorValue;
+        color: ColorStyleValue;
     };
     selected: boolean;
     type: string;
@@ -83,7 +88,7 @@ const {
     formatAmountToLocalizedNumeralsWithCurrency
 } = useI18n();
 
-const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props);
+const { allDateRanges, getItemName } = useMonthlyTrendsChartBase(props);
 
 const userStore = useUserStore();
 
@@ -218,7 +223,7 @@ const allSeries = computed<MonthlyTrendsChartDataItem[]>(() => {
             id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
             name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
             itemStyle: {
-                color: getColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
+                color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
             },
             selected: true,
             type: 'line',
diff --git a/src/components/desktop/PieChart.vue b/src/components/desktop/PieChart.vue
index b4044c83..f6bfd4b0 100644
--- a/src/components/desktop/PieChart.vue
+++ b/src/components/desktop/PieChart.vue
@@ -13,13 +13,12 @@ import type { CallbackDataParams } from 'echarts/types/dist/shared';
 import { useI18n } from '@/locales/helpers.ts';
 import { type CommonPieChartDataItem, type CommonPieChartProps, usePieChartBase } from '@/components/base/PieChartBase.ts'
 
-import type { ColorValue } from '@/core/color.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 import { ThemeType } from '@/core/theme.ts';
-import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
 
 interface DesktopPieChartDataItem extends CommonPieChartDataItem {
     itemStyle: {
-        color: ColorValue;
+        color: ColorStyleValue;
     };
     selected: boolean;
 }
@@ -66,7 +65,7 @@ const seriesData = computed<DesktopPieChartDataItem[]>(() => {
         ret.push({
             ...item,
             itemStyle: {
-                color: getColor(item.color),
+                color: item.color,
             },
             selected: true
         });
@@ -214,14 +213,6 @@ const chartOptions = computed<object>(() => {
     };
 });
 
-function getColor(color: string): ColorValue {
-    if (color && color !== DEFAULT_ICON_COLOR) {
-        color = '#' + color;
-    }
-
-    return color;
-}
-
 function clickItem(e: ECElementEvent): void {
     if (!props.enableClickItem || e.componentType !== 'series' || e.seriesType !=='pie') {
         return;
diff --git a/src/components/mobile/AccountBalanceTrendsBarChart.vue b/src/components/mobile/AccountBalanceTrendsBarChart.vue
index 43e09fa8..c7a8300a 100644
--- a/src/components/mobile/AccountBalanceTrendsBarChart.vue
+++ b/src/components/mobile/AccountBalanceTrendsBarChart.vue
@@ -37,7 +37,7 @@
                 <template #inner>
                     <div class="display-flex padding-top-half">
                         <div class="statistics-percent-line width-100 no-margin-horizontal">
-                            <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? '#' + item.color : '') } "></f7-progressbar>
+                            <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': item.color } "></f7-progressbar>
                         </div>
                     </div>
                 </template>
@@ -56,13 +56,13 @@ import {
     useAccountBalanceTrendsChartBase
 } from '@/components/base/AccountBalanceTrendsChartBase.ts'
 
-import type { ColorValue } from '@/core/color.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
 
 interface MobileAccountBalanceTrendsChartItem extends AccountBalanceTrendsChartItem {
     index: number;
     percent: number;
-    color: ColorValue;
+    color: ColorStyleValue;
 }
 
 interface MobileAccountBalanceTrendsChartProps extends CommonAccountBalanceTrendsChartProps {
@@ -104,7 +104,7 @@ const allVirtualListItems = computed<MobileAccountBalanceTrendsChartItem[]>(() =
             averageBalance: dataItem.averageBalance,
             minimumBalance: dataItem.minimumBalance,
             maximumBalance: dataItem.maximumBalance,
-            color: DEFAULT_CHART_COLORS[0],
+            color: `#${DEFAULT_CHART_COLORS[0]}`,
             percent: 0.0
         };
 
diff --git a/src/components/mobile/MonthlyTrendsBarChart.vue b/src/components/mobile/MonthlyTrendsBarChart.vue
index 6a7aaf97..a6c3ea73 100644
--- a/src/components/mobile/MonthlyTrendsBarChart.vue
+++ b/src/components/mobile/MonthlyTrendsBarChart.vue
@@ -96,8 +96,11 @@ import { type CommonMonthlyTrendsChartProps, type MonthlyTrendsBarChartClickEven
 import { useUserStore } from '@/stores/user.ts';
 
 import { type Year1BasedMonth, type UnixTimeRange, DateRangeScene } from '@/core/datetime.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 import { ChartDateAggregationType } from '@/core/statistics.ts';
+
 import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+
 import type { YearMonthDataItem, SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
 
 import {
@@ -109,6 +112,9 @@ import {
     getDateTypeByDateRange,
     getFiscalYearFromUnixTime
 } from '@/lib/datetime.ts';
+import {
+    getDisplayColor
+} from '@/lib/color.ts';
 import {
     sortStatisticsItems
 } from '@/lib/statistics.ts';
@@ -116,7 +122,7 @@ import {
 interface TrendsBarChartLegend {
     readonly id: string;
     readonly name: string;
-    readonly color: string;
+    readonly color: ColorStyleValue;
     readonly displayOrders: number[];
 }
 
@@ -157,7 +163,7 @@ const {
     formatAmountToLocalizedNumeralsWithCurrency
 } = useI18n();
 
-const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props);
+const { allDateRanges, getItemName } = useMonthlyTrendsChartBase(props);
 
 const userStore = useUserStore();
 
@@ -179,7 +185,7 @@ const allDisplayDataItems = computed<MonthlyTrendsBarChartData>(() => {
         const legend: TrendsBarChartLegend = {
             id: id,
             name: (props.nameField && item[props.nameField]) ? getItemName(item[props.nameField] as string) : id,
-            color: getColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
+            color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]),
             displayOrders: (props.displayOrdersField && item[props.displayOrdersField]) ? item[props.displayOrdersField] as number[] : [0]
         };
 
diff --git a/src/components/mobile/PieChart.vue b/src/components/mobile/PieChart.vue
index b04c5fe8..19817c45 100644
--- a/src/components/mobile/PieChart.vue
+++ b/src/components/mobile/PieChart.vue
@@ -7,7 +7,7 @@
                     fill="transparent"
                     cx="0" cy="0"
                     :r="diameter / 2"
-                    :stroke="getColor(item.color)"
+                    :stroke="item.color"
                     :stroke-width="diameter"
                     :stroke-dasharray="getItemStrokeDash(item)"
                     :stroke-dashoffset="getItemDashOffset(item, validItems, itemCommonDashOffset)"
@@ -50,7 +50,7 @@
                         </f7-chip>
                         <f7-chip outline
                                  :text="selectedItem.displayPercent"
-                                 :style="getColorStyle(selectedItem ? selectedItem.color : '', '--f7-chip-outline-border-color')"
+                                 :style="getColorStyle(selectedItem?.color, '--f7-chip-outline-border-color')"
                                  v-else-if="!skeleton"></f7-chip>
                     </p>
                     <p v-else-if="!validItems || !validItems.length">
@@ -60,7 +60,7 @@
                         <span class="skeleton-text" v-if="skeleton">Name</span>
                         <span v-else-if="!skeleton && selectedItem.displayName">{{ selectedItem.displayName }}</span>
                         <span class="skeleton-text" v-if="skeleton">Value</span>
-                        <span v-else-if="!skeleton && showValue" :style="getColorStyle(selectedItem ? selectedItem.color : '')">{{ selectedItem.displayValue }}</span>
+                        <span v-else-if="!skeleton && showValue" :style="getColorStyle(selectedItem?.color)">{{ selectedItem.displayValue }}</span>
                         <f7-icon class="item-navigate-icon icon-with-direction" f7="chevron_right" v-if="enableClickItem"></f7-icon>
                     </f7-link>
                     <f7-link :no-link-class="true" v-else-if="!validItems || !validItems.length">
@@ -82,13 +82,12 @@ import { computed } from 'vue';
 import { useI18n } from '@/locales/helpers.ts';
 import { type CommonPieChartDataItem, type CommonPieChartProps, usePieChartBase } from '@/components/base/PieChartBase.ts'
 
-import type { ColorValue } from '@/core/color.ts';
-import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 
 interface MobilePieChartProps extends CommonPieChartProps {
     showCenterText?: boolean;
     showSelectedItemInfo?: boolean;
-    centerTextBackground?: ColorValue;
+    centerTextBackground?: ColorStyleValue;
 }
 
 const props = defineProps<MobilePieChartProps>();
@@ -135,25 +134,13 @@ const itemCommonDashOffset = computed<number>(() => {
     return offset;
 });
 
-function getColor(color: ColorValue): ColorValue {
-    if (color && color !== DEFAULT_ICON_COLOR) {
-        color = '#' + color;
-    } else {
-        color = 'var(--default-icon-color)';
-    }
-
-    return color;
-}
-
-function getColorStyle(color: ColorValue, additionalFieldName?: string): Record<string, string> {
-    const finalColor = getColor(color);
-
+function getColorStyle(color: ColorStyleValue, additionalFieldName?: string): Record<string, string> {
     const ret: Record<string, string> = {
-        color: finalColor
+        color: color
     };
 
     if (additionalFieldName) {
-        ret[additionalFieldName] = finalColor;
+        ret[additionalFieldName] = color;
     }
 
     return ret;
diff --git a/src/consts/color.ts b/src/consts/color.ts
index b198e65f..b207ead3 100644
--- a/src/consts/color.ts
+++ b/src/consts/color.ts
@@ -1,4 +1,4 @@
-import type { ColorValue } from '@/core/color.ts';
+import type { ColorValue, ColorStyleValue } from '@/core/color.ts';
 
 const defaultColor: ColorValue = '000000';
 
@@ -6,6 +6,8 @@ export const DEFAULT_ICON_COLOR: ColorValue = defaultColor;
 export const DEFAULT_ACCOUNT_COLOR: ColorValue = defaultColor;
 export const DEFAULT_CATEGORY_COLOR: ColorValue = defaultColor;
 
+export const DEFAULT_COLOR_STYLE_VARIABLE: ColorStyleValue = 'var(--default-icon-color)';
+
 const allAvailableColors: ColorValue[] = [
     '000000', // black
     '8e8e93', // gray
diff --git a/src/core/color.ts b/src/core/color.ts
index fae78d7f..4baf8f9e 100644
--- a/src/core/color.ts
+++ b/src/core/color.ts
@@ -2,13 +2,15 @@ import type { TypeAndName } from './base.ts';
 
 export type ColorValue = string;
 
+export type ColorStyleValue = `#${ColorValue}` | 'var(--default-icon-color)';
+
 export interface ColorInfo extends Record<string, unknown> {
     readonly color: ColorValue;
 }
 
 export interface AmountColor {
-    readonly expenseAmountColor: ColorValue;
-    readonly incomeAmountColor: ColorValue;
+    readonly expenseAmountColor: ColorStyleValue;
+    readonly incomeAmountColor: ColorStyleValue;
 }
 
 export class PresetAmountColor implements TypeAndName {
@@ -26,12 +28,12 @@ export class PresetAmountColor implements TypeAndName {
 
     public readonly type: number;
     public readonly name: string;
-    public readonly lightThemeColor: string;
-    public readonly darkThemeColor: string;
+    public readonly lightThemeColor: ColorStyleValue;
+    public readonly darkThemeColor: ColorStyleValue;
     public readonly expenseClassName: string;
     public readonly incomeClassName: string;
 
-    private constructor(type: number, name: string, lightThemeColor: string, darkThemeColor: string, expenseClassName: string, incomeClassName: string) {
+    private constructor(type: number, name: string, lightThemeColor: ColorStyleValue, darkThemeColor: ColorStyleValue, expenseClassName: string, incomeClassName: string) {
         this.type = type;
         this.name = name;
         this.lightThemeColor = lightThemeColor;
diff --git a/src/lib/color.ts b/src/lib/color.ts
index fbc17138..94c34ff1 100644
--- a/src/lib/color.ts
+++ b/src/lib/color.ts
@@ -1,4 +1,15 @@
-import type { ColorValue, ColorInfo } from '@/core/color.ts';
+import type {
+    ColorValue,
+    ColorStyleValue,
+    ColorInfo
+} from '@/core/color.ts';
+
+import {
+    DEFAULT_ICON_COLOR,
+    DEFAULT_ACCOUNT_COLOR,
+    DEFAULT_CATEGORY_COLOR,
+    DEFAULT_COLOR_STYLE_VARIABLE
+} from '@/consts/color.ts';
 
 export function getColorsInRows(allColorValues: ColorValue[], itemPerRow: number): ColorInfo[][] {
     const ret: ColorInfo[][] = [];
@@ -16,3 +27,26 @@ export function getColorsInRows(allColorValues: ColorValue[], itemPerRow: number
 
     return ret;
 }
+
+export function getDisplayColor(color?: ColorValue): ColorStyleValue {
+    if (color && color !== DEFAULT_ICON_COLOR) {
+        return `#${color}`;
+    } else {
+        return DEFAULT_COLOR_STYLE_VARIABLE;
+    }
+}
+
+export function getCategoryDisplayColor(color?: ColorValue): ColorStyleValue {
+    if (color && color !== DEFAULT_CATEGORY_COLOR) {
+        return `#${color}`;
+    } else {
+        return DEFAULT_COLOR_STYLE_VARIABLE;
+    }
+}
+export function getAccountDisplayColor(color?: ColorValue): ColorStyleValue {
+    if (color && color !== DEFAULT_ACCOUNT_COLOR) {
+        return `#${color}`;
+    } else {
+        return DEFAULT_COLOR_STYLE_VARIABLE;
+    }
+}
diff --git a/src/views/base/statistics/StatisticsTransactionPageBase.ts b/src/views/base/statistics/StatisticsTransactionPageBase.ts
index fe09f9f4..76ec6bc6 100644
--- a/src/views/base/statistics/StatisticsTransactionPageBase.ts
+++ b/src/views/base/statistics/StatisticsTransactionPageBase.ts
@@ -8,9 +8,11 @@ import { type TransactionStatisticsFilter, useStatisticsStore } from '@/stores/s
 
 import type { TypeAndDisplayName } from '@/core/base.ts';
 import { type LocalizedDateRange, type WeekDayValue, DateRangeScene, DateRange } from '@/core/datetime.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
 import { StatisticsAnalysisType, ChartDataType, ChartSortingType, ChartDateAggregationType } from '@/core/statistics.ts';
-import { DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
+
 import { DISPLAY_HIDDEN_AMOUNT } from '@/consts/numeral.ts';
+
 import type {
     TransactionCategoricalAnalysisData,
     TransactionCategoricalAnalysisDataItem,
@@ -19,6 +21,7 @@ import type {
 
 import { limitText, findNameByType, findDisplayNameByType } from '@/lib/common.ts';
 import { getYearMonthFirstUnixTime, getYearMonthLastUnixTime } from '@/lib/datetime.ts';
+import { getDisplayColor, getCategoryDisplayColor, getAccountDisplayColor } from '@/lib/color.ts';
 
 export function useStatisticsTransactionPageBase() {
     const {
@@ -205,21 +208,13 @@ export function useStatisticsTransactionPageBase() {
         }
     }
 
-    function getTransactionCategoricalAnalysisDataItemColor(item: TransactionCategoricalAnalysisDataItem): string {
+    function getTransactionCategoricalAnalysisDataItemDisplayColor(item: TransactionCategoricalAnalysisDataItem): ColorStyleValue {
         if (item.type === 'category') {
-            if (item.color === DEFAULT_CATEGORY_COLOR) {
-                return 'var(--default-icon-color)';
-            } else {
-                return '#' + item.color;
-            }
+            return getCategoryDisplayColor(item.color);
         } else if (item.type === 'account') {
-            if (item.color === DEFAULT_ACCOUNT_COLOR) {
-                return 'var(--default-icon-color)';
-            } else {
-                return '#' + item.color;
-            }
+            return getAccountDisplayColor(item.color);
         } else {
-            return item.color;
+            return getDisplayColor(item.color);
         }
     }
 
@@ -272,7 +267,7 @@ export function useStatisticsTransactionPageBase() {
         trendsAnalysisData,
         // functions
         canShowCustomDateRange,
-        getTransactionCategoricalAnalysisDataItemColor,
+        getTransactionCategoricalAnalysisDataItemDisplayColor,
         getDisplayAmount
     };
 }
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index 50f8e688..c2652327 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -244,7 +244,7 @@
                                                                 <span class="statistics-amount">{{ getDisplayAmount(item.totalAmount, defaultCurrency) }}</span>
                                                             </div>
                                                             <div>
-                                                                <v-progress-linear :color="item.color ? getTransactionCategoricalAnalysisDataItemColor(item) : 'primary'"
+                                                                <v-progress-linear :color="item.color ? getTransactionCategoricalAnalysisDataItemDisplayColor(item) : 'primary'"
                                                                                    :bg-color="isDarkMode ? '#444444' : '#f8f8f8'" :bg-opacity="1"
                                                                                    :model-value="item.percent >= 0 ? item.percent : 0"
                                                                                    :height="4"></v-progress-linear>
@@ -458,7 +458,7 @@ const {
     categoricalAnalysisData,
     trendsAnalysisData,
     canShowCustomDateRange,
-    getTransactionCategoricalAnalysisDataItemColor,
+    getTransactionCategoricalAnalysisDataItemDisplayColor,
     getDisplayAmount
 } = useStatisticsTransactionPageBase();
 
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index 68d6b153..bf7445a5 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -182,7 +182,7 @@
                         <template #inner-end>
                             <div class="statistics-item-end">
                                 <div class="statistics-percent-line">
-                                    <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? getTransactionCategoricalAnalysisDataItemColor(item) : '') } "></f7-progressbar>
+                                    <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? getTransactionCategoricalAnalysisDataItemDisplayColor(item) : '') } "></f7-progressbar>
                                 </div>
                             </div>
                         </template>
@@ -404,7 +404,7 @@ const {
     categoricalAnalysisData,
     trendsAnalysisData,
     canShowCustomDateRange,
-    getTransactionCategoricalAnalysisDataItemColor,
+    getTransactionCategoricalAnalysisDataItemDisplayColor,
     getDisplayAmount
 } = useStatisticsTransactionPageBase();