arnaucube/blog
1
0
Fork 0
mirror of https://github.com/arnaucube/blog.git synced 2026-02-10 04:36:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add dark theme

Browse Source
This commit is contained in:
arnaucube
2021-08-25 22:40:13 +02:00
parent e043736ee6
commit f6323e7ca4
13 changed files with 584 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
blogo-input/index.html
View File

@@ -40,7 +40,14 @@
style="height:50px;font-size:130%;">
<div class="container">
<a href="/blog" style="color:#000;">Blog index</a>
<a href="/" style="color:#000;float:right;">arnaucube.com</a>
<div style="float:right;">
<a href="/" style="color:#000;display:inline-block;">arnaucube.com</a>
<div class="onoffswitch" style="margin:10px;display:inline-block;" title="change theme">
<input onclick="switchTheme()" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
id="themeSwitcher">
<label class="onoffswitch-label" for="themeSwitcher"></label>
</div>
</div>
</div>
<img style="height:5px; width:100%; margin-top:8px;" src="img/gradient-line.jpg" />
</nav>
@@ -92,6 +99,33 @@
throwOnError : true
});
});
///
let theme = localStorage.getItem("theme");
if ((theme === "light-theme")||(theme==null)) {
theme = "light-theme";
document.getElementById("themeSwitcher").checked = false;
} else if (theme === "dark-theme") {
theme = "dark-theme";
document.getElementById("themeSwitcher").checked = true;
}
document.body.className = theme;
localStorage.setItem("theme", theme);
function switchTheme() {
theme = localStorage.getItem("theme");
if (theme === "light-theme") {
theme = "dark-theme";
document.getElementById("themeSwitcher").checked = true;
} else {
theme = "light-theme";
document.getElementById("themeSwitcher").checked = false;
}
document.body.className = theme;
localStorage.setItem("theme", theme);
console.log(theme);
}
</script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>