media query theme (#139)

* feat: use css media query to derive theme

* fix: rename alt for toggle images

* feat: remove no-cache middleware

main.go

@@ -35,7 +35,6 @@ func main() {
 
 	r.Use(gin.Recovery())
 	r.Use(middleware.XssPreventionHeaders())
-	r.Use(middleware.NoCacheMiddleware())
 	r.Use(middleware.OptionsMiddleware())
 	r.Use(middleware.Ratelimit())
 

public/globals.css

@@ -11,17 +11,19 @@
     --link-color: #92adff;
 }
 
-[data-theme='light'] {
+@media (prefers-color-scheme: light) {
-    --main-bg: #dbdbdb;
+    :root {
-    --text-color: #000;
+        --main-bg: #dbdbdb;
-    --muted-text-color: #636363;
+        --text-color: #000;
-    --code-bg: #36383d;
+        --muted-text-color: #636363;
-    --code-fg: #ffffff;
+        --code-bg: #36383d;
-    --input-bg: #bcbcbc;
+        --code-fg: #ffffff;
-    --input-bg-hover: #a8a8a8;
+        --input-bg: #bcbcbc;
-    --meta-bg: #aaa8a8;
+        --input-bg-hover: #a8a8a8;
-    --divider-color: #b5b5b5;
+        --meta-bg: #aaa8a8;
-    --link-color: #335ad0;
+        --divider-color: #b5b5b5;
+        --link-color: #335ad0;
+    }
 }
 
 a {
@@ -76,4 +78,4 @@ details {
 
 .fw-nowrap {
     flex-wrap: nowrap;
-}
+}

src/middleware/noCache.go

@@ -1,12 +0,0 @@
-package middleware
-
-import "github.com/gin-gonic/gin"
-
-func NoCacheMiddleware() gin.HandlerFunc {
-	return func(c *gin.Context) {
-		c.Header("Cache-Control", "no-cache, no-store, must-revalidate")
-		c.Header("Pragma", "no-cache")
-		c.Header("Expires", "0")
-		c.Next()
-	}
-}

src/middleware/options.go

@@ -7,7 +7,6 @@ import (
 func OptionsMiddleware() gin.HandlerFunc {
 	return func(c *gin.Context) {
 		c.Set("disable_images", false)
-		c.Set("theme", "dark")
 
 		imagesCookie, err := c.Cookie("disable_images")
 		if err == nil {
@@ -16,13 +15,6 @@ func OptionsMiddleware() gin.HandlerFunc {
 			}
 		}
 
-		themeCookie, err := c.Cookie("theme")
-		if err == nil {
-			if themeCookie == "light" {
-				c.Set("theme", "light")
-			}
-		}
-
 		c.Next()
 	}
 }

src/middleware/ratelimit.go

@@ -47,7 +47,6 @@ func Ratelimit() gin.HandlerFunc {
 		if val.(int) > 30 {
 			c.HTML(429, "home.html", gin.H{
 				"errorMessage": "You have exceeded the request limit. Please try again in a minute.",
-				"theme":        c.MustGet("theme").(string),
 				"version":      config.Version,
 			})
 			c.Abort()

src/routes/home.go

@@ -12,7 +12,6 @@ import (
 func GetHome(c *gin.Context) {
 	c.HTML(200, "home.html", gin.H{
 		"version": config.Version,
-		"theme":   c.MustGet("theme").(string),
 	})
 }
 
@@ -62,7 +61,6 @@ 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
 	}
@@ -72,7 +70,6 @@ func PostHome(c *gin.Context) {
 	if translated == "" {
 		c.HTML(400, "home.html", gin.H{
 			"errorMessage": "Invalid stack overflow/exchange URL",
-			"theme":        c.MustGet("theme").(string),
 		})
 		return
 	}

src/routes/options.go

@@ -3,8 +3,6 @@ package routes
 import (
 	"anonymousoverflow/config"
 	"fmt"
-	"os"
-	"strings"
 
 	"github.com/gin-gonic/gin"
 )
@@ -21,26 +19,8 @@ func ChangeOptions(c *gin.Context) {
 		c.SetCookie("disable_images", fmt.Sprintf("%t", !c.MustGet("disable_images").(bool)), 60*60*24*365*10, "/", "", false, true)
 		c.HTML(200, "home.html", gin.H{
 			"successMessage": "Images are now " + text,
-			"theme":          c.MustGet("theme").(string),
 			"version":        config.Version,
 		})
-
-	case "theme":
-		text := "dark"
-		if c.MustGet("theme").(string) == "dark" {
-			text = "light"
-		}
-
-		c.SetCookie("theme", text, 60*60*24*365*10, "/", "", false, true)
-		// get redirect url from query
-		redirectUrl := c.Query("redirect_url")
-
-		if !strings.HasPrefix(redirectUrl, os.Getenv("APP_URL")) {
-			redirectUrl = os.Getenv("APP_URL")
-		}
-
-		c.Redirect(302, redirectUrl)
-
 	default:
 		c.String(400, "400 Bad Request")
 	}

src/routes/question.go

@@ -34,7 +34,6 @@ func ViewQuestion(c *gin.Context) {
 	if _, err := strconv.Atoi(questionId); err != nil {
 		c.HTML(400, "home.html", gin.H{
 			"errorMessage": "Invalid question ID",
-			"theme":        c.MustGet("theme").(string),
 			"version":      config.Version,
 		})
 		return
@@ -60,7 +59,6 @@ func ViewQuestion(c *gin.Context) {
 	if resp.StatusCode() != 200 {
 		c.HTML(500, "home.html", gin.H{
 			"errorMessage": fmt.Sprintf("Received a non-OK status code %d", resp.StatusCode()),
-			"theme":        c.MustGet("theme").(string),
 			"version":      config.Version,
 		})
 		return
@@ -74,7 +72,6 @@ func ViewQuestion(c *gin.Context) {
 	if err != nil {
 		c.HTML(500, "home.html", gin.H{
 			"errorMessage": "Unable to parse question data",
-			"theme":        c.MustGet("theme").(string),
 			"version":      config.Version,
 		})
 		return
@@ -84,7 +81,6 @@ func ViewQuestion(c *gin.Context) {
 	if err != nil {
 		c.HTML(500, "home.html", gin.H{
 			"errorMessage": "Failed to extract question data",
-			"theme":        c.MustGet("theme").(string),
 			"version":      config.Version,
 		})
 		return
@@ -94,7 +90,6 @@ func ViewQuestion(c *gin.Context) {
 	if err != nil {
 		c.HTML(500, "home.html", gin.H{
 			"errorMessage": "Failed to extract answer data",
-			"theme":        c.MustGet("theme").(string),
 			"version":      config.Version,
 		})
 		return
@@ -110,7 +105,6 @@ func ViewQuestion(c *gin.Context) {
 		"question":    newFilteredQuestion,
 		"answers":     answers,
 		"imagePolicy": imagePolicy,
-		"theme":       c.MustGet("theme").(string),
 		"currentUrl":  fmt.Sprintf("%s%s", os.Getenv("APP_URL"), c.Request.URL.Path),
 		"sortValue":   params.SoSortValue,
 		"domain":      domain,
@@ -132,7 +126,6 @@ func parseAndValidateParameters(c *gin.Context) (inputs viewQuestionInputs, err
 	if _, err = strconv.Atoi(questionId); err != nil {
 		c.HTML(400, "home.html", gin.H{
 			"errorMessage": "Invalid question ID",
-			"theme":        c.MustGet("theme").(string),
 			"version":      config.Version,
 		})
 		return

src/routes/shortened.go

@@ -33,7 +33,6 @@ func RedirectShortenedOverflowURL(c *gin.Context) {
 	if err != nil {
 		c.HTML(400, "home.html", gin.H{
 			"errorMessage": "Unable to fetch stack overflow URL",
-			"theme":        c.MustGet("theme").(string),
 		})
 		return
 	}
@@ -41,7 +40,6 @@ func RedirectShortenedOverflowURL(c *gin.Context) {
 	if resp.StatusCode() != 302 {
 		c.HTML(400, "home.html", gin.H{
 			"errorMessage": fmt.Sprintf("Unexpected HTTP status from origin: %d", resp.StatusCode()),
-			"theme":        c.MustGet("theme").(string),
 		})
 		return
 	}

templates/home.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="{{ .theme }}">
+<html>
 
 <head>
     <title>AnonymousOverflow - Private frontend for StackOverflow</title>
@@ -43,10 +43,9 @@
         <div class="options">
             <div class="icon">
                 <a href="/options/images">
-                    <img src="/static/icons/image.svg" alt="Toggle theme" />
+                    <img src="/static/icons/image.svg" alt="Toggle images" />
                 </a>
             </div>
-            {{ template "themeSwitcher.html" .}}
         </div>
         <p class="footer">
             Brought to you by

templates/question.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html data-theme="{{ .theme }}">
+<html>
 
 <head>
     <title>{{ .question.Title }} | AnonymousOverflow</title>
@@ -25,7 +25,6 @@
         <a href="/" class="logo-link">
             <img class="logo" src="/static/codecircles.webp" alt="AnonymousOverflow home" />
         </a>
-        {{ template "themeSwitcher.html" . }}
     </div>
     <div class="card">
         <div class="card-header">

templates/themeSwitcher.html

@@ -1,6 +0,0 @@
-<div class="icon">
-    <a href="/options/theme?redirect_url={{ .currentUrl }}">
-        <img src="/static/icons/{{ if eq .theme "dark" }}sun{{
-        else }}moon{{ end }}.svg" alt="Toggle theme" />
-    </a>
-</div>