Sugary/sugary.kemonomimi.gay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

site: Added light/dark mode switch

Browse source
This commit is contained in:
Sugaryy_ 2023-05-31 12:16:22 +02:00
parent dc9dd5791c
commit 36294fd507
4 changed files with 75 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/index.html
View file

@ -16,6 +16,7 @@
<body>
<script src="./oneko.js"></script>
<main>
<script src="light-mode.js"></script>
<mytitle>
<i>
<h1>Haii!~ Welcome to my lil place! :3</h1>
@ -40,12 +41,12 @@
I'm a transfem catgirl from Poland! <br>
I mostly do programming as a hobby :3 <br>
I go by she/her :3 <br><br>
<b><a href="https://www.github.com/Sugaryyyy/" target="_blank">Github</a></b>
<b><a href="https://git.kemonomimi.gay/Sugary" target="_blank">Gitea</a></b>
<b><a href="https://www.youtube.com/@Sugaryy_" target="_blank">Youtube</a></b>
<b><a href="https://www.twitch.tv/sugaryy_" target="_blank">Twitch</a></b>
<b><a href="https://www.github.com/Sugaryyyy/" target="_blank">Github</a></b>
<b><a href="https://git.kemonomimi.gay/Sugary" target="_blank">Gitea</a></b>
<b><a href="https://www.youtube.com/@Sugaryy_" target="_blank">Youtube</a></b>
<b><a href="https://www.twitch.tv/sugaryy_" target="_blank">Twitch</a></b>
<i>
<h2>Projects</h2>
</i>
@ -56,7 +57,7 @@
<h2>Links</h2>
</i>
<ul>
<li><b><a href="https://kemonomimi.gay">Main website</a></b></li>
<li><b><a href="https://kemonomimi.gay">Main website</a></b></li>
</ul>
<i>
@ -74,11 +75,16 @@
</ul>
<br>
<br>
<div class="lightmodebutton">
<img src="lightmode.png" width="50" height="50" onclick="themeToggle()" />
</div>
</main>
<badges>
<a class="no_hover" href="https://www.gentoo.org" target="_blank"><img src="https://sugary.kemonomimi.gay/badges/gentoo.png"></a>
<a class="no_hover" href="https://www.archlinux.org" target="_blank"><img src="https://sugary.kemonomimi.gay/badges/archlinux.png"></a>
<a class="no_hover" href="https://www.gentoo.org" target="_blank"><img
src="https://sugary.kemonomimi.gay/badges/gentoo.png"></a>
<a class="no_hover" href="https://www.archlinux.org" target="_blank"><img
src="https://sugary.kemonomimi.gay/badges/archlinux.png"></a>
<br><br>
</badges>

22
src/light-mode.js Normal file
View file

@ -0,0 +1,22 @@
// On page load set the theme.
(function () {
let onpageLoad = localStorage.getItem("theme") || "";
let element = document.body;
element.classList.add(onpageLoad);
document.getElementById("theme").textContent =
localStorage.getItem("theme") || "light";
})();
function themeToggle() {
let element = document.body;
element.classList.toggle("light-mode");
let theme = localStorage.getItem("theme");
if (theme && theme === "dark-mode") {
localStorage.setItem("theme", "light-mode");
} else {
localStorage.setItem("theme", "dark-mode");
}
document.getElementById("theme").textContent = localStorage.getItem("theme");
}

BIN
src/lightmode.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

42
src/style.css
View file

@ -12,8 +12,45 @@ body {
font-family: 'IBM Plex Mono', monospace;
}
.lightmodebutton {
position: fixed;
bottom: 15px;
right: 15px;
}
.light-mode {
background-color: #eff1f5;
color: #4c4f69;
border: 1.5em solid #dce0e8;
}
.light-mode h1 {
color: #ea76cb;
}
.light-mode h2 {
color: #ea76cb;
}
.light-mode a:link {
color: #1e66f5;
}
.light-mode a:visited {
color: #1e66f5;
}
.light-mode footer {
color: #ea76cb;
}
.light-mode pre {
color: #ea76cb;
}
a {
color: #18272F;
color: #18272F;
position: relative;
text-decoration: none;
}
@ -54,9 +91,6 @@ a:visited {
color: #89b4fa
}
badges {
text-align: left;
}
footer {
text-align: center;