zoe/hugo-battheme
1
0
Fork 0
mirror of https://git.kittycat.homes/zoe/hugo-battheme.git synced 2024-08-15 03:25:18 +00:00
Code Issues Projects Releases Wiki Activity

color switching is working i am so happy

Browse source
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-bg:#515262;
$light-fg: #73464c; $light-bg-alt: #caa05a;
$light-fg: #c9cca1;
$light-ln: #ab5675; $light-ln: #ab5675;
$light-active: #72dcbb; $light-active: #72dcbb;
$dark-bg: black; $dark-bg: #292831;
$dark-fg: white; $dark-bg-alt: #333f58;
$dark-ln: blue; $dark-fg: #fbbbad;
$dark-active: green; $dark-ln: #ee8695;
$dark-active: #4a7a96;
body { body {
&.light{ &.light {
background-color: $light-bg; background-color: $light-bg;
color: $light-fg; color: $light-fg;
} }
background-color: $dark-bg; background-color: $dark-bg;
color: $dark-bg; color: $dark-fg;
} }
a { 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> <!DOCTYPE html>
<html> <html>
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body class="colorswitch">
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
<div id="content"> <div id="content">
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}

2
layouts/partials/footer.html
View file

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

39
static/js/darkmode.js
View file

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