modify style

src/views/base/statistics/StatisticsTransactionPageBase.ts

@@ -9,8 +9,13 @@ 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 { 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, TransactionTrendsAnalysisData } from '@/models/transaction.ts';
+import type {
+    TransactionCategoricalAnalysisData,
+    TransactionCategoricalAnalysisDataItem,
+    TransactionTrendsAnalysisData
+} from '@/models/transaction.ts';
 
 import { limitText, findNameByType, findDisplayNameByType } from '@/lib/common.ts';
 import { getYearMonthFirstUnixTime, getYearMonthLastUnixTime } from '@/lib/datetime.ts';
@@ -200,6 +205,24 @@ export function useStatisticsTransactionPageBase() {
         }
     }
 
+    function getTransactionCategoricalAnalysisDataItemColor(item: TransactionCategoricalAnalysisDataItem): string {
+        if (item.type === 'category') {
+            if (item.color === DEFAULT_CATEGORY_COLOR) {
+                return 'var(--default-icon-color)';
+            } else {
+                return '#' + item.color;
+            }
+        } else if (item.type === 'account') {
+            if (item.color === DEFAULT_ACCOUNT_COLOR) {
+                return 'var(--default-icon-color)';
+            } else {
+                return '#' + item.color;
+            }
+        } else {
+            return item.color;
+        }
+    }
+
     function getDisplayAmount(amount: number, currency: string, textLimit?: number): string {
         const finalAmount = formatAmountToLocalizedNumeralsWithCurrency(amount, currency);
 
@@ -249,6 +272,7 @@ export function useStatisticsTransactionPageBase() {
         trendsAnalysisData,
         // functions
         canShowCustomDateRange,
+        getTransactionCategoricalAnalysisDataItemColor,
         getDisplayAmount
     };
 }

src/views/desktop/statistics/TransactionPage.vue

@@ -244,8 +244,8 @@
                                                                 <span class="statistics-amount">{{ getDisplayAmount(item.totalAmount, defaultCurrency) }}</span>
                                                             </div>
                                                             <div>
-                                                                <v-progress-linear :color="item.color ? '#' + item.color : 'primary'"
-                                                                                   :bg-color="isDarkMode ? '#161616' : '#f8f8f8'" :bg-opacity="1"
+                                                                <v-progress-linear :color="item.color ? getTransactionCategoricalAnalysisDataItemColor(item) : 'primary'"
+                                                                                   :bg-color="isDarkMode ? '#444444' : '#f8f8f8'" :bg-opacity="1"
                                                                                    :model-value="item.percent >= 0 ? item.percent : 0"
                                                                                    :height="4"></v-progress-linear>
                                                             </div>
@@ -458,6 +458,7 @@ const {
     categoricalAnalysisData,
     trendsAnalysisData,
     canShowCustomDateRange,
+    getTransactionCategoricalAnalysisDataItemColor,
     getDisplayAmount
 } = useStatisticsTransactionPageBase();
 

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 ? '#' + item.color : '') } "></f7-progressbar>
+                                    <f7-progressbar :progress="item.percent >= 0 ? item.percent : 0" :style="{ '--f7-progressbar-progress-color': (item.color ? getTransactionCategoricalAnalysisDataItemColor(item) : '') } "></f7-progressbar>
                                 </div>
                             </div>
                         </template>
@@ -404,6 +404,7 @@ const {
     categoricalAnalysisData,
     trendsAnalysisData,
     canShowCustomDateRange,
+    getTransactionCategoricalAnalysisDataItemColor,
     getDisplayAmount
 } = useStatisticsTransactionPageBase();
 
@@ -800,10 +801,6 @@ init();
     transform: translateY(1.5em);
 }
 
-.dark .statistics-percent-line .progressbar {
-    --f7-progressbar-bg-color: #161616;
-}
-
 .chart-data-type-popover-menu .popover-inner{
     max-height: 440px;
     overflow-y: auto;