Merge "web: add dark mode and theme selection"

1 files changed, 27 insertions, 1 deletions

diff --git a/web/src/Misc.jsx b/web/src/Misc.jsx
index dae5a84bf..1186f42d3 100644
--- a/web/src/Misc.jsx
+++ b/web/src/Misc.jsx
@@ -120,4 +120,30 @@ IconProperty.propTypes = {
 const ConditionalWrapper = ({ condition, wrapper, children }) =>
   condition ? wrapper(children) : children
 
-export { IconProperty, removeHash, ExternalLink, buildExternalLink, buildExternalTableLink, ConditionalWrapper }
+function resolveDarkMode(theme) {
+  let darkMode = false
+
+  if (theme === 'Auto') {
+    let matchMedia = window.matchMedia || function () {
+      return {
+        matches: false,
+      }
+    }
+
+    darkMode = matchMedia('(prefers-color-scheme: dark)').matches
+  } else if (theme === 'Dark') {
+    darkMode = true
+  }
+
+  return darkMode
+}
+
+function setDarkMode(darkMode) {
+  if (darkMode) {
+    document.documentElement.classList.add('pf-theme-dark')
+  } else {
+    document.documentElement.classList.remove('pf-theme-dark')
+  }
+}
+
+export { IconProperty, removeHash, ExternalLink, buildExternalLink, buildExternalTableLink, ConditionalWrapper, resolveDarkMode, setDarkMode }