diff --git a/assets/css/global.css b/assets/css/global.css
index d7edbab..b92c4dc 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -8,7 +8,12 @@ body {
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
- background-color: #f5f5f5;
+}
+
+@media (prefers-color-scheme: dark) {
+ img {
+ filter: invert(100%);
+ }
}
.form-donate {
@@ -17,9 +22,11 @@ body {
padding: 15px;
margin: auto;
}
+
.form-donate .checkbox {
font-weight: 400;
}
+
.form-donate .form-control {
position: relative;
box-sizing: border-box;
@@ -27,17 +34,19 @@ body {
padding: 10px;
font-size: 16px;
}
+
.form-donate .form-control:focus {
z-index: 2;
}
+
.form-donate input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
+
.form-donate input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
-}
-
+}
\ No newline at end of file
diff --git a/assets/darkmode.js b/assets/darkmode.js
new file mode 100644
index 0000000..d458f11
--- /dev/null
+++ b/assets/darkmode.js
@@ -0,0 +1,13 @@
+// Set theme to the user's preferred color scheme
+function updateTheme() {
+ const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ?
+ "dark" :
+ "light";
+ document.querySelector("html").setAttribute("data-bs-theme", colorMode);
+}
+
+// Set theme on load
+updateTheme()
+
+// Update theme when the preferred scheme changes
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
diff --git a/assets/index.html b/assets/index.html
index 5039401..ed4c7dd 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -13,6 +13,7 @@
+