From 4e0cca3f7d9dd227df161e3548cc374c169d3dc6 Mon Sep 17 00:00:00 2001 From: Gwyneth Morgan Date: Mon, 27 Sep 2021 07:47:44 -0700 Subject: 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 --- web_src/js/utils.js | 8 +++++++- web_src/less/themes/theme-auto.less | 3 +++ 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 web_src/less/themes/theme-auto.less (limited to 'web_src') diff --git a/web_src/js/utils.js b/web_src/js/utils.js index 58d0d6b39e..b555650bc5 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 0000000000..f49e194e1d --- /dev/null +++ b/web_src/less/themes/theme-auto.less @@ -0,0 +1,3 @@ +@media (prefers-color-scheme: dark) { + @import "theme-arc-green.less"; +} -- cgit v1.2.3