From 4c971f312174a3a5b38baff15d2c19b1356006cf Mon Sep 17 00:00:00 2001
From: httpjamesm <51917118+httpjamesm@users.noreply.github.com>
Date: Thu, 25 Jul 2024 10:50:06 -0700
Subject: [PATCH] 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 | 23 ++++++++++++++++++-----
src/routes/home.go | 5 +++++
src/routes/options.go | 3 +++
src/routes/question.go | 3 +++
src/utils/theme.go | 11 +++++++++++
templates/home.html | 4 ++--
templates/question.html | 4 ++--
7 files changed, 44 insertions(+), 9 deletions(-)
create mode 100644 src/utils/theme.go
diff --git a/public/globals.css b/public/globals.css
index 8470cd0..4912ddd 100644
--- a/public/globals.css
+++ b/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);
}
diff --git a/src/routes/home.go b/src/routes/home.go
index a45b4f7..78202e1 100644
--- a/src/routes/home.go
+++ b/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
}
diff --git a/src/routes/options.go b/src/routes/options.go
index 1bafa59..c0c8718 100644
--- a/src/routes/options.go
+++ b/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")
diff --git a/src/routes/question.go b/src/routes/question.go
index 7d5f7bf..3b6274b 100644
--- a/src/routes/question.go
+++ b/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,
})
}
diff --git a/src/utils/theme.go b/src/utils/theme.go
new file mode 100644
index 0000000..b78d9c4
--- /dev/null
+++ b/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
+}
diff --git a/templates/home.html b/templates/home.html
index cb47709..48bae31 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,5 +1,5 @@
-
+
AnonymousOverflow - Private frontend for StackOverflow
@@ -58,4 +58,4 @@
-
\ No newline at end of file
+
diff --git a/templates/question.html b/templates/question.html
index a0b41f0..6cff3aa 100644
--- a/templates/question.html
+++ b/templates/question.html
@@ -1,5 +1,5 @@
-
+
{{ .question.Title }} | AnonymousOverflow
@@ -92,4 +92,4 @@
{{ end }}
-
\ No newline at end of file
+