Merge pull request #6 from IllusiveBagel/feature/Themes

Feature/themes
IllusiveBagel · Nov 17, 2021 · 92dd906 · 92dd906
2 parents 22247c4 + 150c7b0
commit 92dd906
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 21 deletions.
diff --git a/src/Components/Layout.tsx b/src/Components/Layout.tsx
@@ -24,30 +24,50 @@ const darkTheme = createMuiTheme({
     },
 });
 
+const lightTheme = createMuiTheme({
+    palette: {
+        type: 'light',
+    },
+});
+
 interface ILayoutProps extends WithStyles<typeof styles> {
     Database: DBML;
 }
 
 interface ILayoutState {
-
+    darkTheme: boolean;
 }
 
 class Layout extends React.Component<ILayoutProps, ILayoutState> {
     static displayName = Layout.name;
 
     constructor(props: any) {
         super(props);
-        this.state={};
+        this.state={
+            darkTheme: window.matchMedia("(prefers-color-scheme: dark)").matches,
+        };
+    }
+
+    public setTheme() {
+        if (this.state.darkTheme) {
+            this.setState({
+                darkTheme: false
+            });
+        } else {
+            this.setState({
+                darkTheme: true
+            });
+        }
     }
 
     render() {
         const classes = this.props.classes;
 
         return (
-            <ThemeProvider theme={darkTheme}>
+            <ThemeProvider theme={this.state.darkTheme ? darkTheme : lightTheme}>
                 <div className={classes.root}>
                     <CssBaseline />
-                    <Navigation Database={this.props.Database} />
+                    <Navigation Database={this.props.Database} theme={this.state.darkTheme} setTheme={this.setTheme.bind(this)} />
                     <main className={classes.content}>
                         <div className={classes.toolbar} />
                         {this.props.children}

diff --git a/src/Components/Navigation.tsx b/src/Components/Navigation.tsx
@@ -25,7 +25,7 @@ import WebAssetIcon from "@material-ui/icons/WebAsset";
 import withStyles from "@material-ui/core/styles/withStyles";
 import { DBML } from "../Lib/Declarations";
 import { Link, RouteComponentProps, withRouter } from "react-router-dom";
-import { Link as MaterialLink } from "@material-ui/core";
+import { ButtonGroup, Link as MaterialLink } from "@material-ui/core";
 import { Theme, WithStyles } from "@material-ui/core/styles";
 import ListSubheader from "@material-ui/core/ListSubheader";
 
@@ -57,10 +57,14 @@ const styles = (theme: Theme) => createStyles({
 
 interface INavigationProps extends WithStyles<typeof styles>, RouteComponentProps {
     Database: DBML;
+    theme: boolean;
+    setTheme: any;
 }
 
 interface INavigationState {
     Search: string;
+    ThemeMenu: boolean;
+    ThemeMenuEl: any;
     ExportMenu: boolean;
     ExportMenuEl: any;
 }
@@ -72,6 +76,8 @@ class Navigation extends React.Component<INavigationProps, INavigationState> {
         super(props);
         this.state={
             Search: "",
+            ThemeMenu: false,
+            ThemeMenuEl: null,
             ExportMenu: false,
             ExportMenuEl: null,
         };
@@ -110,18 +116,25 @@ class Navigation extends React.Component<INavigationProps, INavigationState> {
                                 </IconButton>
                                 {this.props.Database.Project}
                             </Typography>
-                        <Button
-                            variant="outlined"
-                            endIcon={<ExpandMoreIcon />}
-                            onClick={(event) => {
-                                this.setState({
-                                    ExportMenu: true,
-                                    ExportMenuEl: event.target
-                                })
-                            }}
-                        >
-                            Export
-                        </Button>
+                        <ButtonGroup variant="outlined" aria-label="Simple Interaction buttons">
+                            <Button variant="outlined" onClick={this.props.setTheme}>
+                                {this.props.theme? 'Theme: Dark': 'Theme: Light'}
+                            </Button>
+                            <Button
+                                variant="outlined"
+                                endIcon={<ExpandMoreIcon />}
+                                onClick={(event) => {
+                                    this.setState({
+                                        ExportMenu: true,
+                                        ExportMenuEl: event.target
+                                    })
+                                }}
+                            >
+                                Export
+                            </Button>
+                        </ButtonGroup>
+
+
                         <Menu
                             open={this.state.ExportMenu}
                             anchorEl={this.state.ExportMenuEl}
@@ -133,9 +146,7 @@ class Navigation extends React.Component<INavigationProps, INavigationState> {
                                 })
                             }}
                         >
-                            <MenuItem
-
-                            >
+                            <MenuItem>
                                 <StorageIcon className={classes.menuIcon} />
                                 <MaterialLink
                                     href={`/Database/${this.props.Database.Project}.dbml`}
@@ -145,7 +156,6 @@ class Navigation extends React.Component<INavigationProps, INavigationState> {
                                 >
                                     DBML
                                 </MaterialLink>
-
                             </MenuItem>
                             <MenuItem>
                                 <CodeIcon className={classes.menuIcon} />