diff --git a/example/src/index.html b/example/src/index.html
index 370948a..197a96d 100644
--- a/example/src/index.html
+++ b/example/src/index.html
@@ -5,6 +5,12 @@
React Playground example
+
diff --git a/example/src/index.js b/example/src/index.js
index a82b970..f932dfe 100644
--- 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"
/>
);
diff --git a/playground/src/Result/ErrorDisplay.tsx b/playground/src/Result/ErrorDisplay.tsx
index 18657e0..df33b0f 100644
--- 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
index 0808ea9..11cbaee 100644
--- 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
index 646e520..9f4e1d6 100644
--- 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)",
},
},
};