From beabdd5749e4ddb7a2440a9c6c5fb52588b2f349 Mon Sep 17 00:00:00 2001
From: Julien Riou <julien@riou.xyz>
Date: Sun, 24 Aug 2025 12:45:50 +0200
Subject: [PATCH] feat: Add Dark mode

Implements #2.

Signed-off-by: Julien Riou <julien@riou.xyz>
---
 src/server/templates/create.html | 12 +++---
 src/server/templates/footer.html | 11 ++---
 src/server/templates/head.html   |  6 ++-
 src/server/templates/header.html | 73 ++++++++++++++++++++++++++------
 src/server/templates/index.html  |  2 +-
 5 files changed, 77 insertions(+), 27 deletions(-)
diff --git a/src/server/templates/create.html b/src/server/templates/create.html
index a642cdd..416c2cb 100644
--- a/src/server/templates/create.html
+++ b/src/server/templates/create.html
@@ -1,29 +1,29 @@
 {{define "create"}}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="light">
 
 {{block "head" .}}{{end}}
 
 <body>
-{{block "header" .}}{{end}}
+    {{block "header" .}}{{end}}
 
     <div class="container mb-4 text-center">
-{{if eq .Err nil}}
+        {{if eq .Err nil}}
         <div class="alert alert-success" role="alert">
             <p>Note created successfully</p>
             <p>
                 <a href="{{.URL}}">{{.URL}}</a>
             </p>
         </div>
-{{else}}
+        {{else}}
         <div class="alert alert-danger" role="alert">
             <p>Could not create note</p>
             <p><strong>{{.Err}}</strong></p>
         </div>
     </div>
-{{end}}
+    {{end}}
 
-{{block "footer" .}}{{end}}
+    {{block "footer" .}}{{end}}
 </body>
 
 </html>
diff --git a/src/server/templates/footer.html b/src/server/templates/footer.html
index c3a616e..9526bdc 100644
--- a/src/server/templates/footer.html
+++ b/src/server/templates/footer.html
@@ -1,5 +1,6 @@
-    {{define "footer"}}
-    <footer class="text-center">
-        <small>Powered by <a href="https://git.riou.xyz/jriou/coller">coller</a>{{if ne .Version ``}} ({{.Version}}){{end}}</small>
-    </footer>
-    {{end}}
+{{define "footer"}}
+<footer class="text-center">
+    <small>Powered by <a href="https://git.riou.xyz/jriou/coller">coller</a>{{if ne .Version ``}}
+        ({{.Version}}){{end}}</small>
+</footer>
+{{end}}
\ No newline at end of file
diff --git a/src/server/templates/head.html b/src/server/templates/head.html
index 5434399..bd8edba 100644
--- a/src/server/templates/head.html
+++ b/src/server/templates/head.html
@@ -1,7 +1,9 @@
 {{define "head"}}
+
 <head>
     <title>{{.Title}}</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 {{end}}
\ No newline at end of file
diff --git a/src/server/templates/header.html b/src/server/templates/header.html
index e0f304a..def42eb 100644
--- a/src/server/templates/header.html
+++ b/src/server/templates/header.html
@@ -1,16 +1,63 @@
 {{define "header"}}
-    <div class="text-center justify-content-center align-items-center bg-light border-bottom mb-4">
-        <div class="container">
-            <header class="d-flex flex-wrap py-2">
-                <a class="d-flex mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" href="/">
-                    <span class="fs-3">{{.Title}}</span>
-                </a>
-                <ul class="nav nav-pills">
-                    <li class="nav-item">
-                        <a class="nav-link active" href="/" aria-content="page">New note</a>
-                    </li>
-                </ul>
-            </header>
-        </div>
+<div class="text-center justify-content-center align-items-center bg-light border-bottom mb-4" id="navHeader">
+    <div class="container">
+        <header class="d-flex flex-wrap py-2">
+            <a class="d-flex mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" id="titleHeader" href="/">
+                <span class="fs-3">{{.Title}}</span>
+            </a>
+            <ul class="nav nav-pills align-items-center">
+                <li class="nav-item">
+                    <div class="form-check form-switch"
+                        style="--bs-form-switch-width:60px;--bs-form-switch-height:30px">
+                        <input class="form-check-input" type="checkbox" role="switch" id="lightSwitch" />
+                    </div>
+                </li>
+                <label for="lightSwitch">Dark mode</label>
+            </ul>
+            <ul class="nav nav-pills">
+                <li class="nav-item px-2">
+                    <a class="nav-link active" href="/" aria-content="page">New note</a>
+                </li>
+            </ul>
+        </header>
     </div>
+</div>
+<script>
+    function setTheme(theme) {
+        if (theme == "dark") {
+            setDarkTheme()
+        } else if (theme == "light") {
+            setLightTheme()
+        }
+    }
+
+    function setDarkTheme() {
+        document.documentElement.setAttribute('data-bs-theme', 'dark')
+        document.getElementById('navHeader').classList.replace('bg-light', 'bg-dark')
+        document.getElementById('titleHeader').classList.replace('text-dark', 'text-light')
+        localStorage.setItem("theme", "dark")
+    }
+
+    function setLightTheme() {
+        document.documentElement.setAttribute('data-bs-theme', 'light')
+        document.getElementById('navHeader').classList.replace('bg-dark', 'bg-light')
+        document.getElementById('titleHeader').classList.replace('text-light', 'text-dark')
+        localStorage.setItem("theme", "light")
+    }
+
+    if (localStorage.getItem("theme")) {
+        if (localStorage.getItem("theme") == "dark") {
+            document.getElementById('lightSwitch').setAttribute('checked', true)
+        }
+        setTheme(localStorage.getItem("theme"))
+    }
+
+    document.getElementById('lightSwitch').addEventListener('click', () => {
+        if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
+            setDarkTheme()
+        } else if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
+            setLightTheme()
+        }
+    })
+</script>
 {{end}}
\ No newline at end of file
diff --git a/src/server/templates/index.html b/src/server/templates/index.html
index e7c1944..ec30815 100644
--- a/src/server/templates/index.html
+++ b/src/server/templates/index.html
@@ -1,6 +1,6 @@
 {{define "index"}}
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="light">
 
 {{block "head" .}}{{end}}
 
