Darkmode managed ; simplier ColorDemo

frontend/src/components/settings/ColorDemo.js

@@ -17,7 +17,7 @@ const styles = theme => ({
   },
   appFrame: {
     position: 'relative',
-    height: 390,
+    height: 200,
     backgroundColor: theme.palette.background.paper,
   },
   statusBar: {
@@ -42,35 +42,14 @@ const styles = theme => ({
 });
 
 function ColorDemo(props) {
-  const { classes, data, theme } = props;
-  const primary = {
-    main: data.primary,
-    output:
-      data.primaryShade === 4
-        ? `${data.primaryHue}`
-        : `{
-      main: '${data.primary}',
-    }`,
-  };
-  const secondary = {
-    main: data.secondary,
-    output:
-      data.secondaryShade === 11
-        ? `${data.secondaryHue}`
-        : `{
-      main: '${data.secondary}',
-    }`,
-  };
-
-  theme.palette.augmentColor(primary);
-  theme.palette.augmentColor(secondary);
+  const { classes } = props;
 
   return (
     <div className={classes.root}>
       <div className={classes.appFrame}>
-        <div className={classes.statusBar} style={{ backgroundColor: primary.dark }} />
-        <AppBar position="static" style={{ backgroundColor: primary.main }}>
-          <Toolbar style={{ color: primary.contrastText }}>
+        <div className={classes.statusBar} />
+        <AppBar position="static" >
+          <Toolbar >
             <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
               <MenuIcon />
             </IconButton>
@@ -79,20 +58,8 @@ function ColorDemo(props) {
             </Typography>
           </Toolbar>
         </AppBar>
-        {/* <MarkdownElement
-          dir="ltr"
-          className={classes.code}
-          text={`\`\`\`jsx
-{
-  palette: {
-    primary: ${primary.output},
-    secondary: ${secondary.output},
-  },
-}
-\`\`\``}
-        /> */}
-        <Button variant="fab" className={classes.fab} style={{ backgroundColor: secondary.main }}>
-          <AddIcon nativeColor={secondary.contrastText} />
+        <Button variant="fab" className={classes.fab}  color="secondary" >
+          <AddIcon />
         </Button>
       </div>
     </div>
@@ -101,7 +68,6 @@ function ColorDemo(props) {
 
 ColorDemo.propTypes = {
   classes: PropTypes.object.isRequired,
-  data: PropTypes.object.isRequired,
   theme: PropTypes.object.isRequired,
 };
 

frontend/src/components/settings/ColorTools.js

-// Taken from https://github.com/mui-org/material-ui/blob/master/docs/src/pages/style/color/ColorTool.js
+// Inspired by from https://github.com/mui-org/material-ui/blob/master/docs/src/pages/style/color/ColorTool.js
 // MIT Licence and modified
 
 import React from 'react';
@@ -20,6 +20,12 @@ import { capitalize } from '@material-ui/core/utils/helpers';
 // import actionTypes from 'docs/src/modules/redux/actionTypes';
 import ColorDemo from './ColorDemo';
 import { saveAppTheme, saveAppColorPicker } from '../../actions/theme';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
+
 
 const hues = Object.keys(colors).slice(1, 17);
 const shades = [900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 'A700', 'A400', 'A200', 'A100'];
@@ -67,8 +73,8 @@ class ColorTool extends React.Component {
   componentWillUnmount() {
     this.props.saveColorPicker(this.state);
   }
-  componentDidMount(){
-    if (JSON.stringify(this.props.state) != JSON.stringify(this.state)){
+  componentDidMount() {
+    if (JSON.stringify(this.props.state) != JSON.stringify(this.state)) {
       this.setState(this.props.state);
     }
   }
@@ -117,6 +123,12 @@ class ColorTool extends React.Component {
     });
   };
 
+  handleChangeNightMode() {
+    this.setState({
+      darkModeActivated: !this.state.darkModeActivated
+    })
+  }
+
   handleChangeDocsColors = () => {
     this.props.saveTheme(this.getThemeFromState());
   };
@@ -126,6 +138,7 @@ class ColorTool extends React.Component {
       palette: {
         primary: { main: this.state.primary },
         secondary: { main: this.state.secondary },
+        type: this.state.darkModeActivated ? 'dark' : 'light'
       },
     }
   }
@@ -229,18 +242,34 @@ class ColorTool extends React.Component {
     }
     const hasChanges = JSON.stringify(tmp) != JSON.stringify(this.getThemeFromState());
     return (
+
       <Grid container spacing={40} className={classes.root}>
+        <Grid item xs={12}>
+          <FormControlLabel
+            labelPlacement='start'
+            label={this.state.darkModeActivated ? 'Désactiver le mode nuit :' : 'Activer le monde nuit : '}
+            control={
+              <Switch
+                checked={this.state.darkModeActivated}
+                onChange={() => this.handleChangeNightMode()}
+                value="Nimportequoi"
+              />
+            }
+          />
+        </Grid>
         {colorPicker('primary')}
         {colorPicker('secondary')}
         <Grid item xs={12} sm={6} md={4}>
-          <ColorDemo data={this.state} />
+          <MuiThemeProvider theme={createMuiTheme(this.getThemeFromState())}>
+            <ColorDemo />
+          </MuiThemeProvider >
         </Grid>
-        <Grid item xs={3}>
+        <Grid item xs={6}>
           <Button variant="contained" color="secondary" disabled={!hasChanges} onClick={this.handleChangeDocsColors}>
             Appliquer à tout le site
           </Button>
         </Grid>
-        <Grid item xs={3}>
+        <Grid item xs={6}>
 
           <Button variant="contained" color="primary" disabled={true} onClick={console.log("click")}>
             Sauvegarder

frontend/src/reducers/theme.js

@@ -29,7 +29,7 @@ const defaultColorPicker = {
   secondaryHue: 'pink',
   primaryShade: 4,
   secondaryShade: 11,
-  applied: false,
+  darkModeActivated: defaultTheme.palette.type == 'dark'
 };
 
 export function saveAppColorPicker(state = defaultColorPicker, action) {