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
This commit is contained in:
httpjamesm
2024-07-25 10:50:06 -07:00
committed by GitHub
parent e35ffdcc07
commit 4c971f3121
7 changed files with 44 additions and 9 deletions

View File

@ -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);
}