#14 Introduce dark mode

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

financer-web-client/src/main/java/de/financer/chart/impl/inline/ExpensesAllPeriodsGenerator.java

@@ -27,6 +27,7 @@ public class ExpensesAllPeriodsGenerator extends AbstractChartGenerator<EmptyPar
         chart.getCategoryPlot().setOutlineVisible(false);
 
         chart.getCategoryPlot().setBackgroundPaint(ChartDefinitions.TRANSPARENT);
+        chart.setBackgroundPaint(ChartDefinitions.TRANSPARENT);
 
         chart.getCategoryPlot().getRenderer().setSeriesPaint(0, ChartDefinitions.BLUE);
         chart.getCategoryPlot().getRenderer().setSeriesStroke(0, new BasicStroke(2f));

financer-web-client/src/main/java/de/financer/config/FinancerConfig.java

@@ -21,6 +21,7 @@ public class FinancerConfig {
     private String currencyCode;
     private Currency currency;
     private DayOfWeek firstDayOfWeek;
+    private boolean darkMode;
 
     public String getServerUrl() {
         return serverUrl;
@@ -63,4 +64,12 @@ public class FinancerConfig {
     public void setFirstDayOfWeek(String firstDayOfWeek) {
         this.firstDayOfWeek = DayOfWeek.valueOf(firstDayOfWeek);
     }
+
+    public boolean isDarkMode() {
+        return darkMode;
+    }
+
+    public void setDarkMode(boolean darkMode) {
+        this.darkMode = darkMode;
+    }
 }

financer-web-client/src/main/java/de/financer/controller/AccountController.java

@@ -57,6 +57,7 @@ public class AccountController {
         model.addAttribute("showClosed", showClosedBoolean);
         ControllerUtils.addVersionAttribute(model, this.financerConfig);
         ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+        ControllerUtils.addDarkMode(model, this.financerConfig);
 
         return "account/accountOverview";
     }
@@ -75,6 +76,7 @@ public class AccountController {
         model.addAttribute("form", new NewAccountForm());
         ControllerUtils.addVersionAttribute(model, this.financerConfig);
         ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+        ControllerUtils.addDarkMode(model, this.financerConfig);
 
         return "account/newAccount";
     }
@@ -100,6 +102,7 @@ public class AccountController {
             model.addAttribute("errorMessage", responseReason.name());
             ControllerUtils.addVersionAttribute(model, this.financerConfig);
             ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+            ControllerUtils.addDarkMode(model, this.financerConfig);
 
             return "account/newAccount";
         }
@@ -144,6 +147,7 @@ public class AccountController {
 
         ControllerUtils.addVersionAttribute(model, this.financerConfig);
         ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+        ControllerUtils.addDarkMode(model, this.financerConfig);
 
         return "account/accountDetails";
     }
@@ -164,6 +168,7 @@ public class AccountController {
             model.addAttribute("errorMessage", responseReason.name());
             ControllerUtils.addVersionAttribute(model, this.financerConfig);
             ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+            ControllerUtils.addDarkMode(model, this.financerConfig);
 
             return "account/accountDetails";
         }
@@ -187,6 +192,7 @@ public class AccountController {
             model.addAttribute("errorMessage", responseReason.name());
             ControllerUtils.addVersionAttribute(model, this.financerConfig);
             ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+            ControllerUtils.addDarkMode(model, this.financerConfig);
 
             return "account/accountDetails";
         }
@@ -194,6 +200,13 @@ public class AccountController {
         return "redirect:/accountOverview";
     }
 
+    @GetMapping("/toggleDarkMode")
+    public String toggleDarkMode(Model model) {
+        this.financerConfig.setDarkMode(!this.financerConfig.isDarkMode());
+
+        return "redirect:/accountOverview";
+    }
+
     // ---------------------------------------------
 
     @Autowired(required = false)

financer-web-client/src/main/java/de/financer/controller/AccountGroupController.java

@@ -22,6 +22,7 @@ public class AccountGroupController {
     public String newAccountGroup(Model model) {
         model.addAttribute("form", new NewAccountGroupForm());
         ControllerUtils.addVersionAttribute(model, this.financerConfig);
+        ControllerUtils.addDarkMode(model, this.financerConfig);
 
         return "accountGroup/newAccountGroup";
     }
@@ -40,6 +41,7 @@ public class AccountGroupController {
             model.addAttribute("errorMessage", responseReason.name());
             ControllerUtils.addVersionAttribute(model, this.financerConfig);
             ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+            ControllerUtils.addDarkMode(model, this.financerConfig);
 
             return "accountGroup/newAccountGroup";
         }

financer-web-client/src/main/java/de/financer/controller/CalendarController.java

@@ -140,6 +140,7 @@ public class CalendarController {
 
         ControllerUtils.addVersionAttribute(model, this.financerConfig);
         ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+        ControllerUtils.addDarkMode(model, this.financerConfig);
 
         return "recurringTransaction/calendar";
     }

financer-web-client/src/main/java/de/financer/controller/RecurringTransactionController.java

@@ -56,6 +56,7 @@ public class RecurringTransactionController {
         model.addAttribute("form", form);
         ControllerUtils.addVersionAttribute(model, this.financerConfig);
         ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+        ControllerUtils.addDarkMode(model, this.financerConfig);
 
         return "recurringTransaction/newRecurringTransaction";
     }
@@ -98,6 +99,7 @@ public class RecurringTransactionController {
             model.addAttribute("errorMessage", responseReason.name());
             ControllerUtils.addVersionAttribute(model, this.financerConfig);
             ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+            ControllerUtils.addDarkMode(model, this.financerConfig);
 
             return "recurringTransaction/newRecurringTransaction";
         }
@@ -114,6 +116,7 @@ public class RecurringTransactionController {
         model.addAttribute("subTitle", "dueToday");
         ControllerUtils.addVersionAttribute(model, this.financerConfig);
         ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+        ControllerUtils.addDarkMode(model, this.financerConfig);
 
         return "recurringTransaction/recurringTransactionList";
     }
@@ -127,6 +130,7 @@ public class RecurringTransactionController {
         model.addAttribute("subTitle", "active");
         ControllerUtils.addVersionAttribute(model, this.financerConfig);
         ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+        ControllerUtils.addDarkMode(model, this.financerConfig);
 
         return "recurringTransaction/recurringTransactionList";
     }
@@ -140,6 +144,7 @@ public class RecurringTransactionController {
         model.addAttribute("subTitle", "all");
         ControllerUtils.addVersionAttribute(model, this.financerConfig);
         ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+        ControllerUtils.addDarkMode(model, this.financerConfig);
 
         return "recurringTransaction/recurringTransactionList";
     }
@@ -159,6 +164,7 @@ public class RecurringTransactionController {
         model.addAttribute("subTitle", "all");
         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());
@@ -183,6 +189,7 @@ public class RecurringTransactionController {
             model.addAttribute("subTitle", sub);
             ControllerUtils.addVersionAttribute(model, this.financerConfig);
             ControllerUtils.addCurrencySymbol(model, this.financerConfig);
+            ControllerUtils.addDarkMode(model, this.financerConfig);
 
             Iterable<RecurringTransaction> 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<RecurringTransaction> recurringTransactions;
 

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:

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

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());
+    }
 }

financer-web-client/src/main/resources/config/application.properties

@@ -40,3 +40,7 @@ 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
+
+# Whether dark mode should be enabled by default
+# Possible values: true|default
+financer.darkMode=true

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!

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!

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

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;
+}
+/* --------------------- */

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;
+}
+/* --------------------- */

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 {

financer-web-client/src/main/resources/templates/account/accountDetails.html

@@ -4,6 +4,8 @@
     <title th:text="#{financer.account-details.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>

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>

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>

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>

financer-web-client/src/main/resources/templates/includes/footer.html

@@ -2,6 +2,9 @@
     <hr>
     <div>
         <span th:text="'financer v' + ${financerVersion}"/>
-        &nbsp;(<a th:href="@{/changelog.txt}">Changelog</a>,&nbsp;<a th:href="@{/readme.txt}">Readme</a>, <a th:href="@{/sendTestNotification}">Test</a>)
+        &nbsp;(<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>

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>

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>

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>

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>

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>

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>

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>

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>

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>