From fde1c6787e45e6f937788a1db14442e7692df30b Mon Sep 17 00:00:00 2001 From: MK13 Date: Mon, 1 Mar 2021 23:43:31 +0100 Subject: [PATCH] #14 Introduce dark mode --- .../de/financer/chart/ChartDefinitions.java | 2 +- .../inline/ExpensesAllPeriodsGenerator.java | 1 + .../de/financer/config/FinancerConfig.java | 9 ++++++++ .../controller/AccountController.java | 13 +++++++++++ .../controller/AccountGroupController.java | 2 ++ .../controller/CalendarController.java | 1 + .../RecurringTransactionController.java | 8 +++++++ .../financer/controller/ReportController.java | 4 ++++ .../controller/TransactionController.java | 4 ++++ .../de/financer/util/ControllerUtils.java | 4 ++++ .../resources/config/application.properties | 6 ++++- .../main/resources/i18n/message.properties | 5 +++++ .../resources/i18n/message_de_DE.properties | 5 +++++ .../src/main/resources/static/changelog.txt | 1 + .../resources/static/css/darkModeColors.css | 16 ++++++++++++++ .../resources/static/css/lightModeColors.css | 16 ++++++++++++++ .../src/main/resources/static/css/main.css | 22 ++++++++++--------- .../templates/account/accountDetails.html | 2 ++ .../templates/account/accountOverview.html | 2 ++ .../templates/account/newAccount.html | 2 ++ .../accountGroup/newAccountGroup.html | 2 ++ .../resources/templates/includes/footer.html | 5 ++++- .../recurringTransaction/calendar.html | 2 ++ .../newRecurringTransaction.html | 2 ++ .../recurringToTransactionWithAmount.html | 2 ++ .../recurringTransactionList.html | 2 ++ .../configureAccountExpensesForPeriod.html | 2 ++ ...onfigureAccountGroupExpensesForPeriod.html | 2 ++ .../templates/report/selectChart.html | 2 ++ .../templates/transaction/newTransaction.html | 2 ++ .../transaction/searchTransactions.html | 2 ++ 31 files changed, 137 insertions(+), 13 deletions(-) create mode 100644 financer-web-client/src/main/resources/static/css/darkModeColors.css create mode 100644 financer-web-client/src/main/resources/static/css/lightModeColors.css diff --git a/financer-web-client/src/main/java/de/financer/chart/ChartDefinitions.java b/financer-web-client/src/main/java/de/financer/chart/ChartDefinitions.java index d1abc34..dec5c06 100644 --- a/financer-web-client/src/main/java/de/financer/chart/ChartDefinitions.java +++ b/financer-web-client/src/main/java/de/financer/chart/ChartDefinitions.java @@ -3,7 +3,7 @@ package de.financer.chart; import java.awt.*; public class ChartDefinitions { - public static final Color TRANSPARENT = new Color(0.0f, 0.0f, 0.0f, 0.0f); + public static final Color TRANSPARENT = new Color(0xFF, 0xFF, 0xFF, 0); public static final Color BLUE = new Color(0, 143, 251); public static final Color RED = new Color(211, 0, 0); public static final Color GREEN = new Color(0, 169, 0); diff --git a/financer-web-client/src/main/java/de/financer/chart/impl/inline/ExpensesAllPeriodsGenerator.java b/financer-web-client/src/main/java/de/financer/chart/impl/inline/ExpensesAllPeriodsGenerator.java index 9708c35..8b1ffa1 100644 --- a/financer-web-client/src/main/java/de/financer/chart/impl/inline/ExpensesAllPeriodsGenerator.java +++ b/financer-web-client/src/main/java/de/financer/chart/impl/inline/ExpensesAllPeriodsGenerator.java @@ -27,6 +27,7 @@ public class ExpensesAllPeriodsGenerator extends AbstractChartGenerator recurringTransactions; @@ -240,6 +247,7 @@ public class RecurringTransactionController { model.addAttribute("subTitle", form.getSubTitle()); ControllerUtils.addVersionAttribute(model, this.financerConfig); ControllerUtils.addCurrencySymbol(model, this.financerConfig); + ControllerUtils.addDarkMode(model, this.financerConfig); Iterable recurringTransactions; diff --git a/financer-web-client/src/main/java/de/financer/controller/ReportController.java b/financer-web-client/src/main/java/de/financer/controller/ReportController.java index 6b6e2d1..79a913f 100644 --- a/financer-web-client/src/main/java/de/financer/controller/ReportController.java +++ b/financer-web-client/src/main/java/de/financer/controller/ReportController.java @@ -25,6 +25,7 @@ public class ReportController { model.addAttribute("availableCharts", ChartType.valueList(true)); ControllerUtils.addVersionAttribute(model, this.financerConfig); ControllerUtils.addCurrencySymbol(model, this.financerConfig); + ControllerUtils.addDarkMode(model, this.financerConfig); return "report/selectChart"; } @@ -42,6 +43,7 @@ public class ReportController { model.addAttribute("availableCharts", ChartType.valueList(true)); ControllerUtils.addVersionAttribute(model, this.financerConfig); ControllerUtils.addCurrencySymbol(model, this.financerConfig); + ControllerUtils.addDarkMode(model, this.financerConfig); return "report/selectChart"; } @@ -55,6 +57,7 @@ public class ReportController { model.addAttribute("form", new ConfigAccountGroupExpenseForPeriodForm()); ControllerUtils.addVersionAttribute(model, this.financerConfig); ControllerUtils.addCurrencySymbol(model, this.financerConfig); + ControllerUtils.addDarkMode(model, this.financerConfig); return "report/configureAccountGroupExpensesForPeriod"; case ACCOUNT_EXPENSES_CURRENT_PERIOD: @@ -65,6 +68,7 @@ public class ReportController { model.addAttribute("form", new ConfigAccountExpenseForPeriodForm()); ControllerUtils.addVersionAttribute(model, this.financerConfig); ControllerUtils.addCurrencySymbol(model, this.financerConfig); + ControllerUtils.addDarkMode(model, this.financerConfig); return "report/configureAccountExpensesForPeriod"; case EXPENSE_PERIOD_TOTALS_CURRENT_YEAR: diff --git a/financer-web-client/src/main/java/de/financer/controller/TransactionController.java b/financer-web-client/src/main/java/de/financer/controller/TransactionController.java index db55320..68bbc99 100644 --- a/financer-web-client/src/main/java/de/financer/controller/TransactionController.java +++ b/financer-web-client/src/main/java/de/financer/controller/TransactionController.java @@ -41,6 +41,7 @@ public class TransactionController { model.addAttribute("showSum", false); ControllerUtils.addVersionAttribute(model, this.financerConfig); ControllerUtils.addCurrencySymbol(model, this.financerConfig); + ControllerUtils.addDarkMode(model, this.financerConfig); return "transaction/searchTransactions"; } @@ -74,6 +75,7 @@ public class TransactionController { model.addAttribute("showActionDelete", false); ControllerUtils.addVersionAttribute(model, this.financerConfig); ControllerUtils.addCurrencySymbol(model, this.financerConfig); + ControllerUtils.addDarkMode(model, this.financerConfig); return "transaction/searchTransactions"; } @@ -113,6 +115,7 @@ public class TransactionController { ControllerUtils.addVersionAttribute(model, this.financerConfig); ControllerUtils.addCurrencySymbol(model, this.financerConfig); + ControllerUtils.addDarkMode(model, this.financerConfig); return "transaction/newTransaction"; } @@ -156,6 +159,7 @@ public class TransactionController { ControllerUtils.addVersionAttribute(model, this.financerConfig); ControllerUtils.addCurrencySymbol(model, this.financerConfig); + ControllerUtils.addDarkMode(model, this.financerConfig); if (!ResponseReason.OK.equals(responseReason)) { model.addAttribute("errorMessage", responseReason.name()); diff --git a/financer-web-client/src/main/java/de/financer/util/ControllerUtils.java b/financer-web-client/src/main/java/de/financer/util/ControllerUtils.java index 9f6f885..99e7fa9 100644 --- a/financer-web-client/src/main/java/de/financer/util/ControllerUtils.java +++ b/financer-web-client/src/main/java/de/financer/util/ControllerUtils.java @@ -99,4 +99,8 @@ public class ControllerUtils { // Add a space right in front of the currency symbol, so it's not glued to the amount model.addAttribute("currencySymbol", " " + financerConfig.getCurrency().getSymbol()); } + + public static void addDarkMode(Model model, FinancerConfig financerConfig) { + model.addAttribute("darkMode", financerConfig.isDarkMode()); + } } diff --git a/financer-web-client/src/main/resources/config/application.properties b/financer-web-client/src/main/resources/config/application.properties index dd7edc7..d6c46f8 100644 --- a/financer-web-client/src/main/resources/config/application.properties +++ b/financer-web-client/src/main/resources/config/application.properties @@ -39,4 +39,8 @@ logging.level.de.pushservice=DEBUG # The first day of a week in a calendar # Possible values: MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY -financer.firstDayOfWeek=MONDAY \ No newline at end of file +financer.firstDayOfWeek=MONDAY + +# Whether dark mode should be enabled by default +# Possible values: true|default +financer.darkMode=true \ No newline at end of file diff --git a/financer-web-client/src/main/resources/i18n/message.properties b/financer-web-client/src/main/resources/i18n/message.properties index f6e89ab..f6b7dde 100644 --- a/financer-web-client/src/main/resources/i18n/message.properties +++ b/financer-web-client/src/main/resources/i18n/message.properties @@ -239,6 +239,11 @@ financer.calendar.previous=Previous month financer.calendar.next=Next month financer.calendar.current=Current month +financer.footer.changelog=Changelog +financer.footer.readme=Readme +financer.footer.testNotification=Test notification +financer.footer.toggleDarkMode=Toggle dark mode + financer.error-message.UNKNOWN_ERROR=An unknown error occurred! financer.error-message.INVALID_ACCOUNT_TYPE=The selected account type is not valid! financer.error-message.FROM_ACCOUNT_NOT_FOUND=The specified from account has not been found! diff --git a/financer-web-client/src/main/resources/i18n/message_de_DE.properties b/financer-web-client/src/main/resources/i18n/message_de_DE.properties index 2d7df6f..186ec9e 100644 --- a/financer-web-client/src/main/resources/i18n/message_de_DE.properties +++ b/financer-web-client/src/main/resources/i18n/message_de_DE.properties @@ -238,6 +238,11 @@ financer.calendar.previous=Letzter Monat financer.calendar.next=N\u00E4chster Monat financer.calendar.current=Aktueller Monat +financer.footer.changelog=\u00C4nderungshistorie +financer.footer.readme=Liesmich +financer.footer.testNotification=Test Benachrichtigung +financer.footer.toggleDarkMode=Dark Mode umschalten + financer.error-message.UNKNOWN_ERROR=Ein unbekannter Fehler ist aufgetreten! financer.error-message.INVALID_ACCOUNT_TYPE=Der ausgew\u00E4hlte Kontotyp ist ung\u00FCltig! financer.error-message.FROM_ACCOUNT_NOT_FOUND=Das ausgew\u00E4hlte Von-Konto wurde nicht gefunden! diff --git a/financer-web-client/src/main/resources/static/changelog.txt b/financer-web-client/src/main/resources/static/changelog.txt index 33c25d0..2f78024 100644 --- a/financer-web-client/src/main/resources/static/changelog.txt +++ b/financer-web-client/src/main/resources/static/changelog.txt @@ -1,5 +1,6 @@ v44 -> v45: - #5 Having no periods breaks the "expenses per period" graph on the account overview page +- #14 Introduce toggleable dark mode v43 -> v44: - #8: Remove hard dependency on push-service - integrate new release of push-service diff --git a/financer-web-client/src/main/resources/static/css/darkModeColors.css b/financer-web-client/src/main/resources/static/css/darkModeColors.css new file mode 100644 index 0000000..3fbf15c --- /dev/null +++ b/financer-web-client/src/main/resources/static/css/darkModeColors.css @@ -0,0 +1,16 @@ +/* Color definitions for dark mode */ +:root { + --error-color: #D30000; + --bank-color: #008FFB; + --cash-color: #FFCB00; + --income-color: #00A900; + --liability-color: #D36000; + --expense-color: #D30000; + --start-color: #AB005D; + --text-color: #7f7f7f; + --background-color: #1d1f21; + --link-color: #87ab63; + --hover-color: #1f1f2f; + --border-color: #7f7f7f; +} +/* --------------------- */ \ No newline at end of file diff --git a/financer-web-client/src/main/resources/static/css/lightModeColors.css b/financer-web-client/src/main/resources/static/css/lightModeColors.css new file mode 100644 index 0000000..af6b61c --- /dev/null +++ b/financer-web-client/src/main/resources/static/css/lightModeColors.css @@ -0,0 +1,16 @@ +/* Color definitions for light mode */ +:root { + --error-color: #D30000; + --bank-color: #008FFB; + --cash-color: #FFCB00; + --income-color: #00A900; + --liability-color: #D36000; + --expense-color: #D30000; + --start-color: #AB005D; + --text-color: #000000; + --background-color: #FFFFFF; + --link-color: #0000EE; + --hover-color: lightgrey; + --border-color: #ddd; +} +/* --------------------- */ \ No newline at end of file diff --git a/financer-web-client/src/main/resources/static/css/main.css b/financer-web-client/src/main/resources/static/css/main.css index 07f676e..1d3265b 100644 --- a/financer-web-client/src/main/resources/static/css/main.css +++ b/financer-web-client/src/main/resources/static/css/main.css @@ -1,16 +1,18 @@ /* Variable declarations */ :root { - --error-color: #D30000/*#ff6666*/; - --bank-color: #008FFB; - --cash-color: #FFCB00; - --income-color: #00A900; - --liability-color: #D36000; - --expense-color: #D30000; - --start-color: #AB005D; --type-row-width: 5px; } /* --------------------- */ +body { + color: var(--text-color); + background-color: var(--background-color); +} + +a { + color: var(--link-color); +} + #account-overview-table, #transaction-table, #recurring-transaction-list-table { @@ -27,7 +29,7 @@ #transaction-table td, #recurring-transaction-list-table th, #recurring-transaction-list-table td { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--border-color); padding: 0.3em; vertical-align: top; } @@ -37,11 +39,11 @@ #recurring-transaction-list-table th { position: sticky; top: 0px; - background-color: white; + background-color: var(--background-color); } tr:hover { - background-color: lightgrey; + background-color: var(--hover-color); } .overspend { diff --git a/financer-web-client/src/main/resources/templates/account/accountDetails.html b/financer-web-client/src/main/resources/templates/account/accountDetails.html index c48f2fb..bbedff2 100644 --- a/financer-web-client/src/main/resources/templates/account/accountDetails.html +++ b/financer-web-client/src/main/resources/templates/account/accountDetails.html @@ -4,6 +4,8 @@ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/account/accountOverview.html b/financer-web-client/src/main/resources/templates/account/accountOverview.html index 6a10108..06ae5f8 100644 --- a/financer-web-client/src/main/resources/templates/account/accountOverview.html +++ b/financer-web-client/src/main/resources/templates/account/accountOverview.html @@ -4,6 +4,8 @@ <title th:text="#{financer.account-overview.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}" /> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> <script th:src="@{/javascript/push-service-client-init.js}"></script> diff --git a/financer-web-client/src/main/resources/templates/account/newAccount.html b/financer-web-client/src/main/resources/templates/account/newAccount.html index fa34b1c..117cce6 100644 --- a/financer-web-client/src/main/resources/templates/account/newAccount.html +++ b/financer-web-client/src/main/resources/templates/account/newAccount.html @@ -4,6 +4,8 @@ <title th:text="#{financer.account-new.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/accountGroup/newAccountGroup.html b/financer-web-client/src/main/resources/templates/accountGroup/newAccountGroup.html index 22bcc1b..7e48ca3 100644 --- a/financer-web-client/src/main/resources/templates/accountGroup/newAccountGroup.html +++ b/financer-web-client/src/main/resources/templates/accountGroup/newAccountGroup.html @@ -4,6 +4,8 @@ <title th:text="#{financer.account-group-new.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/includes/footer.html b/financer-web-client/src/main/resources/templates/includes/footer.html index ab8c391..d62321f 100644 --- a/financer-web-client/src/main/resources/templates/includes/footer.html +++ b/financer-web-client/src/main/resources/templates/includes/footer.html @@ -2,6 +2,9 @@ <hr> <div> <span th:text="'financer v' + ${financerVersion}"/> -  (<a th:href="@{/changelog.txt}">Changelog</a>, <a th:href="@{/readme.txt}">Readme</a>, <a th:href="@{/sendTestNotification}">Test</a>) +  (<a th:href="@{/changelog.txt}" th:text="#{financer.footer.changelog}" />, + <a th:href="@{/readme.txt}" th:text="#{financer.footer.readme}" />, + <a th:href="@{/sendTestNotification}" th:text="#{financer.footer.testNotification}" />, + <a th:href="@{/toggleDarkMode}" th:text="#{financer.footer.toggleDarkMode}" />) </div> </div> \ No newline at end of file diff --git a/financer-web-client/src/main/resources/templates/recurringTransaction/calendar.html b/financer-web-client/src/main/resources/templates/recurringTransaction/calendar.html index 5e8abb0..7fc44c3 100644 --- a/financer-web-client/src/main/resources/templates/recurringTransaction/calendar.html +++ b/financer-web-client/src/main/resources/templates/recurringTransaction/calendar.html @@ -4,6 +4,8 @@ <title th:text="#{financer.recurring-transaction-calendar.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}"/> </head> diff --git a/financer-web-client/src/main/resources/templates/recurringTransaction/newRecurringTransaction.html b/financer-web-client/src/main/resources/templates/recurringTransaction/newRecurringTransaction.html index e4ce874..7ec1507 100644 --- a/financer-web-client/src/main/resources/templates/recurringTransaction/newRecurringTransaction.html +++ b/financer-web-client/src/main/resources/templates/recurringTransaction/newRecurringTransaction.html @@ -4,6 +4,8 @@ <title th:text="#{financer.recurring-transaction-new.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/recurringTransaction/recurringToTransactionWithAmount.html b/financer-web-client/src/main/resources/templates/recurringTransaction/recurringToTransactionWithAmount.html index 3d42c1e..45016c5 100644 --- a/financer-web-client/src/main/resources/templates/recurringTransaction/recurringToTransactionWithAmount.html +++ b/financer-web-client/src/main/resources/templates/recurringTransaction/recurringToTransactionWithAmount.html @@ -4,6 +4,8 @@ <title th:text="#{financer.recurring-to-transaction-with-amount.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/recurringTransaction/recurringTransactionList.html b/financer-web-client/src/main/resources/templates/recurringTransaction/recurringTransactionList.html index 3b0c706..01a3543 100644 --- a/financer-web-client/src/main/resources/templates/recurringTransaction/recurringTransactionList.html +++ b/financer-web-client/src/main/resources/templates/recurringTransaction/recurringTransactionList.html @@ -4,6 +4,8 @@ <title th:text="#{'financer.recurring-transaction-list.title.' + ${subTitle}}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/report/configureAccountExpensesForPeriod.html b/financer-web-client/src/main/resources/templates/report/configureAccountExpensesForPeriod.html index 2a53df1..9991593 100644 --- a/financer-web-client/src/main/resources/templates/report/configureAccountExpensesForPeriod.html +++ b/financer-web-client/src/main/resources/templates/report/configureAccountExpensesForPeriod.html @@ -4,6 +4,8 @@ <title th:text="#{financer.chart-config-account-expenses-for-period.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/report/configureAccountGroupExpensesForPeriod.html b/financer-web-client/src/main/resources/templates/report/configureAccountGroupExpensesForPeriod.html index eeecc8f..72e87de 100644 --- a/financer-web-client/src/main/resources/templates/report/configureAccountGroupExpensesForPeriod.html +++ b/financer-web-client/src/main/resources/templates/report/configureAccountGroupExpensesForPeriod.html @@ -4,6 +4,8 @@ <title th:text="#{financer.chart-config-account-group-expenses-for-period.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/report/selectChart.html b/financer-web-client/src/main/resources/templates/report/selectChart.html index 1a23b36..cdbb09a 100644 --- a/financer-web-client/src/main/resources/templates/report/selectChart.html +++ b/financer-web-client/src/main/resources/templates/report/selectChart.html @@ -4,6 +4,8 @@ <title th:text="#{financer.chart-select.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/transaction/newTransaction.html b/financer-web-client/src/main/resources/templates/transaction/newTransaction.html index 06d359b..2cffa3b 100644 --- a/financer-web-client/src/main/resources/templates/transaction/newTransaction.html +++ b/financer-web-client/src/main/resources/templates/transaction/newTransaction.html @@ -4,6 +4,8 @@ <title th:text="#{financer.transaction-new.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head> diff --git a/financer-web-client/src/main/resources/templates/transaction/searchTransactions.html b/financer-web-client/src/main/resources/templates/transaction/searchTransactions.html index 8448687..60107ef 100644 --- a/financer-web-client/src/main/resources/templates/transaction/searchTransactions.html +++ b/financer-web-client/src/main/resources/templates/transaction/searchTransactions.html @@ -4,6 +4,8 @@ <title th:text="#{financer.search-transactions.title}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" /> + <link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" /> <link rel="stylesheet" th:href="@{/css/main.css}"> <link rel="shortcut icon" th:href="@{/favicon.ico}" /> </head>