feat: import theme icons, set color vars, option cookie

README.md

@@ -43,3 +43,7 @@ Install Docker for your platform and copy the `docker-compose.example.yml` file
 Then, tweak settings if needed.
 
 Run `docker compose up -d` to build and start the container.
+
+## Attribution
+
+- Icons provided by [heroicons](https://heroicons.com) under the [MIT License](https://choosealicense.com/licenses/mit/)

public/globals.css

@@ -1,3 +1,25 @@
+:root {
+    --main-bg: #1b1f26;
+    --text-color: #fff;
+    --muted-text-color: #b3b3b3;
+    --code-bg: #36383d;
+    --input-bg: #2b303b;
+    --input-bg-hover: #3b404b;
+    --meta-bg: rgb(82, 82, 98);
+    --divider-color: #42464e;
+}
+
+[data-theme="light"] {
+    --main-bg: rgb(219, 219, 219);
+    --text-color: #000;
+    --muted-text-color: #636363;
+    --code-bg: #b5b5b5;
+    --input-bg: rgb(188, 188, 188);
+    --input-bg-hover: rgb(168, 168, 168);
+    --meta-bg: rgb(170, 168, 168);
+    --divider-color: #b5b5b5;
+}
+
 a {
     color: #92adff;
 }

public/home.css

@@ -1,5 +1,5 @@
 body {
-    background-color: #1b1f26;
+    background-color: var(--main-bg);
     font-family: sans-serif;
 
     display: flex;
@@ -11,7 +11,7 @@ body {
 
     margin: 0;
 
-    color: white;
+    color: var(--text-color);
 }
 
 .container {
@@ -35,9 +35,9 @@ body {
     border: 2px solid transparent;
     border-radius: 3px;
 
-    background-color: #2b303b;
+    background-color: var(--input-bg);
 
-    color: white;
+    color: var(--text-color);
 
     transition-duration: 200ms;
 }
@@ -52,9 +52,9 @@ body {
     border: 2px solid transparent;
     border-radius: 3px;
 
-    background-color: #2b303b;
+    background-color: var(-input-bg);
 
-    color: white;
+    color: var(--text-color);
 
     transition-duration: 200ms;
 
@@ -62,7 +62,7 @@ body {
 }
 
 .view-button:hover {
-    background-color: #3b404b;
+    background-color: var(--input-bg-hover);
 }
 
 .error {

public/icons/moon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+</svg>

public/icons/sun.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+</svg>

public/question.css

@@ -1,7 +1,3 @@
-:root {
-    --code-bg: #36383d;
-}
-
 body {
     margin: 0;
     width: 100vw;
@@ -9,8 +5,8 @@ body {
 
     overflow-x: hidden;
 
-    background-color: #1b1f26;
-    color: white;
+    background-color: var(--main-bg);
+    color: var(--text-color);
     font-family: sans-serif;
     
     display: flex;
@@ -32,21 +28,21 @@ code {
     background-color: var(--code-bg);
     padding: .15rem;
     border-radius: 5px;
-    color: white;
+    color: var(--text-color);
 }
 
 pre {
     background-color: var(--code-bg);
     padding: 1rem;
     border-radius: 5px;
-    color: white;
+    color: var(--text-color);
     overflow-x: auto;
     line-height: 1.35;
 }
 
 
 .timestamp {
-    color: #b3b3b3;
+    color: var(--muted-text-color);
     font-size: 0.8rem;
 }
 
@@ -55,7 +51,7 @@ pre {
     margin-bottom: 3rem;
     border: 0;
     height: 1px;
-    background-color: #42464e;
+    background-color: var(--divider-color);
 }
 
 img {
@@ -67,8 +63,8 @@ img {
     padding: 1rem;
     color: black;
     margin-bottom: 1rem;
-    background-color: rgb(82, 82, 98);
-    color: white;
+    background-color: var(--meta-bg);
+    color: var(--text-color);
 }
 
 .answer-meta.accepted {
@@ -83,7 +79,7 @@ img {
 
 .answer-author {
     width: fit-content;
-    background-color: rgb(82, 82, 98);
+    background-color: var(--meta-bg);
     padding: .5rem;
     border-radius: 5px;
     text-align: right;

src/middleware/options.go

@@ -5,19 +5,28 @@ import "github.com/gin-gonic/gin"
 func OptionsMiddleware() gin.HandlerFunc {
 	return func(c *gin.Context) {
 		c.Set("disable_images", false)
+		c.Set("theme", "dark")
 
-		// get cookie
-		cookie, err := c.Cookie("disable_images")
+		imagesCookie, err := c.Cookie("disable_images")
 		if err != nil {
 			c.Next()
 			return
 		}
 
-		// check if disable_images is equal to "true"
-		if cookie == "true" {
+		if imagesCookie == "true" {
 			c.Set("disable_images", true)
 		}
 
+		themeCookie, err := c.Cookie("theme")
+		if err != nil {
+			c.Next()
+			return
+		}
+
+		if themeCookie == "light" {
+			c.Set("theme", "light")
+		}
+
 		c.Next()
 	}
 }

src/routes/home.go

@@ -11,6 +11,7 @@ import (
 func GetHome(c *gin.Context) {
 	c.HTML(200, "home.html", gin.H{
 		"version": config.Version,
+		"theme":   c.MustGet("theme").(string),
 	})
 }
 
@@ -24,6 +25,7 @@ func PostHome(c *gin.Context) {
 	if err := c.ShouldBind(&body); err != nil {
 		c.HTML(400, "home.html", gin.H{
 			"errorMessage": "Invalid request body",
+			"theme":        c.MustGet("theme").(string),
 		})
 		return
 	}
@@ -34,6 +36,7 @@ func PostHome(c *gin.Context) {
 	if !strings.HasPrefix(soLink, "https://stackoverflow.com/questions/") {
 		c.HTML(400, "home.html", gin.H{
 			"errorMessage": "Invalid stack overflow URL",
+			"theme":        c.MustGet("theme").(string),
 		})
 		return
 	}

src/routes/question.go

@@ -156,6 +156,7 @@ func ViewQuestion(c *gin.Context) {
 		"answers":       answers,
 		"imagePolicy":   imagePolicy,
 		"shortenedBody": questionBodyParent.Text()[0:50],
+		"theme":         c.MustGet("theme").(string),
 	})
 
 }

templates/home.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="{{ .theme }}">
     <head>
         <title>AnonymousOverflow - Private frontend for StackOverflow</title>
         <link rel="stylesheet" href="/static/globals.css" />

templates/question.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="{{ .theme }}">
     <head>
         <title>{{ .title }}</title>
         <link rel="stylesheet" href="/static/question.css" />