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

Added dark/light mode switch

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

10
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>
@ -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>

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

@ -0,0 +1,5 @@
function themeToggle() {
var element = document.body;
element.classList.toggle("light-mode");
}

BIN
src/lightmode.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

40
src/style.css
View file

@ -12,6 +12,43 @@ 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;
position: relative;
@ -54,9 +91,6 @@ a:visited {
color: #89b4fa
}
badges {
text-align: left;
}
footer {
text-align: center;