Merge pull request #209 from open-rpc/fix/dark-light-theme

add dark/light theme

src/App.tsx

@@ -13,7 +13,10 @@ import * as qs from "qs";
 import { OpenRPC } from "@open-rpc/meta-schema";
 import { IUISchema } from "./UISchema";
 import { SnackBar, ISnackBarNotification, NotificationType } from "./SnackBar/SnackBar";
+import { MuiThemeProvider } from "@material-ui/core/styles";
+import { lightTheme, darkTheme } from "./themes/openrpcTheme";
 import SplitPane from "react-split-pane";
+import { Paper, CssBaseline } from "@material-ui/core";
 
 interface IState {
   markers: any[];
@@ -49,6 +52,7 @@ export default class App extends React.Component<{}, IState> {
           "ui:logoUrl": "https://github.com/open-rpc/design/raw/master/icons/open-rpc-logo-noText/open-rpc-logo-noText%20(PNG)/128x128.png",
           /* tslint:enable */
           "ui:splitView": true,
+          "ui:darkMode": false,
           "ui:title": "OpenRPC Playground",
         },
         methods: {
@@ -109,14 +113,18 @@ export default class App extends React.Component<{}, IState> {
 
   public handleUrlChange = (event: any) => this.debouncedHandleUrlChange(event.target.value);
 
-  public handleUISchemaAppBarChange = (name: string) => (event: any) => {
+  public handleUISchemaAppBarChange = (name: string) => (value: any) => {
+    if (name === "ui:darkMode") {
+      monaco.editor.setTheme(value ? "vs-dark" : "vs");
+    }
+
     this.setState({
       ...this.state,
       uiSchema: {
         ...this.state.uiSchema,
         appBar: {
           ...this.state.uiSchema.appBar,
-          [name]: event.target.checked,
+          [name]: value,
         },
       },
     });
@@ -192,14 +200,16 @@ export default class App extends React.Component<{}, IState> {
 
   public render() {
     return (
-      <>
+      <MuiThemeProvider theme={this.state.uiSchema.appBar["ui:darkMode"] ? darkTheme : lightTheme}>
+        <CssBaseline />
         <AppBar
           uiSchema={this.state.uiSchema}
           onSplitViewChange={this.handleUISchemaAppBarChange("ui:splitView")}
+          onDarkModeChange={this.handleUISchemaAppBarChange("ui:darkMode")}
           onChangeUrl={this.handleUrlChange} />
         {this.getPlayground()}
         <SnackBar close={this.handleSnackbarClose} notification={this.state.notification} />
-      </>
+      </MuiThemeProvider>
     );
   }
 
@@ -214,6 +224,7 @@ export default class App extends React.Component<{}, IState> {
         <div key={1} style={{ display: "flex", flexDirection: "column", height: "100%" }} >
           <JSONValidationErrorList markers={this.state.markers} />
           <MonacoJSONEditor
+            uiSchema={this.state.uiSchema}
             onCreate={(editorInstance: monaco.editor.IStandaloneCodeEditor) => this.editorInstance = editorInstance}
             defaultValue={this.state.defaultValue}
             onChange={this.setMarkers.bind(this)} />
@@ -232,13 +243,13 @@ export default class App extends React.Component<{}, IState> {
   private getPlayground = () => {
     if (!this.state.uiSchema.appBar["ui:splitView"]) {
       return (
-        <div className="docs" key={2}>
+        <Paper className="docs" elevation={0} key={2}>
           <Documentation
             schema={this.state.parsedSchema as OpenRPC}
             uiSchema={this.state.uiSchema}
             reactJsonOptions={this.state.reactJsonOptions}
           />
-        </div>
+        </Paper>
       );
     } else {
       return this.getSplitPane();

src/AppBar/AppBar.tsx

@@ -4,40 +4,43 @@ import {
   Toolbar,
   Typography,
   Grid,
+  IconButton,
   Paper,
-  FormControlLabel,
-  Checkbox,
   InputBase,
   Theme,
   WithStyles,
   withStyles,
   Hidden,
 } from "@material-ui/core";
+import VerticalSplitIcon from "@material-ui/icons/VerticalSplit";
+import FullscreenIcon from "@material-ui/icons/Fullscreen";
+import WbSunnyIcon from "@material-ui/icons/WbSunny";
+import Brightness3Icon from "@material-ui/icons/Brightness3";
 import { IUISchema } from "../UISchema";
 
 const styles = (theme: Theme) => ({
   title: {
     marginLeft: theme.spacing.unit,
   },
   appBar: {
-    background: "white",
   },
 });
 
 interface IProps extends WithStyles<typeof styles> {
   uiSchema?: IUISchema;
   onChangeUrl?: any;
+  onDarkModeChange?: any;
   onSplitViewChange?: any;
 }
 
 class ApplicationBar extends Component<IProps> {
   public render() {
-    const { uiSchema, classes } = this.props;
+    const { uiSchema, classes, onSplitViewChange, onDarkModeChange } = this.props;
     return (
       <AppBar position="static" color="default" elevation={0} className={classes.appBar}>
         <Toolbar>
-          <Grid justify="space-evenly" alignItems="center" container spacing={24}>
-            <Grid item xs={6} sm={3} direction="row" justify="flex-start" container>
+          <Grid  alignItems="center" container spacing={24}>
+            <Grid item xs={6} sm={3} direction="row" container>
               {this.props.uiSchema && this.props.uiSchema.appBar && this.props.uiSchema.appBar["ui:logoUrl"] &&
                 <Grid>
                   <img
@@ -67,19 +70,21 @@ class ApplicationBar extends Component<IProps> {
                 </Paper>
               </Grid>
             </Hidden>
-            <Grid item xs={6} sm={2} alignItems="flex-end" container>
-              <FormControlLabel
-                style={{ marginLeft: "30px", height: "30px" }}
-                control={
-                  <Checkbox
-                    checked={this.props.uiSchema && !!this.props.uiSchema.appBar["ui:splitView"]}
-                    onChange={this.props.onSplitViewChange}
-                    value="splitView"
-                    color="primary"
-                  />
+            <Grid item xs={6} sm={2} container justify="flex-end">
+              <IconButton>
+                {uiSchema && uiSchema.appBar["ui:splitView"] ?
+                  <FullscreenIcon onClick={() => onSplitViewChange(false)} />
+                  :
+                  <VerticalSplitIcon onClick={() => onSplitViewChange(true)} />
+                }
+              </IconButton>
+              <IconButton>
+                {uiSchema && uiSchema.appBar["ui:darkMode"] ?
+                  <Brightness3Icon onClick={() => onDarkModeChange(false)} />
+                  :
+                  <WbSunnyIcon onClick={() => onDarkModeChange(true)} />
                 }
-                label="Split View"
-              />
+              </IconButton>
             </Grid>
           </Grid>
         </Toolbar>

src/MonacoJSONEditor.tsx

@@ -8,10 +8,12 @@ import * as monaco from "monaco-editor";
 import _ from "lodash";
 import { JSONSchema4 } from "json-schema";
 import schema from "@open-rpc/meta-schema";
+import { IUISchema } from "./UISchema";
 
 interface IProps {
   defaultValue?: string;
   onChangeMarkers?: any;
+  uiSchema: IUISchema;
   onCreate?: any;
   onChange?: any;
 }
@@ -79,7 +81,7 @@ export default class MonacoJSONEditor extends React.Component<IProps> {
         formatOnPaste: true,
         formatOnType: true,
       },
-      theme: "vs-dark",
+      theme: this.props.uiSchema.appBar["ui:darkMode"] ? "vs-dark" : "vs",
     };
 
     if (this.monaco && this.monaco.current) {

src/UISchema.tsx

@@ -4,6 +4,7 @@ export interface IUISchema {
     ["ui:logoUrl"]: string,
     ["ui:inputPlaceholder"]: string,
     ["ui:splitView"]: boolean,
+    ["ui:darkMode"]: boolean,
   };
   methods: {
     ["ui:defaultExpanded"]: boolean,

src/themes/openrpcTheme.ts

@@ -0,0 +1,41 @@
+import { createMuiTheme } from "@material-ui/core/styles";
+
+export const lightTheme = createMuiTheme({
+  overrides: {
+    MuiAppBar: {
+      root: {
+        background: "white !important",
+      },
+    },
+  },
+  palette: {
+
+  },
+});
+
+export const darkTheme = createMuiTheme({
+  palette: {
+    type: "dark",
+    background: {
+      default: "#212121",
+      paper: "black",
+    },
+  },
+  overrides: {
+    MuiTable: {
+      root: {
+        background: "transparent !important",
+      },
+    },
+    MuiTypography: {
+      root: {
+        color: "white",
+      },
+    },
+  },
+});
+
+export default {
+  darkTheme,
+  lightTheme,
+};