Extract ttheme as a ColorSchemeProvider

1 files changed, 76 insertions, 0 deletions

diff --git a/src/console/components/ColorSchemeProvider.tsx b/src/console/components/ColorSchemeProvider.tsx
new file mode 100644
index 0000000..bd63571
--- /dev/null
+++ b/src/console/components/ColorSchemeProvider.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import ColorScheme from "../../shared/ColorScheme";
+import { ThemeProvider } from "styled-components";
+import baseStyled, { ThemedStyledInterface } from "styled-components";
+
+type ThemeProperties = {
+  completionTitleBackground: string;
+  completionTitleForeground: string;
+  completionItemBackground: string;
+  completionItemForeground: string;
+  completionItemDescriptionForeground: string;
+  completionSelectedBackground: string;
+  completionSelectedForeground: string;
+  commandBackground: string;
+  commandForeground: string;
+  consoleErrorBackground: string;
+  consoleErrorForeground: string;
+  consoleInfoBackground: string;
+  consoleInfoForeground: string;
+};
+
+export const LightTheme: ThemeProperties = {
+  completionTitleBackground: "lightgray",
+  completionTitleForeground: "#000000",
+  completionItemBackground: "#ffffff",
+  completionItemForeground: "#000000",
+  completionItemDescriptionForeground: "#008000",
+  completionSelectedBackground: "#ffff00",
+  completionSelectedForeground: "#000000",
+  commandBackground: "#ffffff",
+  commandForeground: "#000000",
+  consoleErrorBackground: "#ff0000",
+  consoleErrorForeground: "#ffffff",
+  consoleInfoBackground: "#ffffff",
+  consoleInfoForeground: "#018786",
+};
+
+export const DarkTheme: ThemeProperties = {
+  completionTitleBackground: "#052027",
+  completionTitleForeground: "white",
+  completionItemBackground: "#2f474f",
+  completionItemForeground: "white",
+  completionItemDescriptionForeground: "#86fab0",
+  completionSelectedBackground: "#eeff41",
+  completionSelectedForeground: "#000000",
+  commandBackground: "#052027",
+  commandForeground: "white",
+  consoleErrorBackground: "red",
+  consoleErrorForeground: "white",
+  consoleInfoBackground: "#052027",
+  consoleInfoForeground: "#ffffff",
+};
+
+interface Props extends React.HTMLAttributes<HTMLElement> {
+  colorscheme: ColorScheme;
+}
+
+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;