support dark mode

YunoHost · May 22, 2024 · 784172a · 784172a
1 parent c66a7c8
commit 784172a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git 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,27 +22,31 @@ body {
   padding: 15px;
   margin: auto;
 }
+
 .form-donate .checkbox {
   font-weight: 400;
 }
+
 .form-donate .form-control {
   position: relative;
   box-sizing: border-box;
   height: auto;
   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;
-}
-
+}
diff --git a/assets/darkmode.js 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
@@ -13,6 +13,7 @@
   <link href="./css/global.css" rel="stylesheet" />
   <script src="https://js.stripe.com/v3/"></script>
   <script src="./index.js" defer></script>
+  <script src="./darkmode.js" defer></script>
 </head>
 
 <body class="text-center">