zoe
/
hugo-battheme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

color switching is working i am so happy

This commit is contained in:
zoe 2022-04-09 23:45:40 +02:00
parent 873317081b
commit ff99214248
4 changed files with 67 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
assets/scss/colors.scss
View File

@ -1,26 +1,54 @@
$light-bg: #ffe7d6;
$light-fg: #73464c;
$light-bg:#515262;
$light-bg-alt: #caa05a;
$light-fg: #c9cca1;
$light-ln: #ab5675;
$light-active: #72dcbb;
$light-active: #72dcbb;
$dark-bg: black;
$dark-fg: white;
$dark-ln: blue;
$dark-active: green;
$dark-bg: #292831;
$dark-bg-alt: #333f58;
$dark-fg: #fbbbad;
$dark-ln: #ee8695;
$dark-active: #4a7a96;
body {
&.light{
background-color: $light-bg;
color: $light-fg;
}
background-color: $dark-bg;
color: $dark-bg;
}
&.light {
background-color: $light-bg;
color: $light-fg;
}
background-color: $dark-bg;
color: $dark-fg;
}
a {
&.light {
background-color: $light-ln;
color: $light-bg;
}
background-color: $dark-ln;
color: $dark-bg;
}
a.footer-nav-item.active{
a.footer-nav-item.active {
&.light {
color: $light-active;
}
color: $dark-active;
}
footer, footer a{
footer {
&.light {
background-color: $light-bg-alt;
color: $light-bg;
}
background-color: $dark-bg-alt;
color: $dark-bg;
}
footer a {
&.light{
color: $light-bg;
background-color: $light-bg-alt;
}
color: $dark-bg;
background-color: $dark-bg-alt;
}

2
layouts/_default/baseof.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
<body class="colorswitch">
{{- partial "header.html" . -}}
<div id="content">
{{- block "main" . }}{{- end }}

2
layouts/partials/footer.html
View File

@ -1,4 +1,4 @@
<footer>
<footer class="colorswitch">
<div id="footer-center">
<nav id="footer-nav">
{{ $currentPage := . }}

39
static/js/darkmode.js
View File

@ -1,29 +1,32 @@
const checkbox = document.getElementById('darkmode-toggle');
const body = document.querySelector("body");
const checkbox = document.getElementById("darkmode-toggle");
const colorswitchers = document.getElementsByClassName("colorswitch");
if (localStorage.getItem('dark')) {
switchToDark()
if (localStorage.getItem("dark")) {
switchToDark();
} else {
switchToLight()
switchToLight();
}
checkbox.checked = localStorage.getItem('dark')
checkbox.checked = localStorage.getItem("dark");
checkbox.addEventListener("click", function () {
localStorage.setItem("dark", this.checked)
if (this.checked) {
switchToDark()
} else {
switchToLight()
}
})
localStorage.setItem("dark", this.checked);
if (this.checked) {
switchToDark();
} else {
localStorage.removeItem("dark");
switchToLight();
}
});
function switchToLight() {
// for some reason this needs to be set to null
// i am losing my mind
localStorage.removeItem("dark")
body.classList.add('light')
for (let item of colorswitchers) {
item.classList.add("light");
}
}
function switchToDark() {
body.classList.remove('light')
for (let item of colorswitchers) {
console.log(item);
item.classList.remove("light");
}
}