Add dark theme (#6)

willbicks · Dec 18, 2022 · 2741562 · 2741562
1 parent e8b5242
commit 2741562
Show file tree

Hide file tree

Showing 9 changed files with 236 additions and 125 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ Epigram is a simple web service for communities to immortalize the enlightening,
 - [x] Quotes are organized in chronological order, and in sections by year.
 - [x] Authorization is delegated to a configurable OpenID Connect provider.
 - [x] Access restricted to only those who correctly answer a few questions.
-- [ ] Dark mode support.
+- [x] Dark mode support.
 - [ ] Expanded admin control functions.
 
 ## Project Status

diff --git a/internal/server/http/frontend/public/styles/app.css b/internal/server/http/frontend/public/styles/app.css
diff --git a/internal/server/http/frontend/templates/base.gohtml b/internal/server/http/frontend/templates/base.gohtml
@@ -1,22 +1,25 @@
 {{define "base"}}
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ .Title }}</title>
     <link rel="stylesheet" href="/static/styles/app.css">
 </head>
-<body>
+
+<body class="bg-white dark:bg-black text-gray-900 dark:text-gray-100">
     <div class="flex flex-col min-h-screen justify-between">
         <div class="antialiased px-6 flex-1 flex flex-col">
             {{template "body" .}}
         </div>
         {{template "footer" .}}
     </div>
-    
+
     {{block "scripts" .}}{{end}}
 </body>
+
 </html>
 {{end}}
diff --git a/internal/server/http/frontend/templates/components/footer.gohtml b/internal/server/http/frontend/templates/components/footer.gohtml
@@ -1,7 +1,7 @@
 {{define "footer"}}
-<div class="bg-gray-100 text-center py-6">
+<div class="bg-gray-100 dark:bg-gray-900 text-center py-6">
     <p class="text-lg">
-        powered by 
+        powered by
         <a href="https://github.com/willbicks/epigram" target="_blank" class="link">Epigram</a>
         &nbsp; | &nbsp;
         <a href="{{ .Paths.Privacy }}" target="_blank" class="link">privacy policy</a>

diff --git a/internal/server/http/frontend/templates/views/admin_main.gohtml b/internal/server/http/frontend/templates/views/admin_main.gohtml
@@ -1,25 +1,26 @@
 {{template "base" .}}
 
 {{define "body"}}
-    <div class="section">
-        <h1 class="h1">{{.Title}} | Administration</h1>
-    </div>
-    <div class="section my-12">
-        <h2 class="h2">Users</h2>
-        {{range .Page.Users}}
-            <div class="bg-gray-100 p-4 flex flex-col mb-3 md:flex-row">
-                <img class="w-32 h-32 rounded-full mr-3 mb-3 md:mb-0" src="{{ sizeImage .PictureURL 128 }}" alt="Profile Picture" referrerpolicy="no-referrer">
-                <div>
-                    <p class="text-xl font-bold">{{.Name}}</p>
-                    <p><span class="font-bold">Email: </span>{{.Email}}</p>
-                    <p><span class="font-bold">ID: </span>{{.ID}}</p>
-                    <p><span class="font-bold">Joined on: </span>{{.Created}}</p>
-                    <p><span class="font-bold">Quiz: </span>
-                        {{if .QuizPassed}}Passed{{else}}Not Passed{{end}}
-                        ({{.QuizAttempts}} attempts)
-                    </p>
-                </div>
-            </div>
-        {{end}}
+<div class="section">
+    <h1 class="h1">{{.Title}} | Administration</h1>
+</div>
+<div class="section my-12">
+    <h2 class="h2">Users</h2>
+    {{range .Page.Users}}
+    <div class="bg-gray-100 dark:bg-gray-900 p-4 flex flex-col mb-3 md:flex-row">
+        <img class="w-32 h-32 rounded-full mr-3 mb-3 md:mb-0" src="{{ sizeImage .PictureURL 128 }}"
+            alt="Profile Picture" referrerpolicy="no-referrer">
+        <div>
+            <p class="text-xl font-bold">{{.Name}}</p>
+            <p><span class="font-bold">Email: </span>{{ .Email }}</p>
+            <p><span class="font-bold">ID: </span>{{ .ID }}</p>
+            <p><span class="font-bold">Joined on: </span>{{ .Created }}</p>
+            <p><span class="font-bold">Quiz: </span>
+                {{if .QuizPassed}}Passed{{else}}Not Passed{{end}}
+                ({{.QuizAttempts}} attempts)
+            </p>
+        </div>
     </div>
+    {{end}}
+</div>
 {{end}}
diff --git a/internal/server/http/frontend/templates/views/home.gohtml b/internal/server/http/frontend/templates/views/home.gohtml
@@ -1,10 +1,10 @@
 {{template "base" .}}
 
 {{define "body"}}
-	<div class="section text-center flex-1 flex flex-col justify-center">
-        <p class="text-5xl">💬</p>
-		<h1 class="h1">Welcome to {{.Title}}!</h1>
-        <p class="text-2xl mb-6">{{ .Description }}</p>
-        <a href="{{.Paths.Login}}" class="button text-2xl px-10 mx-auto">Login</a>
-	</div>
+<div class="section text-center flex-1 flex flex-col justify-center">
+    <p class="text-5xl">💬</p>
+    <h1 class="h1">Welcome to {{.Title}}!</h1>
+    <p class="text-2xl mb-6">{{ .Description }}</p>
+    <a href="{{.Paths.Login}}" class="button text-2xl px-10 mx-auto">Login</a>
+</div>
 {{end}}