support setting expense / income amount color

cmd/user_data.go

@@ -658,6 +658,8 @@ func printUserInfo(user *models.User) {
 	fmt.Printf("[DigitGroupingSymbol] %s (%d)\n", user.DigitGroupingSymbol, user.DigitGroupingSymbol)
 	fmt.Printf("[DigitGrouping] %s (%d)\n", user.DigitGrouping, user.DigitGrouping)
 	fmt.Printf("[CurrencyDisplayType] %s (%d)\n", user.CurrencyDisplayType, user.CurrencyDisplayType)
+	fmt.Printf("[ExpenseAmountColor] %s (%d)\n", user.ExpenseAmountColor, user.ExpenseAmountColor)
+	fmt.Printf("[IncomeAmountColor] %s (%d)\n", user.IncomeAmountColor, user.IncomeAmountColor)
 	fmt.Printf("[Deleted] %t\n", user.Deleted)
 	fmt.Printf("[EmailVerified] %t\n", user.EmailVerified)
 	fmt.Printf("[CreatedAt] %s (%d)\n", utils.FormatUnixTimeToLongDateTimeInServerTimezone(user.CreatedUnixTime), user.CreatedUnixTime)

pkg/api/users.go

@@ -369,6 +369,22 @@ func (a *UsersApi) UserUpdateProfileHandler(c *core.Context) (any, *errs.Error)
 		userNew.CurrencyDisplayType = models.CURRENCY_DISPLAY_TYPE_INVALID
 	}
 
+	if userUpdateReq.ExpenseAmountColor != nil && *userUpdateReq.ExpenseAmountColor != user.ExpenseAmountColor {
+		user.ExpenseAmountColor = *userUpdateReq.ExpenseAmountColor
+		userNew.ExpenseAmountColor = *userUpdateReq.ExpenseAmountColor
+		anythingUpdate = true
+	} else {
+		userNew.ExpenseAmountColor = models.AMOUNT_COLOR_TYPE_INVALID
+	}
+
+	if userUpdateReq.IncomeAmountColor != nil && *userUpdateReq.IncomeAmountColor != user.IncomeAmountColor {
+		user.IncomeAmountColor = *userUpdateReq.IncomeAmountColor
+		userNew.IncomeAmountColor = *userUpdateReq.IncomeAmountColor
+		anythingUpdate = true
+	} else {
+		userNew.IncomeAmountColor = models.AMOUNT_COLOR_TYPE_INVALID
+	}
+
 	if modifyUserLanguage || userNew.DecimalSeparator != models.DECIMAL_SEPARATOR_INVALID || userNew.DigitGroupingSymbol != models.DIGIT_GROUPING_SYMBOL_INVALID {
 		decimalSeparator := userNew.DecimalSeparator
 		digitGroupingSymbol := userNew.DigitGroupingSymbol

pkg/models/user.go

@@ -47,6 +47,39 @@ func (s TransactionEditScope) String() string {
 	}
 }
 
+// AmountColorType represents the type of amount color in frontend
+type AmountColorType byte
+
+// Amount Color Types
+const (
+	AMOUNT_COLOR_TYPE_DEFAULT        AmountColorType = 0
+	AMOUNT_COLOR_TYPE_GREEN          AmountColorType = 1
+	AMOUNT_COLOR_TYPE_RED            AmountColorType = 2
+	AMOUNT_COLOR_TYPE_YELLOW         AmountColorType = 3
+	AMOUNT_COLOR_TYPE_BLACK_OR_WHITE AmountColorType = 4
+	AMOUNT_COLOR_TYPE_INVALID        AmountColorType = 255
+)
+
+// String returns a textual representation of the amount color type enum
+func (s AmountColorType) String() string {
+	switch s {
+	case AMOUNT_COLOR_TYPE_DEFAULT:
+		return "Default"
+	case AMOUNT_COLOR_TYPE_GREEN:
+		return "Green"
+	case AMOUNT_COLOR_TYPE_RED:
+		return "Red"
+	case AMOUNT_COLOR_TYPE_YELLOW:
+		return "Yellow"
+	case AMOUNT_COLOR_TYPE_BLACK_OR_WHITE:
+		return "Black or White"
+	case AMOUNT_COLOR_TYPE_INVALID:
+		return "Invalid"
+	default:
+		return fmt.Sprintf("Invalid(%d)", int(s))
+	}
+}
+
 // User represents user data stored in database
 type User struct {
 	Uid                  int64  `xorm:"PK"`
@@ -68,6 +101,8 @@ type User struct {
 	DigitGroupingSymbol  DigitGroupingSymbol  `xorm:"TINYINT"`
 	DigitGrouping        DigitGroupingType    `xorm:"TINYINT"`
 	CurrencyDisplayType  CurrencyDisplayType  `xorm:"TINYINT"`
+	ExpenseAmountColor   AmountColorType      `xorm:"TINYINT"`
+	IncomeAmountColor    AmountColorType      `xorm:"TINYINT"`
 	Disabled             bool
 	Deleted              bool `xorm:"NOT NULL"`
 	EmailVerified        bool `xorm:"NOT NULL"`
@@ -97,6 +132,8 @@ type UserBasicInfo struct {
 	DigitGroupingSymbol  DigitGroupingSymbol  `json:"digitGroupingSymbol"`
 	DigitGrouping        DigitGroupingType    `json:"digitGrouping"`
 	CurrencyDisplayType  CurrencyDisplayType  `json:"currencyDisplayType"`
+	ExpenseAmountColor   AmountColorType      `json:"expenseAmountColor"`
+	IncomeAmountColor    AmountColorType      `json:"incomeAmountColor"`
 	EmailVerified        bool                 `json:"emailVerified"`
 }
 
@@ -154,6 +191,8 @@ type UserProfileUpdateRequest struct {
 	DigitGroupingSymbol  *DigitGroupingSymbol  `json:"digitGroupingSymbol" binding:"omitempty,min=0,max=4"`
 	DigitGrouping        *DigitGroupingType    `json:"digitGrouping" binding:"omitempty,min=0,max=2"`
 	CurrencyDisplayType  *CurrencyDisplayType  `json:"currencyDisplayType" binding:"omitempty,min=0,max=9"`
+	ExpenseAmountColor   *AmountColorType      `json:"expenseAmountColor" binding:"omitempty,min=0,max=4"`
+	IncomeAmountColor    *AmountColorType      `json:"incomeAmountColor" binding:"omitempty,min=0,max=4"`
 }
 
 // UserProfileUpdateResponse represents the data returns to frontend after updating profile
@@ -182,6 +221,8 @@ type UserProfileResponse struct {
 	DigitGroupingSymbol  DigitGroupingSymbol  `json:"digitGroupingSymbol"`
 	DigitGrouping        DigitGroupingType    `json:"digitGrouping"`
 	CurrencyDisplayType  CurrencyDisplayType  `json:"currencyDisplayType"`
+	ExpenseAmountColor   AmountColorType      `json:"expenseAmountColor"`
+	IncomeAmountColor    AmountColorType      `json:"incomeAmountColor"`
 	EmailVerified        bool                 `json:"emailVerified"`
 	LastLoginAt          int64                `json:"lastLoginAt"`
 }
@@ -249,6 +290,8 @@ func (u *User) ToUserBasicInfo() *UserBasicInfo {
 		DigitGroupingSymbol:  u.DigitGroupingSymbol,
 		DigitGrouping:        u.DigitGrouping,
 		CurrencyDisplayType:  u.CurrencyDisplayType,
+		ExpenseAmountColor:   u.ExpenseAmountColor,
+		IncomeAmountColor:    u.IncomeAmountColor,
 		EmailVerified:        u.EmailVerified,
 	}
 }
@@ -274,6 +317,8 @@ func (u *User) ToUserProfileResponse() *UserProfileResponse {
 		DigitGroupingSymbol:  u.DigitGroupingSymbol,
 		DigitGrouping:        u.DigitGrouping,
 		CurrencyDisplayType:  u.CurrencyDisplayType,
+		ExpenseAmountColor:   u.ExpenseAmountColor,
+		IncomeAmountColor:    u.IncomeAmountColor,
 		EmailVerified:        u.EmailVerified,
 		LastLoginAt:          u.LastLoginUnixTime,
 	}

pkg/services/users.go

@@ -264,6 +264,14 @@ func (s *UserService) UpdateUser(c *core.Context, user *models.User, modifyUserL
 		updateCols = append(updateCols, "currency_display_type")
 	}
 
+	if models.AMOUNT_COLOR_TYPE_DEFAULT <= user.ExpenseAmountColor && user.ExpenseAmountColor <= models.AMOUNT_COLOR_TYPE_BLACK_OR_WHITE {
+		updateCols = append(updateCols, "expense_amount_color")
+	}
+
+	if models.AMOUNT_COLOR_TYPE_DEFAULT <= user.IncomeAmountColor && user.IncomeAmountColor <= models.AMOUNT_COLOR_TYPE_BLACK_OR_WHITE {
+		updateCols = append(updateCols, "income_amount_color")
+	}
+
 	user.UpdatedUnixTime = now
 	updateCols = append(updateCols, "updated_unix_time")
 

src/DesktopApp.vue

@@ -17,7 +17,7 @@ import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import { isProduction } from '@/lib/version.js';
 import { loadMapAssets } from '@/lib/map/index.js';
-import { getSystemTheme } from '@/lib/ui.js';
+import { getSystemTheme, setExpenseAndIncomeAmountColor } from '@/lib/ui.js';
 
 export default {
     data() {
@@ -61,6 +61,8 @@ export default {
                     if (response.user) {
                         localeDefaultSettings = self.$locale.setLanguage(response.user.language);
                         self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+                        setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
                     }
                 });
 

src/MobileApp.vue

@@ -18,6 +18,7 @@ import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 import { isProduction } from '@/lib/version.js';
 import { getTheme, isEnableAnimate } from '@/lib/settings.js';
 import { loadMapAssets } from '@/lib/map/index.js';
+import { setExpenseAndIncomeAmountColor } from '@/lib/ui.js';
 import { isModalShowing, setAppFontSize } from '@/lib/ui.mobile.js';
 
 export default {
@@ -108,6 +109,8 @@ export default {
                     if (response.user) {
                         localeDefaultSettings = self.$locale.setLanguage(response.user.language);
                         self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+                        setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
                     }
                 });
 

src/consts/color.js

@@ -29,6 +29,59 @@ const defaultChartColors = [
     '8e1d51'
 ];
 
+const allAmountColors = {
+    Green: {
+        type: 1,
+        name: 'Green',
+        lightThemeColor: '#009688',
+        darkThemeColor: '#009688',
+        expenseClassName: 'expense-amount-color-green',
+        incomeClassName: 'income-amount-color-green'
+    },
+    Red: {
+        type: 2,
+        name: 'Red',
+        lightThemeColor: '#d43f3f',
+        darkThemeColor: '#d43f3f',
+        expenseClassName: 'expense-amount-color-red',
+        incomeClassName: 'income-amount-color-red'
+    },
+    Yellow: {
+        type: 3,
+        name: 'Yellow',
+        lightThemeColor: '#e2b60a',
+        darkThemeColor: '#e2b60a',
+        expenseClassName: 'expense-amount-color-yellow',
+        incomeClassName: 'income-amount-color-yellow'
+    },
+    BlackOrWhite: {
+        type: 4,
+        name: 'Black or White',
+        lightThemeColor: '#413935',
+        darkThemeColor: '#fcf0e3',
+        expenseClassName: 'expense-amount-color-blackorwhite',
+        incomeClassName: 'income-amount-color-blackorwhite'
+    }
+}
+
+const allAmountColorsArray = [
+    allAmountColors.Green,
+    allAmountColors.Red,
+    allAmountColors.Yellow,
+    allAmountColors.BlackOrWhite
+];
+
+const allAmountColorTypesMap = {
+    [allAmountColors.Green.type]: allAmountColors.Green,
+    [allAmountColors.Red.type]: allAmountColors.Red,
+    [allAmountColors.Yellow.type]: allAmountColors.Yellow,
+    [allAmountColors.BlackOrWhite.type]: allAmountColors.BlackOrWhite
+};
+
+const defaultExpenseIncomeAmountValue = 0;
+const defaultExpenseAmountColor = allAmountColors.Green;
+const defaultIncomeAmountColor = allAmountColors.Red;
+
 export default {
     defaultColor: defaultColor,
     allAccountColors: allAvailableColors,
@@ -36,4 +89,10 @@ export default {
     allCategoryColors: allAvailableColors,
     defaultCategoryColor: defaultColor,
     defaultChartColors: defaultChartColors,
+    allAmountColors: allAmountColors,
+    allAmountColorsArray: allAmountColorsArray,
+    allAmountColorTypesMap: allAmountColorTypesMap,
+    defaultExpenseIncomeAmountValue: defaultExpenseIncomeAmountValue,
+    defaultExpenseAmountColor: defaultExpenseAmountColor,
+    defaultIncomeAmountColor: defaultIncomeAmountColor,
 };

src/desktop-main.js

@@ -104,6 +104,7 @@ import '@/styles/desktop/template/layout/component/index.scss';
 import '@/styles/desktop/template/layout/_default-layout.scss';
 import '@/styles/desktop/global.scss';
 import '@/styles/desktop/font-size.scss';
+import '@/styles/desktop/amount-color.scss';
 
 import App from './DesktopApp.vue';
 
@@ -300,8 +301,7 @@ const vuetify = createVuetify({
                     'error': '#ff3b30',
                     'error-darken-1': '#e1342b',
                     'on-error': '#ffffff',
-                    'income': '#ff3b30',
+                    'teal': '#009688',
-                    'expense': '#009688',
                     'background': '#faf8f4',
                     'on-background': '#413935',
                     'surface': '#fff',
@@ -369,8 +369,7 @@ const vuetify = createVuetify({
                     'error': '#ff3b30',
                     'error-darken-1': '#e1342b',
                     'on-error': '#ffffff',
-                    'income': '#ff3b30',
+                    'teal': '#009688',
-                    'expense': '#009688',
                     'background': '#000000',
                     'on-background': '#fcf0e3',
                     'surface': '#1c1c1d',

src/lib/i18n.js

@@ -5,6 +5,7 @@ import numeralConstants from '@/consts/numeral.js';
 import datetimeConstants from '@/consts/datetime.js';
 import timezoneConstants from '@/consts/timezone.js';
 import currencyConstants from '@/consts/currency.js';
+import colorConstants from '@/consts/color.js';
 import accountConstants from '@/consts/account.js';
 import categoryConstants from '@/consts/category.js';
 import transactionConstants from '@/consts/transaction.js';
@@ -902,6 +903,37 @@ function getAmountPrependAndAppendText(currencyCode, userStore, settingsStore, t
     return getAmountPrependAndAppendCurrencySymbol(currencyDisplayType, currencyCode, currencyName);
 }
 
+function getAllExpenseIncomeAmountColors(translateFn, expenseOrIncome) {
+    const allAmountColors = [];
+    let defaultAmountName = '';
+
+    if (expenseOrIncome === 1) { // expense
+        defaultAmountName = colorConstants.defaultExpenseAmountColor.name;
+    } else if (expenseOrIncome === 2) { // income
+        defaultAmountName = colorConstants.defaultIncomeAmountColor.name;
+    }
+
+    if (defaultAmountName) {
+        defaultAmountName = translateFn('color.amount.' + defaultAmountName);
+    }
+
+    allAmountColors.push({
+        type: colorConstants.defaultExpenseIncomeAmountValue,
+        displayName: translateFn('System Default') + (defaultAmountName ? ` (${defaultAmountName})` : '')
+    });
+
+    for (let i = 0; i < colorConstants.allAmountColorsArray.length; i++) {
+        const amountColor = colorConstants.allAmountColorsArray[i];
+
+        allAmountColors.push({
+            type: amountColor.type,
+            displayName: translateFn('color.amount.' + amountColor.name)
+        });
+    }
+
+    return allAmountColors;
+}
+
 function getAllAccountCategories(translateFn) {
     const allAccountCategories = [];
 
@@ -1430,6 +1462,8 @@ export function i18nFunctions(i18nGlobal) {
         formatExchangeRateAmount: (userStore, value) => getFormatedExchangeRateAmount(value, i18nGlobal.t, userStore),
         getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
         getAmountPrependAndAppendText: (settingsStore, userStore, currencyCode) => getAmountPrependAndAppendText(currencyCode, userStore, settingsStore, i18nGlobal.t),
+        getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 1),
+        getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2),
         getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),
         getAllAccountTypes: () => getAllAccountTypes(i18nGlobal.t),
         getAllCategoricalChartTypes: () => getAllCategoricalChartTypes(i18nGlobal.t),

src/lib/services.js

@@ -169,7 +169,7 @@ export default {
     getProfile: () => {
         return axios.get('v1/users/profile/get.json');
     },
-    updateProfile: ({ email, nickname, password, oldPassword, defaultAccountId, transactionEditScope, language, defaultCurrency, firstDayOfWeek, longDateFormat, shortDateFormat, longTimeFormat, shortTimeFormat, decimalSeparator, digitGroupingSymbol, digitGrouping, currencyDisplayType }) => {
+    updateProfile: ({ email, nickname, password, oldPassword, defaultAccountId, transactionEditScope, language, defaultCurrency, firstDayOfWeek, longDateFormat, shortDateFormat, longTimeFormat, shortTimeFormat, decimalSeparator, digitGroupingSymbol, digitGrouping, currencyDisplayType, expenseAmountColor, incomeAmountColor }) => {
         return axios.post('v1/users/profile/update.json', {
             email,
             nickname,
@@ -187,7 +187,9 @@ export default {
             decimalSeparator,
             digitGroupingSymbol,
             digitGrouping,
-            currencyDisplayType
+            currencyDisplayType,
+            expenseAmountColor,
+            incomeAmountColor
         });
     },
     resendVerifyEmailByLoginedUser: () => {

src/lib/ui.js

@@ -1,3 +1,5 @@
+import colorConstants from '@/consts/color.js';
+
 export function getSystemTheme() {
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
         return 'dark';
@@ -6,6 +8,66 @@ export function getSystemTheme() {
     }
 }
 
+export function getExpenseAndIncomeAmountColor(expenseAmountColorType, incomeAmountColorType, isDarkMode) {
+    let expenseAmountColor = expenseAmountColorType ? colorConstants.allAmountColorTypesMap[expenseAmountColorType] : null;
+    let incomeAmountColor = incomeAmountColorType ? colorConstants.allAmountColorTypesMap[incomeAmountColorType] : null;
+
+    if (!expenseAmountColor) {
+        expenseAmountColor = colorConstants.defaultExpenseAmountColor;
+    }
+
+    if (!incomeAmountColor) {
+        incomeAmountColor = colorConstants.defaultIncomeAmountColor;
+    }
+
+    if (isDarkMode) {
+        return {
+            expenseAmountColor: expenseAmountColor.darkThemeColor,
+            incomeAmountColor: incomeAmountColor.darkThemeColor
+        }
+    } else {
+        return {
+            expenseAmountColor: expenseAmountColor.lightThemeColor,
+            incomeAmountColor: incomeAmountColor.lightThemeColor
+        }
+    }
+}
+
+export function setExpenseAndIncomeAmountColor(expenseAmountColorType, incomeAmountColorType) {
+    let expenseAmountColor = expenseAmountColorType ? colorConstants.allAmountColorTypesMap[expenseAmountColorType] : null;
+    let incomeAmountColor = incomeAmountColorType ? colorConstants.allAmountColorTypesMap[incomeAmountColorType] : null;
+
+    if (!expenseAmountColor) {
+        expenseAmountColor = colorConstants.defaultExpenseAmountColor;
+    }
+
+    if (!incomeAmountColor) {
+        incomeAmountColor = colorConstants.defaultIncomeAmountColor;
+    }
+
+    const htmlElement = document.querySelector('html');
+
+    for (let i = 0; i < colorConstants.allAmountColorsArray.length; i++) {
+        const amountColor = colorConstants.allAmountColorsArray[i];
+
+        if (amountColor.type === expenseAmountColor.type) {
+            if (!htmlElement.classList.contains(amountColor.expenseClassName)) {
+                htmlElement.classList.add(amountColor.expenseClassName);
+            }
+        } else {
+            htmlElement.classList.remove(amountColor.expenseClassName);
+        }
+
+        if (amountColor.type === incomeAmountColor.type) {
+            if (!htmlElement.classList.contains(amountColor.incomeClassName)) {
+                htmlElement.classList.add(amountColor.incomeClassName);
+            }
+        } else {
+            htmlElement.classList.remove(amountColor.incomeClassName);
+        }
+    }
+}
+
 export function startDownloadFile(fileName, fileData) {
     const dataObjectUrl = URL.createObjectURL(fileData);
     const dataLink = document.createElement('a');

src/locales/en.js

@@ -181,6 +181,14 @@ export default {
         'None': 'None',
         'Thousands Separator': 'Thousands Separator',
     },
+    'color': {
+        'amount': {
+            'Green': 'Green',
+            'Red': 'Red',
+            'Yellow': 'Yellow',
+            'Black or White': 'Black or White'
+        }
+    },
     'timezone': {
         'International Date Line West': 'International Date Line West',
         'Coordinated Universal Time-11': 'Coordinated Universal Time-11',
@@ -775,6 +783,7 @@ export default {
     'Sort': 'Sort',
     'Date': 'Date',
     'Time': 'Time',
+    'Color': 'Color',
     'Type': 'Type',
     'All Types': 'All Types',
     'More': 'More',
@@ -1103,6 +1112,8 @@ export default {
     'Currency Code': 'Currency Code',
     'Currency Name': 'Currency Name',
     'Currency Symbol': 'Currency Symbol',
+    'Expense Amount Color': 'Expense Amount Color',
+    'Income Amount Color': 'Income Amount Color',
     'Show Account Balance': 'Show Account Balance',
     'Hide Account Balance': 'Hide Account Balance',
     'Page Settings': 'Page Settings',

src/locales/zh_Hans.js

@@ -181,6 +181,14 @@ export default {
         'None': '无',
         'Thousands Separator': '千位分隔符',
     },
+    'color': {
+        'amount': {
+            'Green': '绿色',
+            'Red': '红色',
+            'Yellow': '黄色',
+            'Black or White': '黑色或白色'
+        }
+    },
     'timezone': {
         'International Date Line West': '国际日期变更线西',
         'Coordinated Universal Time-11': '协调世界时-11',
@@ -775,6 +783,7 @@ export default {
     'Sort': '排序',
     'Date': '日期',
     'Time': '时间',
+    'Color': '颜色',
     'Type': '类型',
     'All Types': '全部类型',
     'More': '更多',
@@ -1103,6 +1112,8 @@ export default {
     'Currency Code': '货币代码',
     'Currency Name': '货币名称',
     'Currency Symbol': '货币符号',
+    'Expense Amount Color': '支出金额颜色',
+    'Income Amount Color': '收入金额颜色',
     'Show Account Balance': '显示账户余额',
     'Hide Account Balance': '隐藏账户余额',
     'Page Settings': '页面设置',

src/mobile-main.js

@@ -119,6 +119,7 @@ import '@/styles/mobile/font-size-x-large.css';
 import '@/styles/mobile/font-size-xx-large.css';
 import '@/styles/mobile/font-size-xxx-large.css';
 import '@/styles/mobile/font-size-xxxx-large.css';
+import '@/styles/mobile/amount-color.css';
 
 import App from '@/MobileApp.vue';
 

src/stores/index.js

@@ -384,7 +384,9 @@ export const useRootStore = defineStore('root', {
                     decimalSeparator: profile.decimalSeparator,
                     digitGroupingSymbol: profile.digitGroupingSymbol,
                     digitGrouping: profile.digitGrouping,
-                    currencyDisplayType: profile.currencyDisplayType
+                    currencyDisplayType: profile.currencyDisplayType,
+                    expenseAmountColor: profile.expenseAmountColor,
+                    incomeAmountColor: profile.incomeAmountColor
                 }).then(response => {
                     const data = response.data;
 

src/stores/user.js

@@ -69,6 +69,14 @@ export const useUserStore = defineStore('user', {
         currentUserCurrencyDisplayType(state) {
             const userInfo = state.currentUserInfo || {};
             return userInfo.currencyDisplayType;
+        },
+        currentUserExpenseAmountColor(state) {
+            const userInfo = state.currentUserInfo || {};
+            return userInfo.expenseAmountColor;
+        },
+        currentUserIncomeAmountColor(state) {
+            const userInfo = state.currentUserInfo || {};
+            return userInfo.incomeAmountColor;
         }
     },
     actions: {

src/styles/desktop/amount-color.scss

@@ -0,0 +1,133 @@
+:root {
+    --ebk-amount-color-green: 0, 150, 136;
+    --ebk-amount-color-red: 212, 63, 63;
+    --ebk-amount-color-yellow: 226, 182, 10;
+}
+
+:root.expense-amount-color-green {
+    .v-theme--light,
+    .v-theme--dark {
+        --v-theme-expense: var(--ebk-amount-color-green);
+    }
+
+    .text-expense {
+        color: rgb(var(--ebk-amount-color-green));
+    }
+
+    .bg-expense {
+        color: rgb(var(--v-theme-on-primary)) !important;
+        background-color: rgb(var(--ebk-amount-color-green));
+    }
+}
+
+:root.income-amount-color-green {
+    .v-theme--light,
+    .v-theme--dark {
+        --v-theme-income: var(--ebk-amount-color-green);
+    }
+
+    .text-income {
+        color: rgb(var(--ebk-amount-color-green));
+    }
+
+    .bg-income {
+        color: rgb(var(--v-theme-on-primary)) !important;
+        background-color: rgb(var(--ebk-amount-color-green));
+    }
+}
+
+:root.expense-amount-color-red {
+    .v-theme--light,
+    .v-theme--dark {
+        --v-theme-expense: var(--ebk-amount-color-red);
+    }
+
+    .text-expense {
+        color: rgb(var(--ebk-amount-color-red));
+    }
+
+    .bg-expense {
+        color: rgb(var(--v-theme-on-primary)) !important;
+        background-color: rgb(var(--ebk-amount-color-red));
+    }
+}
+
+:root.income-amount-color-red {
+    .v-theme--light,
+    .v-theme--dark {
+        --v-theme-income: var(--ebk-amount-color-red);
+    }
+
+    .text-income {
+        color: rgb(var(--ebk-amount-color-red));
+    }
+
+    .bg-income {
+        color: rgb(var(--v-theme-on-primary)) !important;
+        background-color: rgb(var(--ebk-amount-color-red));
+    }
+}
+
+:root.expense-amount-color-yellow {
+    .v-theme--light,
+    .v-theme--dark {
+        --v-theme-expense: var(--ebk-amount-color-yellow);
+    }
+
+    .text-expense {
+        color: rgb(var(--ebk-amount-color-yellow));
+    }
+
+    .bg-expense {
+        color: rgb(var(--v-theme-on-primary)) !important;
+        background-color: rgb(var(--ebk-amount-color-yellow));
+    }
+}
+
+:root.income-amount-color-yellow {
+    .v-theme--light,
+    .v-theme--dark {
+        --v-theme-income: var(--ebk-amount-color-yellow);
+    }
+
+    .text-income {
+        color: rgb(var(--ebk-amount-color-yellow));
+    }
+
+    .bg-income {
+        color: rgb(var(--v-theme-on-primary)) !important;
+        background-color: rgb(var(--ebk-amount-color-yellow));
+    }
+}
+
+:root.expense-amount-color-blackorwhite {
+    .v-theme--light,
+    .v-theme--dark {
+        --v-theme-expense: var(--v-theme-on-surface);
+
+        .text-expense {
+            color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+        }
+
+        .bg-expense {
+            color: rgb(var(--v-theme-surface)) !important;
+            background-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+        }
+    }
+}
+
+:root.income-amount-color-blackorwhite {
+    .v-theme--light,
+    .v-theme--dark {
+        --v-theme-income: var(--v-theme-on-surface);
+
+        .text-income {
+            color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+        }
+
+        .bg-income {
+            color: rgb(var(--v-theme-surface)) !important;
+            background-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+        }
+    }
+}

src/styles/mobile/amount-color.css

@@ -0,0 +1,47 @@
+:root {
+    --ebk-amount-color-green: 0, 150, 136;
+    --ebk-amount-color-red: 212, 63, 63;
+    --ebk-amount-color-yellow: 226, 182, 10;
+    --ebk-amount-color-black: 65, 57, 53;
+    --ebk-amount-color-white: 250, 240, 237;
+}
+
+:root.expense-amount-color-green .text-expense {
+    color: rgb(var(--ebk-amount-color-green)) !important;
+}
+
+:root.income-amount-color-green .text-income {
+    color: rgb(var(--ebk-amount-color-green)) !important;
+}
+
+:root.expense-amount-color-red .text-expense {
+    color: rgb(var(--ebk-amount-color-red)) !important;
+}
+
+:root.income-amount-color-red .text-income {
+    color: rgb(var(--ebk-amount-color-red)) !important;
+}
+
+:root.expense-amount-color-yellow .text-expense {
+    color: rgb(var(--ebk-amount-color-yellow)) !important;
+}
+
+:root.income-amount-color-yellow .text-income {
+    color: rgb(var(--ebk-amount-color-yellow)) !important;
+}
+
+:root.expense-amount-color-blackorwhite .text-expense {
+    color: rgb(var(--ebk-amount-color-black)) !important;
+}
+
+:root.dark.expense-amount-color-blackorwhite .text-expense {
+    color: rgb(var(--ebk-amount-color-white)) !important;
+}
+
+:root.income-amount-color-blackorwhite .text-income {
+    color: rgb(var(--ebk-amount-color-black)) !important;
+}
+
+:root.dark.income-amount-color-blackorwhite .text-income {
+    color: rgb(var(--ebk-amount-color-white)) !important;
+}

src/views/desktop/SignupPage.vue

@@ -223,7 +223,7 @@
                                :append-icon="icons.next"
                                @click="switchToNextTab"
                                v-if="currentStep === 'basicSetting'">{{ $t('Next') }}</v-btn>
-                        <v-btn color="expense"
+                        <v-btn color="teal"
                                :disabled="submitting || navigateToHomePage"
                                :append-icon="!submitting ? icons.submit : null"
                                @click="submit"

src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue

@@ -16,7 +16,7 @@
             </v-btn>
         </v-card-text>
         <v-card-text class="mt-1 pb-1">
-            <div class="font-weight-semibold text-truncate text-red text-h4 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
+            <div class="font-weight-semibold text-truncate text-h4 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
             <v-skeleton-loader class="skeleton-no-margin mt-4 mb-8" type="text" width="120px" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
             <div class="text-truncate text-h5 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
             <v-skeleton-loader class="skeleton-no-margin mb-1" style="padding-bottom: 2px" type="text" width="120px" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>

src/views/desktop/overview/cards/MonthlyIncomeAndExpenseCard.vue

@@ -25,6 +25,8 @@
 </template>
 
 <script>
+import { useTheme } from 'vuetify';
+
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
@@ -34,6 +36,7 @@ import {
     parseDateFromUnixTime,
     getMonthName
 } from '@/lib/datetime.js';
+import { getExpenseAndIncomeAmountColor } from '@/lib/ui.js';
 
 export default {
     props: [
@@ -77,6 +80,8 @@ export default {
             let minAmount = 0;
             let maxAmount = 0;
 
+            const expenseIncomeAmountColor = getExpenseAndIncomeAmountColor(this.userStore.currentUserExpenseAmountColor, this.userStore.currentUserIncomeAmountColor, this.isDarkMode);
+
             if (self.data) {
                 for (let i = 0; i < self.data.length; i++) {
                     const item = self.data[i];
@@ -119,9 +124,7 @@ export default {
                     },
                     formatter: params => {
                         let incomeAmount = 0;
-                        let incomeColor = '#cc4a66';
                         let expenseAmount = 0;
-                        let expenseColor = '#4dd291';
 
                         for (let i = 0; i < params.length; i++) {
                             const param = params[i];
@@ -130,10 +133,8 @@ export default {
 
                             if (param.seriesId === 'seriesIncome') {
                                 incomeAmount = self.getDisplayIncomeAmount(data);
-                                incomeColor = param.color;
                             } else if (param.seriesId === 'seriesExpense') {
                                 expenseAmount = self.getDisplayExpenseAmount(data);
-                                expenseColor = param.color;
                             }
                         }
 
@@ -145,11 +146,11 @@ export default {
                             `</thead>` +
                             `<tbody>` +
                                 `<tr>` +
-                                    `<td><span class="overview-monthly-chart-tooltip-indicator mr-1" style="background-color: ${incomeColor}"></span><span class="mr-4">${self.$t('Income')}</span></td>` +
+                                    `<td><span class="overview-monthly-chart-tooltip-indicator bg-income mr-1"></span><span class="mr-4">${self.$t('Income')}</span></td>` +
                                     `<td><strong>${incomeAmount}</strong></td>` +
                                 `</tr>` +
                                 `<tr>` +
-                                    `<td><span class="overview-monthly-chart-tooltip-indicator mr-1" style="background-color: ${expenseColor}"></span><span class="mr-4">${self.$t('Expense')}</span></td>` +
+                                    `<td><span class="overview-monthly-chart-tooltip-indicator bg-expense mr-1"></span><span class="mr-4">${self.$t('Expense')}</span></td>` +
                                     `<td><strong>${expenseAmount}</strong></td>` +
                                 `</tr>` +
                             `</tbody>` +
@@ -221,7 +222,7 @@ export default {
                         yAxisIndex: 0,
                         stack: 'Total',
                         itemStyle: {
-                            color: '#cc4a66',
+                            color: expenseIncomeAmountColor.incomeAmountColor,
                             borderRadius: 16
                         },
                         emphasis: {
@@ -240,7 +241,7 @@ export default {
                         yAxisIndex: 1,
                         stack: 'Total',
                         itemStyle: {
-                            color: '#4dd291',
+                            color: expenseIncomeAmountColor.expenseAmountColor,
                             borderRadius: 16
                         },
                         emphasis: {
@@ -256,6 +257,13 @@ export default {
             };
         }
     },
+    setup() {
+        const theme = useTheme();
+
+        return {
+            globalTheme: theme
+        };
+    },
     methods: {
         clickItem: function (e) {
             if (!this.enableClickItem  || !this.data || e.componentType !== 'series') {

src/views/desktop/transactions/ListPage.vue

@@ -93,7 +93,7 @@
                                                     {{ currentMonthTotalAmount.income }}
                                                 </span>
                                                 <span class="text-subtitle-1 ml-3">{{ $t('Total Expense') }}</span>
-                                                <span class="text-income ml-2" v-if="loading">
+                                                <span class="text-expense ml-2" v-if="loading">
                                                     <v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
                                                 </span>
                                                 <span class="text-expense ml-2" v-else-if="!loading">

src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue

@@ -257,6 +257,32 @@
                                     v-model="newProfile.currencyDisplayType"
                                 />
                             </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :disabled="loading || saving"
+                                    :label="$t('Expense Amount Color')"
+                                    :placeholder="$t('Expense Amount Color')"
+                                    :items="allExpenseAmountColorTypes"
+                                    v-model="newProfile.expenseAmountColor"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    persistent-placeholder
+                                    :disabled="loading || saving"
+                                    :label="$t('Income Amount Color')"
+                                    :placeholder="$t('Income Amount Color')"
+                                    :items="allIncomeAmountColorTypes"
+                                    v-model="newProfile.incomeAmountColor"
+                                />
+                            </v-col>
                         </v-row>
                     </v-card-text>
 
@@ -290,6 +316,7 @@ import datetimeConstants from '@/consts/datetime.js';
 import { getNameByKeyValue } from '@/lib/common.js';
 import { getCategorizedAccounts } from '@/lib/account.js';
 import { isUserVerifyEmailEnabled } from '@/lib/server_settings.js';
+import { setExpenseAndIncomeAmountColor } from '@/lib/ui.js';
 
 import {
     mdiAccount
@@ -317,7 +344,9 @@ export default {
                 decimalSeparator: 0,
                 digitGroupingSymbol: 0,
                 digitGrouping: 0,
-                currencyDisplayType: 0
+                currencyDisplayType: 0,
+                expenseAmountColor: 0,
+                incomeAmountColor: 0
             },
             oldProfile: {
                 email: '',
@@ -334,7 +363,9 @@ export default {
                 decimalSeparator: 0,
                 digitGroupingSymbol: 0,
                 digitGrouping: 0,
-                currencyDisplayType: 0
+                currencyDisplayType: 0,
+                expenseAmountColor: 0,
+                incomeAmountColor: 0
             },
             emailVerified: false,
             loading: true,
@@ -389,6 +420,12 @@ export default {
         allCurrencyDisplayTypes() {
             return this.$locale.getAllCurrencyDisplayTypes(this.settingsStore, this.userStore);
         },
+        allExpenseAmountColorTypes() {
+            return this.$locale.getAllExpenseAmountColors();
+        },
+        allIncomeAmountColorTypes() {
+            return this.$locale.getAllIncomeAmountColors();
+        },
         allTransactionEditScopeTypes() {
             return this.$locale.getAllTransactionEditScopeTypes();
         },
@@ -424,7 +461,9 @@ export default {
                 this.newProfile.decimalSeparator === this.oldProfile.decimalSeparator &&
                 this.newProfile.digitGroupingSymbol === this.oldProfile.digitGroupingSymbol &&
                 this.newProfile.digitGrouping === this.oldProfile.digitGrouping &&
-                this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType) {
+                this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType &&
+                this.newProfile.expenseAmountColor === this.oldProfile.expenseAmountColor &&
+                this.newProfile.incomeAmountColor === this.oldProfile.incomeAmountColor) {
                 return 'Nothing has been modified';
             } else {
                 return null;
@@ -503,6 +542,8 @@ export default {
 
                     const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+                    setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
                 }
 
                 self.$refs.snackbar.showMessage('Your profile has been successfully updated');
@@ -555,6 +596,8 @@ export default {
             this.oldProfile.digitGroupingSymbol = profile.digitGroupingSymbol;
             this.oldProfile.digitGrouping = profile.digitGrouping;
             this.oldProfile.currencyDisplayType = profile.currencyDisplayType;
+            this.oldProfile.expenseAmountColor = profile.expenseAmountColor;
+            this.oldProfile.incomeAmountColor = profile.incomeAmountColor;
 
             this.newProfile.email = this.oldProfile.email
             this.newProfile.nickname = this.oldProfile.nickname;
@@ -571,6 +614,8 @@ export default {
             this.newProfile.digitGroupingSymbol = this.oldProfile.digitGroupingSymbol;
             this.newProfile.digitGrouping = this.oldProfile.digitGrouping;
             this.newProfile.currencyDisplayType = this.oldProfile.currencyDisplayType;
+            this.newProfile.expenseAmountColor = this.oldProfile.expenseAmountColor;
+            this.newProfile.incomeAmountColor = this.oldProfile.incomeAmountColor;
         }
     }
 };

src/views/mobile/HomePage.vue

@@ -54,11 +54,11 @@
                 </template>
                 <template #after>
                     <div class="overview-transaction-amount">
-                        <div class="text-color-red text-align-right">
+                        <div class="text-income text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ getDisplayIncomeAmount(transactionOverview.today) }}</small>
                         </div>
-                        <div class="text-color-teal text-align-right">
+                        <div class="text-expense text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ getDisplayExpenseAmount(transactionOverview.today) }}</small>
                         </div>
@@ -87,11 +87,11 @@
                 </template>
                 <template #after>
                     <div class="overview-transaction-amount">
-                        <div class="text-color-red text-align-right">
+                        <div class="text-income text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ getDisplayIncomeAmount(transactionOverview.thisWeek) }}</small>
                         </div>
-                        <div class="text-color-teal text-align-right">
+                        <div class="text-expense text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ getDisplayExpenseAmount(transactionOverview.thisWeek) }}</small>
                         </div>
@@ -120,11 +120,11 @@
                 </template>
                 <template #after>
                     <div class="overview-transaction-amount">
-                        <div class="text-color-red text-align-right">
+                        <div class="text-income text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ getDisplayIncomeAmount(transactionOverview.thisMonth) }}</small>
                         </div>
-                        <div class="text-color-teal text-align-right">
+                        <div class="text-expense text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ getDisplayExpenseAmount(transactionOverview.thisMonth) }}</small>
                         </div>
@@ -150,11 +150,11 @@
                 </template>
                 <template #after>
                     <div class="overview-transaction-amount">
-                        <div class="text-color-red text-align-right">
+                        <div class="text-income text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ getDisplayIncomeAmount(transactionOverview.thisYear) }}</small>
                         </div>
-                        <div class="text-color-teal text-align-right">
+                        <div class="text-expense text-align-right">
                             <small v-if="loading">0.00 USD</small>
                             <small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ getDisplayExpenseAmount(transactionOverview.thisYear) }}</small>
                         </div>

src/views/mobile/settings/TextSizeSettingsPage.vue

@@ -19,8 +19,8 @@
                                     <template #title>
                                         <small>{{ currentLongYearMonth }}</small>
                                         <small class="transaction-amount-statistics">
-                                            <span class="text-color-red">{{ `+${getDisplayAmount('12345')}` }}</span>
+                                            <span class="text-income">{{ `+${getDisplayAmount('12345')}` }}</span>
-                                            <span class="text-color-teal">{{ `-${getDisplayAmount('67890')}` }}</span>
+                                            <span class="text-expense">{{ `-${getDisplayAmount('67890')}` }}</span>
                                         </small>
                                         <f7-icon class="combination-list-chevron-icon" f7="chevron_up"></f7-icon>
                                     </template>

src/views/mobile/statistics/TransactionPage.vue

@@ -89,7 +89,7 @@
                     </div>
                 </div>
                 <div class="display-flex full-line">
-                    <div :class="{ 'statistics-list-item-overview-amount': true, 'text-color-teal': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-color-red': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }">
+                    <div :class="{ 'statistics-list-item-overview-amount': true, 'text-expense': query.chartDataType === allChartDataTypes.ExpenseByAccount.type || query.chartDataType === allChartDataTypes.ExpenseByPrimaryCategory.type || query.chartDataType === allChartDataTypes.ExpenseBySecondaryCategory.type, 'text-income': query.chartDataType === allChartDataTypes.IncomeByAccount.type || query.chartDataType === allChartDataTypes.IncomeByPrimaryCategory.type || query.chartDataType === allChartDataTypes.IncomeBySecondaryCategory.type }">
                         <span v-if="!loading && categoricalAnalysisData && categoricalAnalysisData.items && categoricalAnalysisData.items.length">
                             {{ getDisplayAmount(categoricalAnalysisData.totalAmount, defaultCurrency) }}
                         </span>

src/views/mobile/transactions/EditPage.vue

@@ -561,8 +561,8 @@ export default {
         sourceAmountClass() {
             const classes = {
                 'readonly': this.mode === 'view',
-                'text-color-teal': this.transaction.type === this.allTransactionTypes.Expense,
+                'text-expense': this.transaction.type === this.allTransactionTypes.Expense,
-                'text-color-red': this.transaction.type === this.allTransactionTypes.Income,
+                'text-income': this.transaction.type === this.allTransactionTypes.Income,
                 'text-color-primary': this.transaction.type === this.allTransactionTypes.Transfer
             };
 

src/views/mobile/transactions/ListPage.vue

@@ -137,10 +137,10 @@
                                         <span>{{ getDisplayYearMonth(transactionMonthList) }}</span>
                                     </small>
                                     <small class="transaction-amount-statistics" v-if="showTotalAmountInTransactionListPage && transactionMonthList.totalAmount">
-                                        <span class="text-color-red">
+                                        <span class="text-income">
                                             {{ getDisplayMonthTotalAmount(transactionMonthList.totalAmount.income, defaultCurrency, '+', transactionMonthList.totalAmount.incompleteIncome) }}
                                         </span>
-                                        <span class="text-color-teal">
+                                        <span class="text-expense">
                                             {{ getDisplayMonthTotalAmount(transactionMonthList.totalAmount.expense, defaultCurrency, '-', transactionMonthList.totalAmount.incompleteExpense) }}
                                         </span>
                                     </small>
@@ -199,7 +199,7 @@
                                             </div>
                                             <div class="item-after">
                                                 <div class="transaction-amount" v-if="transaction.sourceAccount"
-                                                     :class="{ 'text-color-teal': transaction.type === allTransactionTypes.Expense, 'text-color-red': transaction.type === allTransactionTypes.Income }">
+                                                     :class="{ 'text-expense': transaction.type === allTransactionTypes.Expense, 'text-income': transaction.type === allTransactionTypes.Income }">
                                                     <span>{{ getTransactionDisplayAmount(transaction) }}</span>
                                                 </div>
                                             </div>

src/views/mobile/users/UserProfilePage.vue

@@ -33,6 +33,8 @@
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Digit Grouping Symbol" title="Comma (,)" link="#"></f7-list-item>
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Digit Grouping" title="Thousands Separator" link="#"></f7-list-item>
             <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Currency Display Mode" title="Currency Symbol" link="#"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Expense Amount Color" title="Amount Color" link="#"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Income Amount Color" title="Amount Color" link="#"></f7-list-item>
         </f7-list>
 
         <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
@@ -262,6 +264,32 @@
                 </select>
             </f7-list-item>
 
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                :header="$t('Expense Amount Color')"
+                :title="getNameByKeyValue(allExpenseAmountColorTypes, newProfile.expenseAmountColor, 'type', 'displayName')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Color'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Expense Amount Color'), popupCloseLinkText: $t('Done') }"
+            >
+                <select v-model="newProfile.expenseAmountColor">
+                    <option :value="format.type"
+                            :key="format.type"
+                            v-for="format in allExpenseAmountColorTypes">{{ format.displayName }}</option>
+                </select>
+            </f7-list-item>
+
+            <f7-list-item
+                class="list-item-with-header-and-title list-item-no-item-after"
+                :header="$t('Income Amount Color')"
+                :title="getNameByKeyValue(allIncomeAmountColorTypes, newProfile.incomeAmountColor, 'type', 'displayName')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Color'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Income Amount Color'), popupCloseLinkText: $t('Done') }"
+            >
+                <select v-model="newProfile.incomeAmountColor">
+                    <option :value="format.type"
+                            :key="format.type"
+                            v-for="format in allIncomeAmountColorTypes">{{ format.displayName }}</option>
+                </select>
+            </f7-list-item>
+
             <f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="$t(langAndRegionInputInvalidProblemMessage)"></f7-list-item>
         </f7-list>
 
@@ -297,6 +325,7 @@ import { useAccountsStore } from '@/stores/account.js';
 import { getNameByKeyValue } from '@/lib/common.js';
 import { getCategorizedAccounts } from '@/lib/account.js';
 import { isUserVerifyEmailEnabled } from '@/lib/server_settings.js';
+import { setExpenseAndIncomeAmountColor } from '@/lib/ui.js';
 
 export default {
     props: [
@@ -321,7 +350,9 @@ export default {
                 decimalSeparator: 0,
                 digitGroupingSymbol: 0,
                 digitGrouping: 0,
-                currencyDisplayType: 0
+                currencyDisplayType: 0,
+                expenseAmountColor: 0,
+                incomeAmountColor: 0
             },
             oldProfile: {
                 email: '',
@@ -338,7 +369,9 @@ export default {
                 decimalSeparator: 0,
                 digitGroupingSymbol: 0,
                 digitGrouping: 0,
-                currencyDisplayType: 0
+                currencyDisplayType: 0,
+                expenseAmountColor: 0,
+                incomeAmountColor: 0
             },
             emailVerified: false,
             currentPassword: '',
@@ -395,6 +428,12 @@ export default {
         allCurrencyDisplayTypes() {
             return this.$locale.getAllCurrencyDisplayTypes(this.settingsStore, this.userStore);
         },
+        allExpenseAmountColorTypes() {
+            return this.$locale.getAllExpenseAmountColors();
+        },
+        allIncomeAmountColorTypes() {
+            return this.$locale.getAllIncomeAmountColors();
+        },
         allTransactionEditScopeTypes() {
             return this.$locale.getAllTransactionEditScopeTypes();
         },
@@ -443,7 +482,9 @@ export default {
                 this.newProfile.decimalSeparator === this.oldProfile.decimalSeparator &&
                 this.newProfile.digitGroupingSymbol === this.oldProfile.digitGroupingSymbol &&
                 this.newProfile.digitGrouping === this.oldProfile.digitGrouping &&
-                this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType) {
+                this.newProfile.currencyDisplayType === this.oldProfile.currencyDisplayType &&
+                this.newProfile.expenseAmountColor === this.oldProfile.expenseAmountColor &&
+                this.newProfile.incomeAmountColor === this.oldProfile.incomeAmountColor) {
                 return 'Nothing has been modified';
             } else if (!this.newProfile.password && this.newProfile.confirmPassword) {
                 return 'Password cannot be blank';
@@ -538,6 +579,8 @@ export default {
 
                     const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
                     self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+
+                    setExpenseAndIncomeAmountColor(response.user.expenseAmountColor, response.user.incomeAmountColor);
                 }
 
                 self.$toast('Your profile has been successfully updated');
@@ -596,6 +639,8 @@ export default {
             this.oldProfile.digitGroupingSymbol = profile.digitGroupingSymbol;
             this.oldProfile.digitGrouping = profile.digitGrouping;
             this.oldProfile.currencyDisplayType = profile.currencyDisplayType;
+            this.oldProfile.expenseAmountColor = profile.expenseAmountColor;
+            this.oldProfile.incomeAmountColor = profile.incomeAmountColor;
 
             this.newProfile.email = this.oldProfile.email
             this.newProfile.nickname = this.oldProfile.nickname;
@@ -612,6 +657,8 @@ export default {
             this.newProfile.digitGroupingSymbol = this.oldProfile.digitGroupingSymbol;
             this.newProfile.digitGrouping = this.oldProfile.digitGrouping;
             this.newProfile.currencyDisplayType = this.oldProfile.currencyDisplayType;
+            this.newProfile.expenseAmountColor = this.oldProfile.expenseAmountColor;
+            this.newProfile.incomeAmountColor = this.oldProfile.incomeAmountColor;
         }
     }
 };