From b8d95961d1f7c44ef877dee85aa1c6230861aa83 Mon Sep 17 00:00:00 2001
From: IllusiveBagel <logan@neutral.systems>
Date: Wed, 17 Nov 2021 11:36:37 +0000
Subject: [PATCH 1/2] Added Theme switching button

---
 src/Components/Layout.tsx     | 28 ++++++++++++++++++----
 src/Components/Navigation.tsx | 44 +++++++++++++++++++++--------------
 2 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/src/Components/Layout.tsx b/src/Components/Layout.tsx
index 655e502..d20dbc3 100644
--- a/src/Components/Layout.tsx
+++ b/src/Components/Layout.tsx
@@ -24,12 +24,18 @@ 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> {
@@ -37,17 +43,31 @@ class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
     constructor(props: any) {
         super(props);
-        this.state={};
+        this.state={
+            darkTheme: true,
+        };
+    }
+
+    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
index 1513302..52ff180 100644
--- 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} />

From 150c7b09b485b31744e70df5ae2ae58c2895ac4e Mon Sep 17 00:00:00 2001
From: IllusiveBagel <logan@neutral.systems>
Date: Wed, 17 Nov 2021 11:40:50 +0000
Subject: [PATCH 2/2] Added check for system preference

---
 src/Components/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/Layout.tsx b/src/Components/Layout.tsx
index d20dbc3..99ac987 100644
--- a/src/Components/Layout.tsx
+++ b/src/Components/Layout.tsx
@@ -44,7 +44,7 @@ class Layout extends React.Component<ILayoutProps, ILayoutState> {
     constructor(props: any) {
         super(props);
         this.state={
-            darkTheme: true,
+            darkTheme: window.matchMedia("(prefers-color-scheme: dark)").matches,
         };
     }