PlexSheep
/
gawa
1
0
Fork 0
Code Issues 27 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

persistent dark mode setting

This commit is contained in:
Christoph J. Scherr 2023-05-30 23:57:22 +02:00
parent 5daab0faba
commit 07a7ab6f8c
Signed by: PlexSheep
GPG Key ID: 25B4ACF7D88186CC
1 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
gawa/start/templates/start/base.html
View File

@ -8,6 +8,13 @@
<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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script>
const setTheme = theme => {
document.documentElement.setAttribute('data-bs-theme', theme)
}
setTheme(localStorage.getItem('theme'));
</script>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@ -149,27 +156,18 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script> <script>
'use strict' 'use strict'
const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const setTheme = theme => {
document.documentElement.setAttribute('data-bs-theme', theme)
}
document.getElementById("toggleThemeButton").onclick = function () { document.getElementById("toggleThemeButton").onclick = function () {
const storedTheme = localStorage.getItem('theme') const storedTheme = localStorage.getItem('theme');
if (storedTheme == null) { if (storedTheme == null) {
setStoredTheme("dark"); localStorage.setItem("theme", "dark");
setTheme("dark"); setTheme("dark");
} }
else if (storedTheme == "dark") { else if (storedTheme == "dark") {
setStoredTheme("light"); localStorage.setItem("theme", "light");
setTheme("light"); setTheme("light");
} }
else if (storedTheme == "light") { else if (storedTheme == "light") {
setStoredTheme("dark"); localStorage.setItem("theme", "dark");
setTheme("dark"); setTheme("dark");
} }
}; };