work/timetrack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added dark mode

Browse Source
This commit is contained in:
Jörg Henke
2023-09-11 22:23:45 +02:00
parent 485bc5e8c3
commit 3b8e0e4074
9 changed files with 94 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/main/resources/templates/layout/main.html
View File

@ -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>