diff --git a/src/index.html b/src/index.html
index 15b11f3..100d0ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,6 +16,7 @@
+
Haii!~ Welcome to my lil place! :3
@@ -40,12 +41,12 @@
I'm a transfem catgirl from Poland!
I mostly do programming as a hobby :3
I go by she/her :3
-
- Github
- Gitea
- Youtube
- Twitch
-
+
+ Github
+ Gitea
+ Youtube
+ Twitch
+
Projects
@@ -56,7 +57,7 @@
Links
@@ -74,11 +75,16 @@
+
-
-
+
+
diff --git a/src/light-mode.js b/src/light-mode.js
new file mode 100644
index 0000000..3b6cf24
--- /dev/null
+++ b/src/light-mode.js
@@ -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");
+}
diff --git a/src/lightmode.png b/src/lightmode.png
new file mode 100644
index 0000000..ad3ae3b
Binary files /dev/null and b/src/lightmode.png differ
diff --git a/src/style.css b/src/style.css
index 901f3de..38e736c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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;