support setting expense / income amount color

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');