diff --git a/README.md b/README.md
index 8fcdb5e..c775e0d 100644
--- a/README.md
+++ b/README.md
@@ -42,4 +42,8 @@ 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.
\ No newline at end of file
+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/)
\ No newline at end of file
diff --git a/public/globals.css b/public/globals.css
index c24d83f..9455b23 100644
--- a/public/globals.css
+++ b/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;
}
diff --git a/public/home.css b/public/home.css
index 01fcab6..dd14eb8 100644
--- a/public/home.css
+++ b/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 {
diff --git a/public/icons/moon.svg b/public/icons/moon.svg
new file mode 100644
index 0000000..5202c71
--- /dev/null
+++ b/public/icons/moon.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/icons/sun.svg b/public/icons/sun.svg
new file mode 100644
index 0000000..c25c4fb
--- /dev/null
+++ b/public/icons/sun.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/question.css b/public/question.css
index a29defc..414e1ed 100644
--- a/public/question.css
+++ b/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;
diff --git a/src/middleware/options.go b/src/middleware/options.go
index d11b178..8a4ca64 100644
--- a/src/middleware/options.go
+++ b/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()
}
}
diff --git a/src/routes/home.go b/src/routes/home.go
index 7d05625..b56e164 100644
--- a/src/routes/home.go
+++ b/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
}
diff --git a/src/routes/question.go b/src/routes/question.go
index 8c764a7..26a74be 100644
--- a/src/routes/question.go
+++ b/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),
})
}
diff --git a/templates/home.html b/templates/home.html
index 1298aa4..92da411 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,5 +1,5 @@
-
+
AnonymousOverflow - Private frontend for StackOverflow
diff --git a/templates/question.html b/templates/question.html
index 788e037..b6a7fd8 100644
--- a/templates/question.html
+++ b/templates/question.html
@@ -1,5 +1,5 @@
-
+
{{ .title }}