1 files changed, 31 insertions, 0 deletions
diff --git a/src/console/colorscheme/providers.tsx b/src/console/colorscheme/providers.tsx
new file mode 100644
index 0000000..810c8e0
--- /dev/null
+++ b/src/console/colorscheme/providers.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import ColorScheme from "../../shared/ColorScheme";
+import { DarkTheme, LightTheme } from "./theme";
+import { ColorSchemeContext, ColorSchemeUpdateContext } from "./contexts";
+import { ThemeProvider } from "styled-components";
+
+export const ColorSchemeProvider: React.FC = ({ children }) => {
+  const [colorscheme, setColorScheme] = React.useState(ColorScheme.System);
+  const theme = React.useMemo(() => {
+    if (colorscheme === ColorScheme.System) {
+      if (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        return DarkTheme;
+      }
+    } else if (colorscheme === ColorScheme.Dark) {
+      return DarkTheme;
+    }
+    return LightTheme;
+  }, [colorscheme]);
+
+  return (
+    <ColorSchemeContext.Provider value={colorscheme}>
+      <ColorSchemeUpdateContext.Provider value={setColorScheme}>
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      </ColorSchemeUpdateContext.Provider>
+    </ColorSchemeContext.Provider>
+  );
+};
+export default ColorSchemeProvider;