setup a dark mode

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

Hide file tree

Showing 5 changed files with 70 additions and 14 deletions.
diff --git a/example/src/index.html b/example/src/index.html
@@ -5,6 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>React Playground example</title>
+    <style>
+      body {
+        background: #212121;
+        color: #fff;
+      }
+    </style>
   </head>
 
   <body>

diff --git a/example/src/index.js b/example/src/index.js
@@ -23,8 +23,7 @@ render(app, document.getElementById('app'));
         initialSnippet={snippet}
         defaultEditorTab="javascript"
         defaultResultTab="console"
-        transformJs
-        presets={["react"]}
+        mode="dark"
       />
     </Fragment>
   );

diff --git a/playground/src/Result/ErrorDisplay.tsx b/playground/src/Result/ErrorDisplay.tsx
@@ -8,6 +8,7 @@ const Container = styled.div`
   position: absolute;
   width: 100%;
   bottom: 0;
+  box-sizing: border-box;
 `;
 
 interface IProps {

diff --git a/playground/src/TabStyles.tsx b/playground/src/TabStyles.tsx
@@ -17,6 +17,7 @@ export const StyledTabs = styled(Tabs)`
 export const StyledTabList = styled(TabList)`
   border-bottom: ${props => props.theme.tabs.tabHeader.borderBottom};
   padding: 0 0.8em;
+  background-color: ${props => props.theme.tabs.tabHeader.panelBackground || 'transparent'};
 `;
 
 export const StyledTab = styled(Tab)`
@@ -25,6 +26,7 @@ export const StyledTab = styled(Tab)`
   padding: 0.8em 0.5em;
   margin: 0 0.2em;
   cursor: pointer;
+  color: ${props => props.theme.tabs.tabHeader.color};
 
   &[data-selected] {
     border-bottom: ${props => props.theme.tabs.selectedTab.borderBottom};

diff --git a/playground/src/utils/theme.ts b/playground/src/utils/theme.ts
@@ -1,16 +1,61 @@
-import { DefaultTheme } from "styled-components";
 import { merge } from "lodash-es";
 
 const lightModeColors = {
   container: {
     borderColor: "rgba(0, 0, 0, 0.3)",
-  }
+  },
+  error: {
+    background: "#e74c3c",
+    color: "#ffffff",
+  },
+  console: {
+    background: "rgba(0, 0, 0, 1)",
+  },
+  divider: {
+    background: "#202020",
+  },
+  editor: {
+    backgroundColor: `#000000`,
+    color: `#ffffff`,
+  },
+  tabs: {
+    tabHeader: {
+      background: 'transparent',
+      color: `#000000`,
+      borderBottom: `0.1em solid rgba(0, 0, 0, 0.1)`,
+    },
+  },
 }
 
 const darkModeColors = {
   container: {
-    borderColor: "#ffffff",
-  }
+    borderColor: "rgba(255, 255, 255, 0.4)",
+  },
+  error: {
+    background: "#e74c3c",
+    color: "#ffffff",
+  },
+  console: {
+    background: "rgba(0, 0, 0, 1)",
+  },
+  divider: {
+    background: "rgba(255, 255, 255, 0.5)",
+  },
+  editor: {
+    backgroundColor: `#000000`,
+    color: `#ffffff`,
+  },
+  tabs: {
+    tabHeader: {
+      background: `rgba(1, 21, 21, 0.8)`,
+      panelBackground: `rgb(1, 21, 21)`,
+      color: `#ffffff`,
+      borderBottom: `0.1em solid rgba(255, 255, 255, 0.4)`,
+    },
+    selectedTab: {
+      borderBottom: "0.2em solid rgb(255, 255, 255)",
+    },
+  },
 }
 
 export const theme = {
@@ -20,31 +65,34 @@ export const theme = {
     minWidth: "20em",
   },
   error: {
-    background: "#e74c3c",
-    color: "#ffffff",
+    background: "",
+    color: "",
   },
   console: {
     background: "rgba(0, 0, 0, 1)",
   },
   divider: {
     width: 2,
-    background: "#202020",
+    background: "",
   },
   editor: {
     fontFamily: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,
-    backgroundColor: `#000000`,
-    color: `#ffffff`,
+    backgroundColor: ``,
+    color: ``,
   },
   tabs: {
     tabHeader: {
-      borderBottom: "0.1em solid rgba(0, 0, 0, 0.1)",
-      background: `transparent`,
+      borderBottom: "",
+      panelBackground: "",
+      background: "",
+      color: '',
     },
     tabPanel: {
       phoneHeight: "10em",
     },
     selectedTab: {
-      borderBottom: "0.1em solid rgb(0, 0, 0)",
+      background: '',
+      borderBottom: "0.2em solid rgb(0, 0, 0)",
     },
   },
 };