persistent dark mode setting
This commit is contained in:
parent
5daab0faba
commit
07a7ab6f8c
|
@ -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");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue