diff --git a/templates/index.html b/templates/index.html
index bc2fabf..8d64696 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -103,11 +103,58 @@
padding: 5px 0 0 0;
}
}
+ /* ==========================================================================
+ Theme Stuffs
+ ========================================================================== */
+ .dark-mode {
+ background-color: black;
+ color: white;
+ }
+ .dark-mode #forkongithub a {
+ background:#fff;
+ color:#000;
+ box-shadow:4px 4px 10px rgba(255,255,255,0.8);
+ }
+ .dark-mode #forkongithub a:hover{background:#c11;
+ color:#000;
+ }
+ .dark-mode #forkongithub a::before,.dark-mode #forkongithub a::after{
+ background:#000;
+ }
+ .dark-mode .btn-outline-primary {
+ color: #fff;
+ background-color: #96baff;
+ border-color: #708ad9;
+ }
+ .dark-mode .btn-outline-primary:hover {
+ background-color: #96baff;
+ border-color: #708ad9;
+ }
+ .btn-check:checked + .btn-outline-primary {
+ background-color: #7585b5;
+ }
+ .dark-mode .btn-outline-primary:hover, .dark-mode .notify {
+ color: #4d67b5;
+ }
+ .dark-mode .fs-1 {
+ color: #7385cc;
+ }
+ .dark-mode .error {
+ color: #ffe140;
+ }
+ .dark-mode .btn-group .disabled {
+ border: 1px solid darkblue !important;
+ color: #fdf5f6 !important;
+ background-color: darkgray;
+ }
- Timekpr Next Remote
+
+ Timekpr Next Remote
+
+
-
+
Fork me on GitHub
@@ -116,8 +163,10 @@
@@ -255,6 +304,24 @@
return hDisplay + mDisplay + sDisplay;
}
+ /**
+ * Flip the theme back and forth between light and dark
+ */
+ function toggleTheme() {
+ const element = document.body;
+ element.classList.toggle("dark-mode");
+ console.log("toggled!");
+ }
+ // add click handler to toggle theme
+ $('#toggle_theme').click(function (){
+ toggleTheme();
+ })
+ // thanks https://stackoverflow.com/a/59621903 !
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ // Dark
+ toggleTheme();
+ }
+