darkmode added

package-lock.json

@@ -14,6 +14,7 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
+        "react-switch": "^6.0.0",
         "styled-components": "^5.3.3",
         "web-vitals": "^1.1.2"
       }
@@ -16409,6 +16410,18 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/react-switch": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-6.0.0.tgz",
+      "integrity": "sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -33996,6 +34009,14 @@
         }
       }
     },
+    "react-switch": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-6.0.0.tgz",
+      "integrity": "sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "react-switch": "^6.0.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.1.2"
   },

src/assets/icons/moon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#efcc00;}</style></defs><title/><path class="cls-1" d="M44.54,41.47A23,23,0,0,1,24.49,11.73,1,1,0,0,0,23,10.59,23,23,0,1,0,54.41,42a1,1,0,0,0-1.14-1.47A23.06,23.06,0,0,1,44.54,41.47Z"/></svg>

src/assets/icons/sun.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}</style></defs><title/><circle class="cls-1" cx="32" cy="32" r="17"/><line class="cls-2" x1="32" x2="32" y1="5" y2="11"/><line class="cls-2" x1="32" x2="32" y1="53" y2="59"/><line class="cls-2" x1="59" x2="53" y1="32" y2="32"/><line class="cls-2" x1="11" x2="5" y1="32" y2="32"/><line class="cls-2" x1="51.09" x2="46.85" y1="12.91" y2="17.15"/><line class="cls-2" x1="17.15" x2="12.91" y1="46.85" y2="51.09"/><line class="cls-2" x1="51.09" x2="46.85" y1="51.09" y2="46.85"/><line class="cls-2" x1="17.15" x2="12.91" y1="17.15" y2="12.91"/></svg>

src/components/settings.jsx

@@ -1,19 +1,83 @@
 import { Component, Fragment } from "react"
-import { InfosWrapper, PopupContainer, PopupTitle, Cross, Button } from "../styled"
+import { InfosWrapper, PopupContainer, PopupTitle, Cross, Button, IconWrapper } from "../styled"
 import API from '../utils/API'
 import bytesToString from "../utils/bytestring"
 import secondsToTimeString from "../utils/timestring"
+import Switch from 'react-switch'
+
+import Moon from '../assets/icons/moon.svg'
+import Sun from '../assets/icons/sun.svg'
 
 class Settings extends Component {
   constructor() {
     super()
     this.state = {
       settings: {},
-      show: false
+      show: false,
+      darkTheme: false
+    }
+
+    this.lightThemeStyle = {}
+
+    this.darkThemeStyle = {
+      "--background-color": "#000",
+      "--popup-background": "#222",
+      "--popup-header": "#333",
+      "--box-gradient": "linear-gradient(#71caf220, #3f79ad33)",
+      "--status-red": "linear-gradient(#f56565aa, #c92222)",
+      "--status-green": "linear-gradient(#95ee85aa, #3c891c)",
+      "--text-color": "#fff",
+      "--button-color": "#111",
+      "--button-hover": "#181818"
     }
   }
 
-  componentDidMount = () => this.fetchSettings()
+  componentDidMount = () => {
+    this.fetchSettings()
+
+    let darkTheme = localStorage.getItem("darkTheme") || false
+    if (darkTheme === "false") darkTheme = false
+    if (darkTheme === "true") darkTheme = true
+
+    this.setState({ darkTheme })
+    console.log({darkTheme})
+
+    this.htmlEl = document.documentElement
+
+    Object.keys(this.darkThemeStyle).forEach(k => {
+      this.lightThemeStyle[k] = this.htmlEl.style.getPropertyValue(k)
+    })
+
+    if (darkTheme) {
+      this.switchTheme(true)
+    }
+
+    setTimeout(() => {
+      this.htmlEl.style.setProperty("display", "block")
+      this.htmlEl.style.setProperty("transition", "background-color .3s, color .3s")
+    }, 100)
+  }
+
+  switchTheme = checked => {
+    this.setState({ darkTheme: checked })
+    localStorage.setItem("darkTheme", checked)
+
+    console.log({checked})
+
+    if (checked) {
+      Object.keys(this.darkThemeStyle).forEach(k => {
+        const v = this.darkThemeStyle[k]
+
+        this.htmlEl.style.setProperty(k, v)
+      })
+    } else {
+      Object.keys(this.lightThemeStyle).forEach(k => {
+        const v = this.lightThemeStyle[k]
+
+        this.htmlEl.style.setProperty(k, v)
+      })
+    }
+  }
 
   fetchSettings = () => {
     return new Promise((resolve) => {
@@ -52,7 +116,7 @@ class Settings extends Component {
   }
 
   render =  () => {
-    const { settings, show } = this.state
+    const { settings, show, darkTheme } = this.state
 
     return (
       <Fragment>
@@ -64,6 +128,24 @@ class Settings extends Component {
 
         <InfosWrapper>
           <h2> Settings </h2>
+          <p> Theme </p>
+          <Switch
+            checked={darkTheme}
+            onColor="#333"
+            offColor="#ffffff"
+            onHandleColor="#585858"
+            offHandleColor="#efcc00"
+            // height={28}
+            width={50}
+            handleDiameter={22}
+            activeBoxShadow="unset"
+            uncheckedIcon={false}
+            checkedIcon={false}
+            checkedHandleIcon={<IconWrapper><img src={Moon} alt="sun" height="20" width="20" /></IconWrapper>}
+            uncheckedHandleIcon={<IconWrapper><img src={Sun} alt="sun" height="20" width="20" /></IconWrapper>}
+            onChange={this.switchTheme}
+          />
+
           <p> Cache max size </p>
           <p> { bytesToString(settings?.vfs?.CacheMaxSize, {}) } </p>
 

src/index.css

@@ -1,16 +1,26 @@
 html {
-  --background-color: #eeeeee;
+  --background-color: #eee;
+  --popup-background: #ddd;
+  --popup-header: #ccc;
   --primary-color: #3f79ad;
   --secondary-color: #71caf2;
   --primary-color-trans: #3f79ad33;
   --secondary-color-trans: #71caf233;
+  --text-color: #000;
 
   --box-gradient: linear-gradient(#71caf220, #3f79ad33);
 
   --status-red: linear-gradient(#fd4444aa, #c92222);
   --status-green: linear-gradient(#3bc322aa, #3c891c);
 
+  --button-color: #eee;
+  --button-hover: #ddd;
+
   scroll-behavior: smooth;
+  display: none;
+
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
 body {
@@ -19,8 +29,6 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  background-color: var(--background-color);
 }
 
 * {

src/styled.js

@@ -181,13 +181,13 @@ export const InfosWrapper = styled.div`
 export const Button = styled.div`
   padding: .5rem 1rem;
   text-align: center;
-  background-color: #eee;
+  background-color: var(--button-color);
   border-radius: .2rem;
   transition: background-color .3s;
   cursor: pointer;
 
   :hover {
-    background-color: #ddd;
+    background-color: var(--button-hover);
   }
 `
 
@@ -203,7 +203,7 @@ export const PopupContainer = styled.div`
   width: 80vw;
   left: 10vw;
   height: 94vh;
-  background-color: #dddddd;
+  background-color: var(--popup-background);
   padding: 1rem 2rem;
   overflow-y: auto;
   z-index: 999;
@@ -230,7 +230,7 @@ export const PopupTitle = styled.p`
   font-size: 2rem;
   text-align: center;
   font-weight: 600;
-  background-color: #cccccc;
+  background-color: var(--popup-header);
   position: fixed;
   transform: translateX(-50%);
   left: 50%;
@@ -253,4 +253,11 @@ export const Cross = styled.div`
   @media only screen and (max-width: 800px) {
     right: 5vw;
   }
+`
+
+export const IconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
 `