Add theme support using environment variable

This commit is contained in:
httpjamesm 2024-07-25 09:57:47 -07:00
parent e35ffdcc07
commit bd969567a4
5 changed files with 43 additions and 5 deletions

View file

@ -26,6 +26,32 @@
} }
} }
[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;
--divider-color: #42464e;
--link-color: #92adff;
}
[data-theme="light"] {
--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;
--divider-color: #b5b5b5;
--link-color: #335ad0;
}
a { a {
color: var(--link-color); color: var(--link-color);
} }

View file

@ -3,6 +3,7 @@ package routes
import ( import (
"anonymousoverflow/config" "anonymousoverflow/config"
"fmt" "fmt"
"os"
"regexp" "regexp"
"strings" "strings"
@ -10,8 +11,13 @@ import (
) )
func GetHome(c *gin.Context) { func GetHome(c *gin.Context) {
theme := os.Getenv("THEME")
if theme == "" {
theme = "auto"
}
c.HTML(200, "home.html", gin.H{ c.HTML(200, "home.html", gin.H{
"version": config.Version, "version": config.Version,
"theme": theme,
}) })
} }

View file

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

View file

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

View file

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