Add theme support using environment variable (#145)

* Add theme support using environment variable

* Propagate theme variable to template in options.go

Propagate the `theme` variable from the environment to the template in `src/routes/options.go`

* Retrieve the `theme` variable from the environment using `os.Getenv("THEME")`
* Set the `theme` variable in the `gin.H` map when rendering the `home.html` template


---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/httpjamesm/AnonymousOverflow/pull/145?shareId=6397c9b4-9450-425c-bbbe-019425965d2b).

* Move all theme environment variable logic to a utils function

Move theme environment variable logic to a utils function and update routes to use it.

* Add `GetThemeFromEnv` function in `src/utils/theme.go` to derive the theme from environment variables and default to "auto" if not set.
* Update `src/routes/home.go` to import and use `GetThemeFromEnv` in the `GetHome` function.
* Update `src/routes/options.go` to import and use `GetThemeFromEnv` in the `ChangeOptions` function.
* Update `src/routes/question.go` to import and use `GetThemeFromEnv` in the `ViewQuestion` function.


---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/httpjamesm/AnonymousOverflow/pull/145?shareId=a0dab6f3-027c-4f6e-85fe-60e7675d0e70).

* fix: imports removed by copilot

* fix: override theme in posthome

* style: reduced repetition in themes with common vars

public/globals.css

@@ -1,9 +1,13 @@
 :root {
+    --code-bg: #36383d;
+    --code-fg: #ffffff;
+}
+
+:root,
+[data-theme="dark"] {
     --main-bg: #1b1f26;
     --text-color: #fff;
     --muted-text-color: #b3b3b3;
-    --code-bg: #36383d;
-    --code-fg: #ffffff;
     --input-bg: #2b303b;
     --input-bg-hover: #3b404b;
     --meta-bg: #525262;
@@ -12,12 +16,10 @@
 }
 
 @media (prefers-color-scheme: light) {
-    :root {
+    :root:not([data-theme="dark"]) {
         --main-bg: #dbdbdb;
         --text-color: #000;
         --muted-text-color: #636363;
-        --code-bg: #36383d;
-        --code-fg: #ffffff;
         --input-bg: #bcbcbc;
         --input-bg-hover: #a8a8a8;
         --meta-bg: #aaa8a8;
@@ -26,6 +28,17 @@
     }
 }
 
+[data-theme="light"] {
+    --main-bg: #dbdbdb;
+    --text-color: #000;
+    --muted-text-color: #636363;
+    --input-bg: #bcbcbc;
+    --input-bg-hover: #a8a8a8;
+    --meta-bg: #aaa8a8;
+    --divider-color: #b5b5b5;
+    --link-color: #335ad0;
+}
+
 a {
     color: var(--link-color);
 }

src/routes/home.go

@@ -2,6 +2,7 @@ package routes
 
 import (
 	"anonymousoverflow/config"
+	"anonymousoverflow/src/utils"
 	"fmt"
 	"regexp"
 	"strings"
@@ -10,8 +11,10 @@ import (
 )
 
 func GetHome(c *gin.Context) {
+	theme := utils.GetThemeFromEnv()
 	c.HTML(200, "home.html", gin.H{
 		"version": config.Version,
+		"theme":   theme,
 	})
 }
 
@@ -68,8 +71,10 @@ func PostHome(c *gin.Context) {
 	translated := translateUrl(body.URL)
 
 	if translated == "" {
+		theme := utils.GetThemeFromEnv()
 		c.HTML(400, "home.html", gin.H{
 			"errorMessage": "Invalid stack overflow/exchange URL",
+			"theme":        theme,
 		})
 		return
 	}

src/routes/options.go

@@ -2,6 +2,7 @@ package routes
 
 import (
 	"anonymousoverflow/config"
+	"anonymousoverflow/src/utils"
 	"fmt"
 
 	"github.com/gin-gonic/gin"
@@ -17,9 +18,11 @@ func ChangeOptions(c *gin.Context) {
 			text = "enabled"
 		}
 		c.SetCookie("disable_images", fmt.Sprintf("%t", !c.MustGet("disable_images").(bool)), 60*60*24*365*10, "/", "", false, true)
+		theme := utils.GetThemeFromEnv()
 		c.HTML(200, "home.html", gin.H{
 			"successMessage": "Images are now " + text,
 			"version":        config.Version,
+			"theme":          theme,
 		})
 	default:
 		c.String(400, "400 Bad Request")

src/routes/question.go

@@ -101,6 +101,8 @@ func ViewQuestion(c *gin.Context) {
 		imagePolicy = "'self'"
 	}
 
+	theme := utils.GetThemeFromEnv()
+
 	c.HTML(200, "question.html", gin.H{
 		"question":    newFilteredQuestion,
 		"answers":     answers,
@@ -108,6 +110,7 @@ func ViewQuestion(c *gin.Context) {
 		"currentUrl":  fmt.Sprintf("%s%s", os.Getenv("APP_URL"), c.Request.URL.Path),
 		"sortValue":   params.SoSortValue,
 		"domain":      domain,
+		"theme":       theme,
 	})
 
 }

src/utils/theme.go

@@ -0,0 +1,11 @@
+package utils
+
+import "os"
+
+func GetThemeFromEnv() string {
+	theme := os.Getenv("THEME")
+	if theme == "" {
+		theme = "auto"
+	}
+	return theme
+}

templates/home.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="{{ .theme }}">
 
 <head>
     <title>AnonymousOverflow - Private frontend for StackOverflow</title>
@@ -58,4 +58,4 @@
     </div>
 </body>
 
-</html>
+</html>

templates/question.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="{{ .theme }}">
 
 <head>
     <title>{{ .question.Title }} | AnonymousOverflow</title>
@@ -92,4 +92,4 @@
     {{ end }}
 </body>
 
-</html>
+</html>