Added dark/light mode switch
This commit is contained in:
parent
dc9dd5791c
commit
85e1d6afce
4 changed files with 58 additions and 13 deletions
|
@ -16,6 +16,7 @@
|
||||||
<body>
|
<body>
|
||||||
<script src="./oneko.js"></script>
|
<script src="./oneko.js"></script>
|
||||||
<main>
|
<main>
|
||||||
|
<script src="light-mode.js"></script>
|
||||||
<mytitle>
|
<mytitle>
|
||||||
<i>
|
<i>
|
||||||
<h1>Haii!~ Welcome to my lil place! :3</h1>
|
<h1>Haii!~ Welcome to my lil place! :3</h1>
|
||||||
|
@ -41,10 +42,10 @@
|
||||||
I mostly do programming as a hobby :3 <br>
|
I mostly do programming as a hobby :3 <br>
|
||||||
I go by she/her :3 <br><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://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://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.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.twitch.tv/sugaryy_" target="_blank">Twitch</a></b>
|
||||||
|
|
||||||
<i>
|
<i>
|
||||||
<h2>Projects</h2>
|
<h2>Projects</h2>
|
||||||
|
@ -56,7 +57,7 @@
|
||||||
<h2>Links</h2>
|
<h2>Links</h2>
|
||||||
</i>
|
</i>
|
||||||
<ul>
|
<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>
|
</ul>
|
||||||
|
|
||||||
<i>
|
<i>
|
||||||
|
@ -74,11 +75,16 @@
|
||||||
</ul>
|
</ul>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
<div class="lightmodebutton">
|
||||||
|
<img src="lightmode.png" width="50" height="50" onclick="themeToggle()" />
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<badges>
|
<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.gentoo.org" target="_blank"><img
|
||||||
<a class="no_hover" href="https://www.archlinux.org" target="_blank"><img src="https://sugary.kemonomimi.gay/badges/archlinux.png"></a>
|
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>
|
<br><br>
|
||||||
</badges>
|
</badges>
|
||||||
|
|
||||||
|
|
5
src/light-mode.js
Normal file
5
src/light-mode.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
function themeToggle() {
|
||||||
|
var element = document.body;
|
||||||
|
element.classList.toggle("light-mode");
|
||||||
|
|
||||||
|
}
|
BIN
src/lightmode.png
Normal file
BIN
src/lightmode.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.3 KiB |
|
@ -12,8 +12,45 @@ body {
|
||||||
font-family: 'IBM Plex Mono', monospace;
|
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 {
|
a {
|
||||||
color: #18272F;
|
color: #18272F;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -54,9 +91,6 @@ a:visited {
|
||||||
color: #89b4fa
|
color: #89b4fa
|
||||||
}
|
}
|
||||||
|
|
||||||
badges {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in a new issue