add dark and light theme colors

agneym · Mar 1, 2020 · a56c4c7 · a56c4c7
1 parent 49eed08
commit a56c4c7
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 10 deletions.
diff --git a/playground/package.json b/playground/package.json
@@ -42,6 +42,7 @@
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.4.1",
     "@types/jest": "^25.1.3",
+    "@types/lodash": "^4.14.149",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
     "@types/react-inspector": "^4.0.0",
@@ -57,6 +58,8 @@
     "@agney/react-inspector": "^4.0.0",
     "@reach/auto-id": "^0.8.5",
     "@reach/tabs": "^0.8.5",
+    "@types/lodash-es": "^4.17.3",
+    "lodash-es": "^4.17.15",
     "prism-react-renderer": "^1.0.2",
     "react-simple-code-editor": "^0.11.0"
   },

diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx
@@ -1,16 +1,16 @@
-import React, { FC, useState } from "react";
+import React, { FC, useState, useEffect } from "react";
 import styled, { ThemeProvider, DefaultTheme } from "styled-components";
 import { useId } from "@reach/auto-id";
 
 import Editor from "./Editor";
 import Result from "./Result";
 import { ISnippet, IEditorTabs, IResultTabs } from "./types";
-import ourTheme from "./utils/theme";
+import getTheme, { ColorMode, theme as ourTheme } from "./utils/theme";
 import media from "./utils/media";
 import Draggable from "./Draggable";
 
 const StyledDraggable = styled(Draggable)`
-  border: ${props => props.theme.container.border};
+  border: 0.1em solid ${props => props.theme.container.borderColor};
   display: flex;
   min-height: ${props => props.theme.container.minHeight};
 
@@ -27,6 +27,7 @@ interface IProps {
   presets?: string[];
   id?: string;
   theme?: DefaultTheme;
+  mode: ColorMode;
 }
 
 const Playground: FC<IProps> = ({
@@ -36,10 +37,12 @@ const Playground: FC<IProps> = ({
   defaultResultTab = "result",
   transformJs = false,
   presets = [],
-  theme = ourTheme,
+  theme,
+  mode = "light",
 }) => {
   const [snippet, setSnippet] = useState<ISnippet>(initialSnippet);
   const id = useId(userId) as string;
+  const [consolidatedTheme, setConsolidatedTheme] = useState<DefaultTheme>(ourTheme);
 
   const onSnippetChange = (changed: string, type: IEditorTabs) => {
     setSnippet(snippet => ({
@@ -48,8 +51,12 @@ const Playground: FC<IProps> = ({
     }));
   };
 
+  useEffect(() => {
+    setConsolidatedTheme(getTheme(mode));
+  }, [mode]);
+
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={theme || consolidatedTheme}>
       <div className="playground">
         <StyledDraggable
           leftChild={width => (

diff --git a/playground/src/TabStyles.tsx b/playground/src/TabStyles.tsx
@@ -20,7 +20,7 @@ export const StyledTabList = styled(TabList)`
 `;
 
 export const StyledTab = styled(Tab)`
-  background-color: transparent;
+  background-color: ${props => props.theme.tabs.tabHeader.background};
   border: none;
   padding: 0.8em 0.5em;
   margin: 0 0.2em;

diff --git a/playground/src/types/styled-components.d.ts b/playground/src/types/styled-components.d.ts
@@ -1,6 +1,6 @@
 import "styled-components";
 
-import theme from "../utils/theme";
+import { theme } from "../utils/theme";
 
 declare module "styled-components" {
   type Theme = typeof theme;

diff --git a/playground/src/utils/theme.ts b/playground/src/utils/theme.ts
@@ -1,8 +1,21 @@
 import { DefaultTheme } from "styled-components";
+import { merge } from "lodash-es";
 
-const theme: DefaultTheme = {
+const lightModeColors = {
   container: {
-    border: "0.1em solid rgba(0, 0, 0, 0.3)",
+    borderColor: "rgba(0, 0, 0, 0.3)",
+  }
+}
+
+const darkModeColors = {
+  container: {
+    borderColor: "#ffffff",
+  }
+}
+
+export const theme = {
+  container: {
+    borderColor: "",
     minHeight: "20em",
     minWidth: "20em",
   },
@@ -25,6 +38,7 @@ const theme: DefaultTheme = {
   tabs: {
     tabHeader: {
       borderBottom: "0.1em solid rgba(0, 0, 0, 0.1)",
+      background: `transparent`,
     },
     tabPanel: {
       phoneHeight: "10em",
@@ -35,4 +49,13 @@ const theme: DefaultTheme = {
   },
 };
 
-export default theme;
+export type ColorMode = "light" | "dark"
+
+/**
+ * Get corresponding theme.
+ * @param mode color theme type
+ */
+export default function getTheme(mode: ColorMode = "light") {
+  const colorTheme = mode === "light" ? lightModeColors : darkModeColors;
+  return merge(theme, colorTheme);
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2033,6 +2033,18 @@
     jest-diff "^25.1.0"
     pretty-format "^25.1.0"
 
+"@types/lodash-es@^4.17.3":
+  version "4.17.3"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.3.tgz#87eb0b3673b076b8ee655f1890260a136af09a2d"
+  integrity sha512-iHI0i7ZAL1qepz1Y7f3EKg/zUMDwDfTzitx+AlHhJJvXwenP682ZyGbgPSc5Ej3eEAKVbNWKFuwOadCj5vBbYQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.149":
+  version "4.14.149"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
+  integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
+
 "@types/minimatch@*", "@types/minimatch@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -6736,6 +6748,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.15:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"