Extract ttheme as a ColorSchemeProvider

6 files changed, 37 insertions, 33 deletions

diff --git a/src/console/components/Theme.ts b/src/console/components/ColorSchemeProvider.tsx
index dd7baa5..bd63571 100644
--- a/src/console/components/Theme.ts
+++ b/src/console/components/ColorSchemeProvider.tsx
@@ -1,6 +1,9 @@
+import React from "react";
+import ColorScheme from "../../shared/ColorScheme";
+import { ThemeProvider } from "styled-components";
 import baseStyled, { ThemedStyledInterface } from "styled-components";
 
-type Theme = {
+type ThemeProperties = {
   completionTitleBackground: string;
   completionTitleForeground: string;
   completionItemBackground: string;
@@ -16,7 +19,7 @@ type Theme = {
   consoleInfoForeground: string;
 };
 
-export const LightTheme: Theme = {
+export const LightTheme: ThemeProperties = {
   completionTitleBackground: "lightgray",
   completionTitleForeground: "#000000",
   completionItemBackground: "#ffffff",
@@ -32,7 +35,7 @@ export const LightTheme: Theme = {
   consoleInfoForeground: "#018786",
 };
 
-export const DarkTheme: Theme = {
+export const DarkTheme: ThemeProperties = {
   completionTitleBackground: "#052027",
   completionTitleForeground: "white",
   completionItemBackground: "#2f474f",
@@ -48,6 +51,26 @@ export const DarkTheme: Theme = {
   consoleInfoForeground: "#ffffff",
 };
 
-const styled = baseStyled as ThemedStyledInterface<Theme>;
+interface Props extends React.HTMLAttributes<HTMLElement> {
+  colorscheme: ColorScheme;
+}
 
-export default styled;
+const ColorSchemeProvider: React.FC<Props> = ({ colorscheme, children }) => {
+  let theme = LightTheme;
+  if (colorscheme === ColorScheme.System) {
+    if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      theme = DarkTheme;
+    }
+  } else if (colorscheme === ColorScheme.Dark) {
+    theme = DarkTheme;
+  }
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+};
+
+export const styled = baseStyled as ThemedStyledInterface<ThemeProperties>;
+
+export default ColorSchemeProvider;
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index 3cccc43..fa91336 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -7,10 +7,7 @@ import CommandLineParser, {
   InputPhase,
 } from "../commandline/CommandLineParser";
 import { Command } from "../../shared/Command";
-import ColorScheme from "../../shared/ColorScheme";
-import { LightTheme, DarkTheme } from "./Theme";
-import styled from "./Theme";
-import { ThemeProvider } from "styled-components";
+import ColorSchemeProvider, { styled } from "./ColorSchemeProvider";
 import ConsoleFrameClient from "../clients/ConsoleFrameClient";
 import AppContext from "./AppContext";
 
@@ -180,25 +177,11 @@ const Console: React.FC = () => {
     }
   };
 
-  let theme = state.colorscheme;
-  if (state.colorscheme === ColorScheme.System) {
-    if (
-      window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches
-    ) {
-      theme = ColorScheme.Dark;
-    } else {
-      theme = ColorScheme.Light;
-    }
-  }
-
   switch (state.mode) {
     case "command":
     case "find":
       return (
-        <ThemeProvider
-          theme={theme === ColorScheme.Dark ? DarkTheme : LightTheme}
-        >
+        <ColorSchemeProvider colorscheme={state.colorscheme}>
           <ConsoleWrapper>
             <Completion
               size={COMPLETION_MAX_ITEMS}
@@ -213,16 +196,14 @@ const Console: React.FC = () => {
               value={state.consoleText}
             />
           </ConsoleWrapper>
-        </ThemeProvider>
+        </ColorSchemeProvider>
       );
     case "info":
     case "error":
       return (
-        <ThemeProvider
-          theme={theme === ColorScheme.Dark ? DarkTheme : LightTheme}
-        >
+        <ColorSchemeProvider colorscheme={state.colorscheme}>
           <Message mode={state.mode}>{state.messageText}</Message>
-        </ThemeProvider>
+        </ColorSchemeProvider>
       );
     default:
       return null;
diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx
index 2451d87..7313491 100644
--- a/src/console/components/console/CompletionItem.tsx
+++ b/src/console/components/console/CompletionItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "../Theme";
+import { styled } from "../ColorSchemeProvider";
 
 const Container = styled.li<{
   shown: boolean;
diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx
index 5594eb3..a8e8a54 100644
--- a/src/console/components/console/CompletionTitle.tsx
+++ b/src/console/components/console/CompletionTitle.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "../Theme";
+import { styled } from "../ColorSchemeProvider";
 
 const Li = styled.li<{ shown: boolean }>`
   display: ${({ shown }) => (shown ? "display" : "none")};
diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx
index bf48d75..1f56036 100644
--- a/src/console/components/console/Input.tsx
+++ b/src/console/components/console/Input.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "../Theme";
+import { styled } from "../ColorSchemeProvider";
 
 const Container = styled.div`
   background-color: ${({ theme }) => theme.commandBackground};
diff --git a/src/console/components/console/Message.tsx b/src/console/components/console/Message.tsx
index 73498fd..8dcdb5a 100644
--- a/src/console/components/console/Message.tsx
+++ b/src/console/components/console/Message.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "../Theme";
+import { styled } from "../ColorSchemeProvider";
 
 const Error = styled.p`
   border-top: 1px solid gray;