From 4f6cdf31d406c630418fb628d5945d6945cd4353 Mon Sep 17 00:00:00 2001
From: deadvey <deadvey@deadvey.com>
Date: Tue, 8 Oct 2024 23:12:34 +0100
Subject: [PATCH] dark/light mode toggle
---
README.md | 1 +
README.md~ | 0
assets/moon.png | Bin 0 -> 6494 bytes
assets/sun.png | Bin 0 -> 1656 bytes
components/header.html | 23 +++++++++++++++--------
index.html | 3 ++-
style.css | 20 ++++++++++++++++++++
7 files changed, 38 insertions(+), 9 deletions(-)
create mode 100644 README.md
create mode 100644 README.md~
create mode 100644 assets/moon.png
create mode 100644 assets/sun.png
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c5ce284
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+Javalsai's website https://javalsai.dynv6.net/
\ No newline at end of file
diff --git a/README.md~ b/README.md~
new file mode 100644
index 0000000..e69de29
diff --git a/assets/moon.png b/assets/moon.png
new file mode 100644
index 0000000000000000000000000000000000000000..16c1040e6b8a5fe4c591302ac0f47b54dbcad763
GIT binary patch
literal 6494
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
literal 0
HcmV?d00001
diff --git a/assets/sun.png b/assets/sun.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d864cdfef2329abeee891cb3fb4b0f13cf7f059
GIT binary patch
literal 1656
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
CYX|87
literal 0
HcmV?d00001
diff --git a/components/header.html b/components/header.html
index bea4378..c0a14af 100644
--- a/components/header.html
+++ b/components/header.html
@@ -1,10 +1,17 @@
<header>
- <nav>
- <ul class="row-ul">
- <li><a href="/">home</a></li>
- <li><a href="https://git.javalsai.dynv6.net/">gitea</a></li>
- <li><a href="/tools">tools</a></li>
- <li><a href="/notes">notes</a></li>
- </ul>
- </nav>
+ <nav>
+ <ul class="row-ul">
+ <li><a href="/">home</a></li>
+ <li><a href="https://git.javalsai.dynv6.net/">gitea</a></li>
+ <li><a href="/tools">tools</a></li>
+ <li><a href="/notes">notes</a></li>
+ <button class="theme-toggle-button" onclick="light_mode()"><img class="theme-toggle-image" height="12px" margin="0px" /></button>
+ </ul>
+ </nav>
+ <script>
+ function light_mode() {
+ var element = document.body;
+ element.classList.toggle("light-mode");
+ }
+ </script>
</header>
diff --git a/index.html b/index.html
index c635bcc..404dc14 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
</head>
<body class="flex column">
- <!--# include virtual="/components/header.html" -->
+ <!--# include virtual="/components/header.html" -->
<main>
<div class="intro-container flex row wrappable">
<div>
@@ -96,6 +96,7 @@
and no, no <i>light</i> mode, I have enough with this
</p>
</footer>
+
</body>
</html>
diff --git a/style.css b/style.css
index 64f267a..ff74633 100644
--- a/style.css
+++ b/style.css
@@ -21,6 +21,26 @@ body {
color: var(--text);
caret-color: var(--primary);
}
+.light-mode {
+ background-color: white;
+ color: black;
+ .theme-toggle-image {
+ content:url("/assets/moon.png");
+ }
+ button {
+ background-color: white;
+ border: 0px;
+ margin: 0px
+ }
+}
+.theme-toggle-image {
+ content:url("/assets/sun.png");
+}
+button {
+ background-color: black;
+ border: 0px;
+ margin: 0px
+}
*, *::before, *::after {
transition: all .3s ease-out;