From 4e0cca3f7d9dd227df161e3548cc374c169d3dc6 Mon Sep 17 00:00:00 2001
From: Gwyneth Morgan <gwymor@tilde.club>
Date: Mon, 27 Sep 2021 07:47:44 -0700
Subject: [PATCH] Use light/dark theme based on system preference (#17051)
Add a new default theme `auto`, which will automatically switch between
`gitea` (light) and `arc-green` (dark) themes depending on the user's
operating system settings.
Closes: #8183
---
.stylelintrc | 1 +
custom/conf/app.example.ini | 4 ++--
docs/content/doc/advanced/config-cheat-sheet.en-us.md | 4 ++--
docs/content/doc/advanced/customizing-gitea.en-us.md | 2 +-
docs/content/doc/help/faq.en-us.md | 2 +-
modules/setting/setting.go | 4 ++--
web_src/js/utils.js | 8 +++++++-
web_src/less/themes/theme-auto.less | 3 +++
8 files changed, 19 insertions(+), 9 deletions(-)
create mode 100644 web_src/less/themes/theme-auto.less
diff --git a/.stylelintrc b/.stylelintrc
index 1d95b964bd2..42c45f0ea7c 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -13,3 +13,4 @@ rules:
rule-empty-line-before: null
selector-pseudo-element-colon-notation: double
shorthand-property-no-redundant-values: true
+ no-invalid-position-at-import-rule: null
diff --git a/custom/conf/app.example.ini b/custom/conf/app.example.ini
index f8a4dda4f22..90a11ec657e 100644
--- a/custom/conf/app.example.ini
+++ b/custom/conf/app.example.ini
@@ -1035,10 +1035,10 @@ PATH =
;SHOW_USER_EMAIL = true
;;
;; Set the default theme for the Gitea install
-;DEFAULT_THEME = gitea
+;DEFAULT_THEME = auto
;;
;; All available themes. Allow users select personalized themes regardless of the value of `DEFAULT_THEME`.
-;THEMES = gitea,arc-green
+;THEMES = auto,gitea,arc-green
;;
;; All available reactions users can choose on issues/prs and comments.
;; Values can be emoji alias (:smile:) or a unicode emoji.
diff --git a/docs/content/doc/advanced/config-cheat-sheet.en-us.md b/docs/content/doc/advanced/config-cheat-sheet.en-us.md
index 7929f35c57a..de9b794db29 100644
--- a/docs/content/doc/advanced/config-cheat-sheet.en-us.md
+++ b/docs/content/doc/advanced/config-cheat-sheet.en-us.md
@@ -174,9 +174,9 @@ The following configuration set `Content-Type: application/vnd.android.package-a
- `FEED_PAGING_NUM`: **20**: Number of items that are displayed in home feed.
- `GRAPH_MAX_COMMIT_NUM`: **100**: Number of maximum commits shown in the commit graph.
- `CODE_COMMENT_LINES`: **4**: Number of line of codes shown for a code comment.
-- `DEFAULT_THEME`: **gitea**: \[gitea, arc-green\]: Set the default theme for the Gitea install.
+- `DEFAULT_THEME`: **auto**: \[auto, gitea, arc-green\]: Set the default theme for the Gitea install.
- `SHOW_USER_EMAIL`: **true**: Whether the email of the user should be shown in the Explore Users page.
-- `THEMES`: **gitea,arc-green**: All available themes. Allow users select personalized themes.
+- `THEMES`: **auto,gitea,arc-green**: All available themes. Allow users select personalized themes.
regardless of the value of `DEFAULT_THEME`.
- `THEME_COLOR_META_TAG`: **#6cc644**: Value of `theme-color` meta tag, used by Android >= 5.0. An invalid color like "none" or "disable" will have the default style. More info: https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
- `MAX_DISPLAY_FILE_SIZE`: **8388608**: Max size of files to be displayed (default is 8MiB)
diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
index fe18a801f04..040dcfd3e85 100644
--- a/docs/content/doc/advanced/customizing-gitea.en-us.md
+++ b/docs/content/doc/advanced/customizing-gitea.en-us.md
@@ -321,7 +321,7 @@ A full list of supported emoji's is at [emoji list](https://gitea.com/gitea/gite
## Customizing the look of Gitea
-The default built-in themes are `gitea` (light) and `arc-green` (dark).
+The default built-in themes are `gitea` (light), `arc-green` (dark), and `auto` (chooses light or dark depending on operating system settings).
The default theme can be changed via `DEFAULT_THEME` in the [ui](https://docs.gitea.io/en-us/config-cheat-sheet/#ui-ui) section of `app.ini`.
Gitea also has support for user themes, which means every user can select which theme should be used.
diff --git a/docs/content/doc/help/faq.en-us.md b/docs/content/doc/help/faq.en-us.md
index 953aa9f0120..e9551bbb711 100644
--- a/docs/content/doc/help/faq.en-us.md
+++ b/docs/content/doc/help/faq.en-us.md
@@ -158,7 +158,7 @@ Use [Fail2Ban]({{< relref "doc/usage/fail2ban-setup.en-us.md" >}}) to monitor an
## How to add/use custom themes
-Gitea supports two official themes right now, `gitea` and `arc-green` (`light` and `dark` respectively)
+Gitea supports three official themes right now, `gitea` (light), `arc-green` (dark), and `auto` (automatically switches between the previous two depending on operating system settings).
To add your own theme, currently the only way is to provide a complete theme (not just color overrides)
As an example, let's say our theme is `arc-blue` (this is a real theme, and can be found [in this issue](https://github.com/go-gitea/gitea/issues/6011))
diff --git a/modules/setting/setting.go b/modules/setting/setting.go
index b054f27c59f..f00ab242c3b 100644
--- a/modules/setting/setting.go
+++ b/modules/setting/setting.go
@@ -255,8 +255,8 @@ var (
ReactionMaxUserNum: 10,
ThemeColorMetaTag: `#6cc644`,
MaxDisplayFileSize: 8388608,
- DefaultTheme: `gitea`,
- Themes: []string{`gitea`, `arc-green`},
+ DefaultTheme: `auto`,
+ Themes: []string{`auto`, `gitea`, `arc-green`},
Reactions: []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`},
CustomEmojis: []string{`git`, `gitea`, `codeberg`, `gitlab`, `github`, `gogs`},
CustomEmojisMap: map[string]string{"git": ":git:", "gitea": ":gitea:", "codeberg": ":codeberg:", "gitlab": ":gitlab:", "github": ":github:", "gogs": ":gogs:"},
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index 58d0d6b39ec..b555650bc53 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -26,7 +26,13 @@ export function isObject(obj) {
// returns whether a dark theme is enabled
export function isDarkTheme() {
- return document.documentElement.classList.contains('theme-arc-green');
+ if (document.documentElement.classList.contains('theme-auto')) {
+ return window.matchMedia('(prefers-color-scheme: dark)').matches;
+ }
+ if (document.documentElement.classList.contains('theme-arc-green')) {
+ return true;
+ }
+ return false;
}
// removes duplicate elements in an array
diff --git a/web_src/less/themes/theme-auto.less b/web_src/less/themes/theme-auto.less
new file mode 100644
index 00000000000..f49e194e1d6
--- /dev/null
+++ b/web_src/less/themes/theme-auto.less
@@ -0,0 +1,3 @@
+@media (prefers-color-scheme: dark) {
+ @import "theme-arc-green.less";
+}