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

fix lightmode button being weird

Browse source
This commit is contained in:
zoe 2022-04-13 16:00:22 +02:00
parent 76b758dcad
commit 2e52a4843f
4 changed files with 42 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
assets/scss/colors.scss
View file

@ -28,11 +28,11 @@ body {
a { a {
&.light { &.light {
background-color: $light-ln; background-color: transparent;
color: $light-bg; color: $light-ln;
} }
background-color: $dark-ln; background-color: transparent;
color: $dark-bg; color: $dark-ln;
transition: $transition-time; transition: $transition-time;
} }
@ -129,12 +129,17 @@ article.light h3 {
color: $light-bg; color: $light-bg;
transition: $transition-time; transition: $transition-time;
} }
article h5,
article h6,
article h4 { article h4 {
background-color: $dark-accent3; background-color: $dark-accent3;
color: $dark-bg; color: $dark-bg;
transition: $transition-time; transition: $transition-time;
} }
article.light h5,
article.light h6,
article.light h4 { article.light h4 {
background-color: $light-accent3; background-color: $light-accent3;
color: $light-bg; color: $light-bg;
@ -147,16 +152,7 @@ article.light h2 {
transition: $transition-time; transition: $transition-time;
} }
article h5,
article h6,
article a {
background-color: $dark-ln;
color: $dark-bg;
transition: $transition-time;
}
article.light h5,
article.light h6,
article.light a { article.light a {
background-color: $light-ln; background-color: $light-ln;
color: $light-bg; color: $light-bg;
@ -165,11 +161,11 @@ article.light a {
a:hover { a:hover {
&.light { &.light {
color: $light-ln; color: $light-bg;
background-color: transparent; background-color: $light-ln;
} }
color: $dark-ln; color: $dark-bg;
background-color: transparent; background-color: $dark-ln;
} }
article.light a:hover { article.light a:hover {

5
assets/scss/layout.scss
View file

@ -30,6 +30,11 @@ footer {
margin-left: 24%; margin-left: 24%;
} }
#content ol ol,
#content ul ul{
margin-left: 0.12em;
}
#footer-left { #footer-left {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;

5
assets/scss/style.scss
View file

@ -6,12 +6,13 @@ $toggle-height: 24pt;
border-width: 2pt; border-width: 2pt;
} }
input[type="checkbox"]{ input[type="checkbox"]{
cursor: pointer; cursor: pointer;
} }
.toggleinput{ .toggleinput{
opacity: 0; opacity: 10;
max-height: 0; max-height: 10;
overflow: hidden; overflow: hidden;
} }

38
static/js/darkmode.js
View file

@ -1,23 +1,6 @@
const checkbox = document.getElementById("darkmode-toggle"); const checkbox = document.getElementById("darkmode-toggle");
const colorswitchers = document.getElementsByClassName("colorswitch"); const colorswitchers = document.getElementsByClassName("colorswitch");
if (localStorage.getItem("light")) {
switchToLight();
} else {
switchToDark();
}
checkbox.checked = localStorage.getItem("dark");
checkbox.addEventListener("change", function () {
localStorage.setItem("light", this.checked);
if (this.checked) {
switchToLight();
} else {
localStorage.removeItem("light");
switchToDark();
}
});
function switchToLight() { function switchToLight() {
for (let item of colorswitchers) { for (let item of colorswitchers) {
item.classList.add("light"); item.classList.add("light");
@ -30,3 +13,24 @@ function switchToDark() {
item.classList.remove("light"); item.classList.remove("light");
} }
} }
document.addEventListener("DOMContentLoaded", () => {
if (localStorage.getItem("light")) {
switchToLight();
} else {
switchToDark();
}
checkbox.checked = localStorage.getItem("dark");
checkbox.addEventListener("change", function () {
localStorage.setItem("light", this.checked);
if (this.checked) {
switchToLight();
} else {
localStorage.removeItem("light");
switchToDark();
}
});
if (localStorage.getItem("light")) {
checkbox.checked = true;
}
});