added dark mode

2023-09-11 22:23:45 +02:00
parent 485bc5e8c3
commit 3b8e0e4074
9 changed files with 94 additions and 33 deletions
--- a/src/main/resources/templates/contact/list.html
+++ b/src/main/resources/templates/contact/list.html
@@ -20,7 +20,7 @@
 				<div class="accordion-body">
 					<div class="row row-cols-12 ro-cols-lg-4 ro-cols-md-3 ro-cols-sd-2 g-4" style="margin: 8px">
 						<div class="col" th:each="contact : ${contactList}">
-							<div class="card text-dark bg-light shadow" style="width: 18rem">
+							<div class="card shadow" style="width: 18rem">
 								<div class="card-header text-center">
 									<font th:text="${contact.forename} + ' ' + ${contact.surname}" style="font-size: larger"></font>
 								</div>
@@ -38,7 +38,7 @@
 				</div>
 			</div>
 			<div id="div_list" class="tab-pane fade tab-pane-table">
-				<div class="accordion-body" style="background-color: white">
+				<div class="accordion-body">
 					<table id="table" class="table table-striped table-condensed">
 						<thead>
 							<tr>
--- a/src/main/resources/templates/done/list.html
+++ b/src/main/resources/templates/done/list.html
@@ -39,7 +39,7 @@
 			<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_billing">Abrechnung</a></li>
 		</ul>
 		<div class="tabdivblurred tab-content">
-			<div id="div_list" class="tab-pane active tab-pane-table" style="background-color: white">
+			<div id="div_list" class="tab-pane active tab-pane-table">
 				<table class="table table-striped table-condensed">
 					<thead>
 						<tr>
--- a/src/main/resources/templates/layout/main.html
+++ b/src/main/resources/templates/layout/main.html
@@ -1,22 +1,22 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" data-bs-theme="dark">
 <head>
 <meta charset="UTF-8" />

 <title>Timetrack</title>

-<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/5.2.3/css/bootstrap.min.css}" />
-<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.13.2/css/dataTables.bootstrap5.min.css}" />
-<link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/5.15.4/css/all.min.css}" />
+<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/5.3.1/css/bootstrap.min.css}" />
+<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.13.5/css/dataTables.bootstrap5.min.css}" />
+<link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/6.4.2/css/all.min.css}" />
 <link rel="stylesheet" type="text/css" th:href="@{/webjars/fullcalendar/5.11.3/main.css}" />
 <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
 <link rel="icon" type="image/png" sizes="32x32" th:href="@{/png/favicon/favicon-32x32.png}" />
 <link rel="icon" type="image/png" sizes="16x16" th:href="@{/png/favicon/favicon-16x16.png}" />

-<script th:src="@{/webjars/jquery/3.6.4/jquery.min.js}"></script>
-<script th:src="@{/webjars/bootstrap/5.2.3/js/bootstrap.bundle.min.js}"></script>
-<script th:src="@{/webjars/datatables/1.13.2/js/jquery.dataTables.min.js}"></script>
-<script th:src="@{/webjars/datatables/1.13.2/js/dataTables.bootstrap5.min.js}"></script>
+<script th:src="@{/webjars/jquery/3.7.1/jquery.min.js}"></script>
+<script th:src="@{/webjars/bootstrap/5.3.1/js/bootstrap.bundle.min.js}"></script>
+<script th:src="@{/webjars/datatables/1.13.5/js/jquery.dataTables.min.js}"></script>
+<script th:src="@{/webjars/datatables/1.13.5/js/dataTables.bootstrap5.min.js}"></script>
 <script th:src="@{/webjars/fullcalendar/5.11.3/main.js}"></script>
 <script th:src="@{/js/helper.js}"></script>
 <script th:src="@{/js/clock.js}"></script>
@@ -24,7 +24,7 @@

 </head>
 <body>
-	<nav class="navbar navbar-expand-lg navbar-light bg-light static-top">
+	<nav class="navbar navbar-expand-lg static-top">
 		<div class="container-fluid" style="width: 98%">
 			<i class="fa fa-calendar-alt"></i> <a class="navbar-brand" style="margin-left: 8px; z-index: 1" th:href="@{/}">Timetrack</a><br />
 			<div class="version" th:text="${@manifestBean.getVersion()}"></div>
@@ -47,12 +47,29 @@
 					<li class="nav-item"><a class="nav-link titlemod"><font layout:fragment="title"></font></a></li>
 					<li layout:fragment="menuitem" style="list-style-type: none"></li>
 					<li layout:fragment="menu" style="list-style-type: none"></li>
-					<li class="nav-item ms-auto"><div id="clock" class="clock"></div></li>
+					<li class="nav-item ms-auto"><div id="clock" class="clock" onclick="toggleTheme();resetClock()"></div></li>
 				</ul>
 			</div>
 		</div>
 		<script type="text/javascript">
-		  new Clock(38, "#clock", "#000", "rgba(255, 255, 255, 0.0)");
+			resetClock = function() {
+				$("#clock").empty();
+				var theme = $("html").attr("data-bs-theme");
+				var arrowcolor;
+				var scalecolor;
+				var backgroundcolor;
+				if (theme == "dark") {
+					arrowcolor = "#fff";
+					scalecolor = "#aaa";
+					backgroundcolor = "rgba(0, 0, 0, 0.3)"
+				} else {
+					arrowcolor = "#099";
+					scalecolor = "#000";
+					backgroundcolor = "rgba(0, 0, 0, 0)";
+				}
+		  	new Clock(38, "#clock", arrowcolor, scalecolor, backgroundcolor);
+		  }
+		  resetClock();
 		</script>
 	</nav>
 	<main layout:fragment="content" class="page body"></main>
--- a/src/main/resources/templates/note/list.html
+++ b/src/main/resources/templates/note/list.html
@@ -19,7 +19,7 @@
 			<div id="div_dashboard" class="tab-pane active">
 				<div class="row row-cols-12 ro-cols-lg-3 ro-cols-md-2 ro-cols-sd-1 g-4" style="margin: 8px">
 					<div class="col" th:each="note : ${noteList}">
-						<div class="card text-dark bg-light shadow" style="width: 100%">
+						<div class="card shadow" style="width: 100%">
 							<div class="card-header text-center">
 								<font th:text="${note.category}" style="font-size: larger">:</font> <font th:text="${note.title}"
 									style="font-size: larger; font-weight: bolder"></font>
@@ -40,7 +40,7 @@
 				</div>
 			</div>
 			<div id="div_list" class="tab-pane fade tab-pane-table">
-				<div class="accordion-body" style="background-color: white">
+				<div class="accordion-body">
 					<table id="table" class="table table-striped table-condensed">
 						<thead>
 							<tr>
--- a/src/main/resources/templates/public/index.html
+++ b/src/main/resources/templates/public/index.html
@@ -10,7 +10,7 @@
 	<ul layout:fragment="menu">
 	</ul>
 	<main layout:fragment="content">
-		<div class="card text-dark bg-light" style="width: 312px; margin: 24px">
+		<div class="card" style="width: 312px; margin: 24px">
 			<div class="card-header"><a class="btn btn-seondary btn-bordered btn-secondaryhover" style="width: 100%"
 					th:href="@{/done/list}">heutige Arbeitszeiten</a></div>
 			<div class="card-body">