Lurkars/abi2007
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add darkmode to imprint

Browse Source
This commit is contained in:
Lurkars
2025-09-20 19:51:25 +02:00
parent 13b4383977
commit 82635a94e3
2 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pom.xml
+1 -1
View File
@@ -4,7 +4,7 @@
<modelVersion>4.0.0</modelVersion> <modelVersion>4.0.0</modelVersion>
<groupId>de.champonthis</groupId> <groupId>de.champonthis</groupId>
<artifactId>abi</artifactId> <artifactId>abi</artifactId>
<version>0.2.1</version> <version>0.2.2</version>
<name>abi</name> <name>abi</name>
<parent> <parent>
src/main/resources/templates/imprint.html
+27 -1
View File
@@ -5,11 +5,12 @@
<title>20 Jahre Abitur 2007</title> <title>20 Jahre Abitur 2007</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<script defer src="/lib/alpinejs.min.js"></script>
<link rel="stylesheet" href="/lib/bootstrap.min.css"> <link rel="stylesheet" href="/lib/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
</head> </head>
<body> <body x-data="imprintApp()" :data-bs-theme="darkMode ? 'dark' : 'light'">
<div class="container mt-5"> <div class="container mt-5">
<div class="card shadow"> <div class="card shadow">
<div class="card-body"> <div class="card-body">
@@ -91,6 +92,31 @@
</div> </div>
</div> </div>
</div> </div>
<script>
function imprintApp() {
return {
darkMode: false,
init() {
// Check for saved preference or default to system preference
const savedTheme = localStorage.getItem('darkMode');
if (savedTheme !== null) {
this.darkMode = savedTheme === 'true';
} else {
this.darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
}
// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (localStorage.getItem('darkMode') === null) {
this.darkMode = e.matches;
}
});
}
}
}
</script>
</body> </body>
</html> </html>