From 4e0cca3f7d9dd227df161e3548cc374c169d3dc6 Mon Sep 17 00:00:00 2001 From: Gwyneth Morgan 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 1d95b964b..42c45f0ea 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 f8a4dda4f..90a11ec65 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 7929f35c5..de9b794db 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 fe18a801f..040dcfd3e 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 953aa9f01..e9551bbb7 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 b054f27c5..f00ab242c 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 58d0d6b39..b555650bc 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 000000000..f49e194e1 --- /dev/null +++ b/web_src/less/themes/theme-auto.less @@ -0,0 +1,3 @@ +@media (prefers-color-scheme: dark) { + @import "theme-arc-green.less"; +}