Merge pull request #122 from NucleoidJS/dark-theme

Dark Theme Integration

package.json

@@ -23,7 +23,7 @@
     "@mui/x-data-grid": "^5.5.0",
     "@nucleoidjs/components": "^1.2.0",
     "@nucleoidjs/synapses": "^1.0.8",
-    "@nucleoidjs/webstorage": "^1.0.2",
+    "@nucleoidjs/webstorage": "^1.0.3",
     "@types/react": "^17.0.2",
     "axios": "^0.27.2",
     "axios-auth-refresh": "^3.3.1",

public/loading.css

@@ -26,7 +26,7 @@ body {
   font-family: Roboto, sans-serif;
   font-size: 2rem;
   height: 100%;
-  background-color: #323a40;
+  background-color: #343a43;
   align-items: center;
   display: flex;
   display: -webkit-flex;

src/App.jsx

@@ -9,7 +9,7 @@ import { contextReducer } from "./context/reducer";
 import { contextToMap } from "./utils/Parser";
 import routes from "./routes";
 import { subscribe } from "@nucleoidjs/synapses";
-import theme from "./theme";
+import { useStorage } from "@nucleoidjs/webstorage";
 import vfs from "./vfs";
 
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
@@ -18,8 +18,19 @@ import {
   StyledEngineProvider,
   ThemeProvider,
 } from "@mui/material";
+import { darkTheme, lightTheme } from "./theme";
 
 function App() {
+  const prefersLightMode = window.matchMedia(
+    "(prefers-color-scheme: light)"
+  ).matches;
+
+  const [theme] = useStorage(
+    "platform",
+    "theme",
+    prefersLightMode ? "light" : "dark"
+  );
+
   const progressElement = document.getElementById("nuc-progress-indicator");
 
   function checkMobileSize() {
@@ -145,7 +156,7 @@ function App() {
 
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
         <CssBaseline />
         <BrowserRouter basename="ide">
           <ContextProvider state={context} reducer={contextReducer}>

src/components/ClosableDialogTitle/ClosableDialogTitle.jsx

@@ -1,9 +1,11 @@
 import CloseIcon from "@mui/icons-material/Close";
 import styles from "./styles";
-import theme from "../../theme";
+import { useTheme } from "@mui/material/styles";
+
 import { DialogTitle, Grid, IconButton, Typography } from "@mui/material";
 
 function ClosableDialogTitle({ handleClose, label, content, grey }) {
+  const theme = useTheme();
   return (
     <DialogTitle sx={styles.dialogTitle}>
       <Grid container sx={styles.content}>

src/components/LandingDialog/LandingDialog.jsx

@@ -1,12 +1,16 @@
 import ClosableDialogTitle from "../ClosableDialogTitle";
+import { Divider } from "@mui/material";
 import NumberOne from "../../images/number-one.png";
 import NumberThree from "../../images/number-three.png";
 import NumberTwo from "../../images/number-two.png";
 import React from "react";
+import { Switch } from "@mui/material";
 import codeImage from "../../images/code.png";
 import onboardDispatcher from "../Onboard/onboardDispatcher";
+
 import styles from "./styles";
-import theme from "../../theme";
+import { useTheme } from "@mui/material/styles";
+
 import {
   Avatar,
   Box,
@@ -18,12 +22,23 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
+  Typography,
 } from "@mui/material";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
 
 const LandingDialog = () => {
+  const [themeStorage] = useStorage("platform", "theme", "light");
+
+  const handleThemeChange = (event) => {
+    const newTheme = event.target.checked ? "dark" : "light";
+
+    storage.set("platform", "theme", newTheme);
+  };
+
   const handleClose = () => {
     onboardDispatcher({ level: 1 });
   };
+  const theme = useTheme();
   return (
     <Dialog
       open={true}
@@ -43,6 +58,7 @@ const LandingDialog = () => {
         <Box sx={styles.welcome}>
           <h2> Welcome to Nucleoid Project </h2>
         </Box>
+
         <Box>
           Nucleoid low-code framework lets you build your APIs with the help of
           AI and built-in datastore.
@@ -57,7 +73,7 @@ const LandingDialog = () => {
                 <ListItemAvatar>
                   <Avatar src={NumberOne}></Avatar>
                 </ListItemAvatar>
-                <ListItemText primary="Write your business logic in JavaScript" />
+                <ListItemText primary="Write your business logic in TypeScript" />
               </ListItem>
               <ListItem>
                 <ListItemAvatar>
@@ -81,6 +97,28 @@ const LandingDialog = () => {
           </Box>
         </Box>
       </DialogContent>
+      <Divider sx={{ marginY: 2 }} />
+      <Box
+        sx={{
+          flexGrow: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginTop: 2,
+          marginBottom: 1,
+        }}
+      >
+        <Typography variant="body2" sx={{ marginRight: 1 }}>
+          Light
+        </Typography>
+        <Switch
+          checked={themeStorage !== "light"}
+          onChange={handleThemeChange}
+        />
+        <Typography variant="body2" sx={{ marginLeft: 1 }}>
+          Dark
+        </Typography>
+      </Box>
       <DialogActions>
         <Button sx={{ color: theme.palette.custom.grey }} onClick={handleClose}>
           CLOSE

src/components/NonExpandableAPITreeItem.jsx

@@ -2,7 +2,8 @@ import React from "react";
 import ResourceMenu from "../widgets/ResourceMenu";
 import Typography from "@mui/material/Typography";
 import clsx from "clsx";
-import theme from "../theme";
+import { useTheme } from "@mui/material/styles";
+
 import { TreeItem, useTreeItem } from "@mui/lab";
 
 const NonExpandableTreeContent = React.forwardRef(function CustomContent(
@@ -51,7 +52,7 @@ const NonExpandableTreeContent = React.forwardRef(function CustomContent(
   const handleCloseResourceMenu = () => {
     setOpen(false);
   };
-
+  const theme = useTheme();
   return (
     <div
       className={clsx(className, classes.root, {

src/components/OpenSandboxButton.jsx

@@ -1,9 +1,11 @@
 import React from "react";
 import Swagger from "../icons/Swagger";
-import theme from "../theme";
+import { useTheme } from "@mui/material/styles";
+
 import { Box, Button, Typography } from "@mui/material";
 
 const OpenSandboxButton = ({ clickEvent, small, disabled }) => {
+  const theme = useTheme();
   return (
     <Button
       disabled={disabled}

src/components/OpenSwaggerButton.jsx

@@ -1,9 +1,11 @@
 import React from "react";
 import Swagger from "../icons/Swagger";
-import theme from "../theme";
+import { useTheme } from "@mui/material/styles";
+
 import { Box, Button, Typography } from "@mui/material";
 
 const OpenSwaggerButton = ({ clickEvent, small, disabled }) => {
+  const theme = useTheme();
   return (
     <Button
       disabled={disabled}

src/components/ProjectSelect/ProjectSelect.jsx

@@ -17,7 +17,7 @@ export default function ProjectSelect({ title }) {
         variant="contained"
         color={"inherit"}
         onClick={() => setOpen(true)}
-        endIcon={<ArrowDropDown />}
+        endIcon={<ArrowDropDown sx={{ color: "#121212" }} />}
       >
         {title}
       </Button>

src/components/ProjectSelectSmall/ProjectSelectSmall.jsx

@@ -1,7 +1,6 @@
 import { FileOpen } from "@mui/icons-material/";
 import ProjectDialog from "../../widgets/ProjectDialog";
 import React from "react";
-
 import { useContext } from "../../context/context";
 
 import { Box, Button, Tooltip } from "@mui/material/";
@@ -29,7 +28,7 @@ export default function ProjectSelectSmall() {
           color={"inherit"}
           onClick={() => setOpen(true)}
         >
-          <FileOpen sx={{ color: "#323a40" }} />
+          <FileOpen sx={{ color: "#343a43" }} />
         </Button>
         {open && <ProjectDialog handleClose={handleClose} />}
       </Box>

src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx

@@ -1,8 +1,18 @@
 import React from "react";
+
 import styles from "./styles";
+
 import { Box, Switch, TextField, Typography } from "@mui/material";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
 
 const SettingsDialogRuntime = React.forwardRef((props, urlRef) => {
+  const [themeStorage] = useStorage("platform", "theme", "light");
+
+  const handleThemeChange = (event) => {
+    const newTheme = event.target.checked ? "dark" : "light";
+    storage.set("platform.theme", newTheme);
+  };
+
   const [url, setUrl] = React.useState(urlRef.current.url);
   const [custom, setCustom] = React.useState(
     urlRef.current.runtime === "custom" ? true : false
@@ -129,6 +139,14 @@ const SettingsDialogRuntime = React.forwardRef((props, urlRef) => {
           />
         </BetweenComponents>
       </Section>
+      <Section title={"Theme"}>
+        <BetweenComponents title={"Dark Mode"}>
+          <Switch
+            checked={themeStorage !== "light"}
+            onChange={handleThemeChange}
+          />
+        </BetweenComponents>
+      </Section>
     </Box>
   );
 });

src/components/SmallLogo/SmallLogo.jsx

@@ -3,7 +3,12 @@ import { Typography } from "@mui/material";
 
 const SmallLogo = () => {
   return (
-    <Typography display={"inline"} fontSize={"26px"} color={"#209958"}>
+    <Typography
+      display={"inline"}
+      fontSize={"26px"}
+      color={"#209958"}
+      style={{ cursor: "pointer" }}
+    >
       nuc
     </Typography>
   );

src/components/SwaggerDialog.jsx

@@ -5,7 +5,8 @@ import Settings from "../settings";
 import StarUsOnGithub from "./StarUsOnGithub";
 import Swagger from "../icons/Swagger";
 import onboardDispatcher from "./Onboard/onboardDispatcher";
-import theme from "../theme";
+import { useTheme } from "@mui/material/styles";
+
 import {
   AppBar,
   Box,
@@ -22,6 +23,7 @@ const Transition = React.forwardRef(function Transition(props, ref) {
 });
 
 export default function SwaggerDialog() {
+  const theme = useTheme();
   const [swagger] = useEvent("SWAGGER_DIALOG", { open: false });
 
   function handleClose() {
@@ -46,7 +48,7 @@ export default function SwaggerDialog() {
       <AppBar
         sx={{
           position: "relative",
-          backgroundColor: "#323a40",
+          backgroundColor: "#343a43",
           color: theme.palette.custom.grey,
         }}
       >
@@ -119,6 +121,7 @@ export default function SwaggerDialog() {
 }
 
 function OpenSwaggerNewTabButton(props) {
+  const theme = useTheme();
   const { url } = props;
 
   function handleClick() {