diff --git a/package-lock.json b/package-lock.json index 3918e61a..8cf4e74b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3846,9 +3846,9 @@ "integrity": "sha512-0TU/WjZdEPYVl1LMzv+i9PoWnY3859B11gSCe/s3sXz2Nev+L7jhECEcNqSS0H39QmsDSWpDRU9EXhOhFpHPKg==" }, "node_modules/@nucleoidjs/webstorage": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@nucleoidjs/webstorage/-/webstorage-1.0.2.tgz", - "integrity": "sha512-YlUjmKZEy+fdO8BQobkQc8nEOthO0sXYuE3c5QDEN9A6g4LLIAqMnaXbtjJsMCNsHYs4f0mWSrZrnqyyeQFLYg==" + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@nucleoidjs/webstorage/-/webstorage-1.0.3.tgz", + "integrity": "sha512-rR7uyf+UIMYXUmY4UpZOsCI5CbAv54luehtim3ipVOa5HqXp2Uj0J5pOVlsXD4Ks8j2JQ0oAER/e3zCP29RAQw==" }, "node_modules/@popperjs/core": { "version": "2.11.8", @@ -16676,9 +16676,9 @@ "integrity": "sha512-0TU/WjZdEPYVl1LMzv+i9PoWnY3859B11gSCe/s3sXz2Nev+L7jhECEcNqSS0H39QmsDSWpDRU9EXhOhFpHPKg==" }, "@nucleoidjs/webstorage": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@nucleoidjs/webstorage/-/webstorage-1.0.2.tgz", - "integrity": "sha512-YlUjmKZEy+fdO8BQobkQc8nEOthO0sXYuE3c5QDEN9A6g4LLIAqMnaXbtjJsMCNsHYs4f0mWSrZrnqyyeQFLYg==" + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@nucleoidjs/webstorage/-/webstorage-1.0.3.tgz", + "integrity": "sha512-rR7uyf+UIMYXUmY4UpZOsCI5CbAv54luehtim3ipVOa5HqXp2Uj0J5pOVlsXD4Ks8j2JQ0oAER/e3zCP29RAQw==" }, "@popperjs/core": { "version": "2.11.8", diff --git a/package.json b/package.json index 9193bca5..f61c2c30 100644 --- a/package.json +++ b/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", diff --git a/public/loading.css b/public/loading.css index e1a079e2..1a819cd1 100644 --- a/public/loading.css +++ b/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; diff --git a/src/App.jsx b/src/App.jsx index 85a12c2f..4051e688 100644 --- a/src/App.jsx +++ b/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 ( - + diff --git a/src/components/ClosableDialogTitle/ClosableDialogTitle.jsx b/src/components/ClosableDialogTitle/ClosableDialogTitle.jsx index 6b621a9d..65d1f435 100644 --- a/src/components/ClosableDialogTitle/ClosableDialogTitle.jsx +++ b/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 ( diff --git a/src/components/LandingDialog/LandingDialog.jsx b/src/components/LandingDialog/LandingDialog.jsx index 9b2d0630..c10c3461 100644 --- a/src/components/LandingDialog/LandingDialog.jsx +++ b/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 ( {

Welcome to Nucleoid Project

+ Nucleoid low-code framework lets you build your APIs with the help of AI and built-in datastore. @@ -57,7 +73,7 @@ const LandingDialog = () => { - + @@ -81,6 +97,28 @@ const LandingDialog = () => { + + + + Light + + + + Dark + + diff --git a/src/components/ProjectSelectSmall/ProjectSelectSmall.jsx b/src/components/ProjectSelectSmall/ProjectSelectSmall.jsx index f20e873f..9308f527 100644 --- a/src/components/ProjectSelectSmall/ProjectSelectSmall.jsx +++ b/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)} > - + {open && } diff --git a/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx b/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx index eac8ddfe..79555de9 100644 --- a/src/components/SettingsDialogRuntime/SettingsDialogRuntime.jsx +++ b/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) => { /> +
+ + + +
); }); diff --git a/src/components/SmallLogo/SmallLogo.jsx b/src/components/SmallLogo/SmallLogo.jsx index f9d4987c..e840db1a 100644 --- a/src/components/SmallLogo/SmallLogo.jsx +++ b/src/components/SmallLogo/SmallLogo.jsx @@ -3,7 +3,12 @@ import { Typography } from "@mui/material"; const SmallLogo = () => { return ( - + nuc ); diff --git a/src/components/SwaggerDialog.jsx b/src/components/SwaggerDialog.jsx index 5f1defb0..9cf5c7a1 100644 --- a/src/components/SwaggerDialog.jsx +++ b/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() { @@ -119,6 +121,7 @@ export default function SwaggerDialog() { } function OpenSwaggerNewTabButton(props) { + const theme = useTheme(); const { url } = props; function handleClick() { diff --git a/src/lib/monacoEditorTheme.json b/src/lib/monacoEditorTheme.json new file mode 100644 index 00000000..93cca604 --- /dev/null +++ b/src/lib/monacoEditorTheme.json @@ -0,0 +1,621 @@ +{ + "inherit": false, + "base": "vs-dark", + "colors": { + "focusBorder": "#316dca", + "foreground": "#adbac7", + "descriptionForeground": "#768390", + "errorForeground": "#e5534b", + "textLink.foreground": "#539bf5", + "textLink.activeForeground": "#539bf5", + "textBlockQuote.background": "#1c2128", + "textBlockQuote.border": "#444c56", + "textCodeBlock.background": "#636e7b66", + "textPreformat.foreground": "#768390", + "textSeparator.foreground": "#373e47", + "icon.foreground": "#768390", + "keybindingLabel.foreground": "#adbac7", + "button.background": "#347d39", + "button.foreground": "#ffffff", + "button.hoverBackground": "#46954a", + "button.secondaryBackground": "#3d444d", + "button.secondaryForeground": "#adbac7", + "button.secondaryHoverBackground": "#444c56", + "checkbox.background": "#2d333b", + "checkbox.border": "#444c56", + "dropdown.background": "#2d333b", + "dropdown.border": "#444c56", + "dropdown.foreground": "#adbac7", + "dropdown.listBackground": "#2d333b", + "input.background": "#22272e", + "input.border": "#444c56", + "input.foreground": "#adbac7", + "input.placeholderForeground": "#636e7b", + "badge.foreground": "#cdd9e5", + "badge.background": "#316dca", + "progressBar.background": "#316dca", + "titleBar.activeForeground": "#768390", + "titleBar.activeBackground": "#22272e", + "titleBar.inactiveForeground": "#768390", + "titleBar.inactiveBackground": "#1c2128", + "titleBar.border": "#444c56", + "activityBar.foreground": "#adbac7", + "activityBar.inactiveForeground": "#768390", + "activityBar.background": "#22272e", + "activityBarBadge.foreground": "#cdd9e5", + "activityBarBadge.background": "#316dca", + "activityBar.activeBorder": "#ec775c", + "activityBar.border": "#444c56", + "sideBar.foreground": "#adbac7", + "sideBar.background": "#1c2128", + "sideBar.border": "#444c56", + "sideBarTitle.foreground": "#adbac7", + "sideBarSectionHeader.foreground": "#adbac7", + "sideBarSectionHeader.background": "#1c2128", + "sideBarSectionHeader.border": "#444c56", + "list.hoverForeground": "#adbac7", + "list.inactiveSelectionForeground": "#adbac7", + "list.activeSelectionForeground": "#adbac7", + "list.hoverBackground": "#636e7b1a", + "list.inactiveSelectionBackground": "#636e7b66", + "list.activeSelectionBackground": "#636e7b66", + "list.focusForeground": "#adbac7", + "list.focusBackground": "#4184e426", + "list.inactiveFocusBackground": "#4184e426", + "list.highlightForeground": "#539bf5", + "tree.indentGuidesStroke": "#373e47", + "notificationCenterHeader.foreground": "#768390", + "notificationCenterHeader.background": "#2d333b", + "notifications.foreground": "#adbac7", + "notifications.background": "#2d333b", + "notifications.border": "#444c56", + "notificationsErrorIcon.foreground": "#e5534b", + "notificationsWarningIcon.foreground": "#c69026", + "notificationsInfoIcon.foreground": "#539bf5", + "pickerGroup.border": "#444c56", + "pickerGroup.foreground": "#768390", + "quickInput.background": "#2d333b", + "quickInput.foreground": "#adbac7", + "statusBar.foreground": "#768390", + "statusBar.background": "#22272e", + "statusBar.border": "#444c56", + "statusBar.focusBorder": "#316dca80", + "statusBar.noFolderBackground": "#22272e", + "statusBar.debuggingForeground": "#cdd9e5", + "statusBar.debuggingBackground": "#c93c37", + "statusBarItem.prominentBackground": "#636e7b66", + "statusBarItem.remoteForeground": "#adbac7", + "statusBarItem.remoteBackground": "#444c56", + "statusBarItem.hoverBackground": "#adbac714", + "statusBarItem.activeBackground": "#adbac71f", + "statusBarItem.focusBorder": "#316dca", + "editorGroupHeader.tabsBackground": "#1c2128", + "editorGroupHeader.tabsBorder": "#444c56", + "editorGroup.border": "#444c56", + "tab.activeForeground": "#adbac7", + "tab.inactiveForeground": "#768390", + "tab.inactiveBackground": "#1c2128", + "tab.activeBackground": "#22272e", + "tab.hoverBackground": "#22272e", + "tab.unfocusedHoverBackground": "#636e7b1a", + "tab.border": "#444c56", + "tab.unfocusedActiveBorderTop": "#444c56", + "tab.activeBorder": "#22272e", + "tab.unfocusedActiveBorder": "#22272e", + "tab.activeBorderTop": "#ec775c", + "breadcrumb.foreground": "#768390", + "breadcrumb.focusForeground": "#adbac7", + "breadcrumb.activeSelectionForeground": "#768390", + "breadcrumbPicker.background": "#2d333b", + "editor.foreground": "#adbac7", + "editor.background": "#22272e", + "editorWidget.background": "#2d333b", + "editor.foldBackground": "#636e7b1a", + "editor.lineHighlightBackground": "#636e7b1a", + "editorLineNumber.foreground": "#636e7b", + "editorLineNumber.activeForeground": "#adbac7", + "editorIndentGuide.background": "#adbac71f", + "editorIndentGuide.activeBackground": "#adbac73d", + "editorWhitespace.foreground": "#545d68", + "editorCursor.foreground": "#539bf5", + "editor.findMatchBackground": "#966600", + "editor.findMatchHighlightBackground": "#eac55f80", + "editor.linkedEditingBackground": "#539bf512", + "editor.selectionHighlightBackground": "#57ab5a40", + "editor.wordHighlightBackground": "#636e7b80", + "editor.wordHighlightBorder": "#636e7b99", + "editor.wordHighlightStrongBackground": "#636e7b4d", + "editor.wordHighlightStrongBorder": "#636e7b99", + "editorBracketMatch.background": "#57ab5a40", + "editorBracketMatch.border": "#57ab5a99", + "editorInlayHint.background": "#76839033", + "editorInlayHint.foreground": "#768390", + "editorInlayHint.typeBackground": "#76839033", + "editorInlayHint.typeForeground": "#768390", + "editorInlayHint.paramBackground": "#76839033", + "editorInlayHint.paramForeground": "#768390", + "editorGutter.modifiedBackground": "#ae7c1466", + "editorGutter.addedBackground": "#46954a66", + "editorGutter.deletedBackground": "#e5534b66", + "diffEditor.insertedLineBackground": "#347d3926", + "diffEditor.insertedTextBackground": "#57ab5a4d", + "diffEditor.removedLineBackground": "#c93c3726", + "diffEditor.removedTextBackground": "#f470674d", + "scrollbar.shadow": "#545d6833", + "scrollbarSlider.background": "#76839033", + "scrollbarSlider.hoverBackground": "#7683903d", + "scrollbarSlider.activeBackground": "#76839047", + "editorOverviewRuler.border": "#1c2128", + "minimapSlider.background": "#76839033", + "minimapSlider.hoverBackground": "#7683903d", + "minimapSlider.activeBackground": "#76839047", + "panel.background": "#1c2128", + "panel.border": "#444c56", + "panelTitle.activeBorder": "#ec775c", + "panelTitle.activeForeground": "#adbac7", + "panelTitle.inactiveForeground": "#768390", + "panelInput.border": "#444c56", + "debugIcon.breakpointForeground": "#e5534b", + "debugConsole.infoForeground": "#768390", + "debugConsole.warningForeground": "#c69026", + "debugConsole.errorForeground": "#ff938a", + "debugConsole.sourceForeground": "#daaa3f", + "debugConsoleInputIcon.foreground": "#b083f0", + "debugTokenExpression.name": "#6cb6ff", + "debugTokenExpression.value": "#96d0ff", + "debugTokenExpression.string": "#96d0ff", + "debugTokenExpression.boolean": "#6bc46d", + "debugTokenExpression.number": "#6bc46d", + "debugTokenExpression.error": "#ff938a", + "symbolIcon.arrayForeground": "#e0823d", + "symbolIcon.booleanForeground": "#539bf5", + "symbolIcon.classForeground": "#e0823d", + "symbolIcon.colorForeground": "#6cb6ff", + "symbolIcon.constructorForeground": "#dcbdfb", + "symbolIcon.enumeratorForeground": "#e0823d", + "symbolIcon.enumeratorMemberForeground": "#539bf5", + "symbolIcon.eventForeground": "#636e7b", + "symbolIcon.fieldForeground": "#e0823d", + "symbolIcon.fileForeground": "#c69026", + "symbolIcon.folderForeground": "#c69026", + "symbolIcon.functionForeground": "#b083f0", + "symbolIcon.interfaceForeground": "#e0823d", + "symbolIcon.keyForeground": "#539bf5", + "symbolIcon.keywordForeground": "#f47067", + "symbolIcon.methodForeground": "#b083f0", + "symbolIcon.moduleForeground": "#f47067", + "symbolIcon.namespaceForeground": "#f47067", + "symbolIcon.nullForeground": "#539bf5", + "symbolIcon.numberForeground": "#57ab5a", + "symbolIcon.objectForeground": "#e0823d", + "symbolIcon.operatorForeground": "#6cb6ff", + "symbolIcon.packageForeground": "#e0823d", + "symbolIcon.propertyForeground": "#e0823d", + "symbolIcon.referenceForeground": "#539bf5", + "symbolIcon.snippetForeground": "#539bf5", + "symbolIcon.stringForeground": "#6cb6ff", + "symbolIcon.structForeground": "#e0823d", + "symbolIcon.textForeground": "#6cb6ff", + "symbolIcon.typeParameterForeground": "#6cb6ff", + "symbolIcon.unitForeground": "#539bf5", + "symbolIcon.variableForeground": "#e0823d", + + "terminal.foreground": "#adbac7", + "terminal.ansiBlack": "#545d68", + "terminal.ansiRed": "#f47067", + "terminal.ansiGreen": "#57ab5a", + "terminal.ansiYellow": "#c69026", + "terminal.ansiBlue": "#539bf5", + "terminal.ansiMagenta": "#b083f0", + "terminal.ansiCyan": "#39c5cf", + "terminal.ansiWhite": "#909dab", + "terminal.ansiBrightBlack": "#636e7b", + "terminal.ansiBrightRed": "#ff938a", + "terminal.ansiBrightGreen": "#6bc46d", + "terminal.ansiBrightYellow": "#daaa3f", + "terminal.ansiBrightBlue": "#6cb6ff", + "terminal.ansiBrightMagenta": "#dcbdfb", + "terminal.ansiBrightCyan": "#56d4dd", + "terminal.ansiBrightWhite": "#cdd9e5", + "editorBracketHighlight.foreground1": "#6cb6ff", + "editorBracketHighlight.foreground2": "#6bc46d", + "editorBracketHighlight.foreground3": "#daaa3f", + "editorBracketHighlight.foreground4": "#ff938a", + "editorBracketHighlight.foreground5": "#fc8dc7", + "editorBracketHighlight.foreground6": "#dcbdfb", + "editorBracketHighlight.unexpectedBracket.foreground": "#768390", + "gitDecoration.addedResourceForeground": "#57ab5a", + "gitDecoration.modifiedResourceForeground": "#c69026", + "gitDecoration.deletedResourceForeground": "#e5534b", + "gitDecoration.untrackedResourceForeground": "#57ab5a", + "gitDecoration.ignoredResourceForeground": "#636e7b", + "gitDecoration.conflictingResourceForeground": "#cc6b2c", + "gitDecoration.submoduleResourceForeground": "#768390", + "debugToolBar.background": "#2d333b", + "editor.stackFrameHighlightBackground": "#ae7c1466", + "editor.focusedStackFrameHighlightBackground": "#46954a66", + "peekViewEditor.matchHighlightBackground": "#ae7c1466", + "peekViewResult.matchHighlightBackground": "#ae7c1466", + "peekViewEditor.background": "#636e7b1a", + "peekViewResult.background": "#22272e", + "settings.headerForeground": "#adbac7", + "settings.modifiedItemIndicator": "#ae7c1466", + "welcomePage.buttonBackground": "#373e47", + "welcomePage.buttonHoverBackground": "#444c56" + }, + "rules": [ + { + "foreground": "#768390", + "token": "comment" + }, + { + "foreground": "#768390", + "token": "punctuation.definition.comment" + }, + { + "foreground": "#768390", + "token": "string.comment" + }, + { + "foreground": "#f47067", + "token": "constant.other.placeholder" + }, + { + "foreground": "#f47067", + "token": "constant.character" + }, + { + "foreground": "#6cb6ff", + "token": "constant" + }, + { + "foreground": "#6cb6ff", + "token": "entity.name.constant" + }, + { + "foreground": "#6cb6ff", + "token": "variable.other.constant" + }, + { + "foreground": "#6cb6ff", + "token": "variable.other.enummember" + }, + { + "foreground": "#6cb6ff", + "token": "variable.language" + }, + { + "foreground": "#6cb6ff", + "token": "entity" + }, + { + "foreground": "#f69d50", + "token": "entity.name" + }, + { + "foreground": "#f69d50", + "token": "meta.export.default" + }, + { + "foreground": "#f69d50", + "token": "meta.definition.variable" + }, + { + "foreground": "#adbac7", + "token": "variable.parameter.function" + }, + { + "foreground": "#adbac7", + "token": "meta.jsx.children" + }, + { + "foreground": "#adbac7", + "token": "meta.block" + }, + { + "foreground": "#adbac7", + "token": "meta.tag.attributes" + }, + { + "foreground": "#adbac7", + "token": "entity.name.constant" + }, + { + "foreground": "#adbac7", + "token": "meta.object.member" + }, + { + "foreground": "#adbac7", + "token": "meta.embedded.expression" + }, + { + "foreground": "#dcbdfb", + "token": "entity.name.function" + }, + { + "foreground": "#8ddb8c", + "token": "entity.name.tag" + }, + { + "foreground": "#8ddb8c", + "token": "support.class.component" + }, + { + "foreground": "#f47067", + "token": "keyword" + }, + { + "foreground": "#f47067", + "token": "storage" + }, + { + "foreground": "#f47067", + "token": "storage.type" + }, + { + "foreground": "#adbac7", + "token": "storage.modifier.package" + }, + { + "foreground": "#adbac7", + "token": "storage.modifier.import" + }, + { + "foreground": "#adbac7", + "token": "storage.type.java" + }, + { + "foreground": "#96d0ff", + "token": "string" + }, + { + "foreground": "#96d0ff", + "token": "string punctuation.section.embedded source" + }, + { + "foreground": "#6cb6ff", + "token": "support" + }, + { + "foreground": "#6cb6ff", + "token": "meta.property-name" + }, + { + "foreground": "#f69d50", + "token": "variable" + }, + { + "foreground": "#adbac7", + "token": "variable.other" + }, + { + "fontStyle": "italic", + "foreground": "#ff938a", + "token": "invalid.broken" + }, + { + "fontStyle": "italic", + "foreground": "#ff938a", + "token": "invalid.deprecated" + }, + { + "fontStyle": "italic", + "foreground": "#ff938a", + "token": "invalid.illegal" + }, + { + "fontStyle": "italic", + "foreground": "#ff938a", + "token": "invalid.unimplemented" + }, + { + "fontStyle": "italic underline", + "background": "#f47067", + "foreground": "#cdd9e5", + "content": "^M", + "token": "carriage-return" + }, + { + "foreground": "#ff938a", + "token": "message.error" + }, + { + "foreground": "#6cb6ff", + "token": "string variable" + }, + { + "foreground": "#96d0ff", + "token": "source.regexp" + }, + { + "foreground": "#96d0ff", + "token": "string.regexp" + }, + { + "foreground": "#96d0ff", + "token": "string.regexp.character-class" + }, + { + "foreground": "#96d0ff", + "token": "string.regexp constant.character.escape" + }, + { + "foreground": "#96d0ff", + "token": "string.regexp source.ruby.embedded" + }, + { + "foreground": "#96d0ff", + "token": "string.regexp string.regexp.arbitrary-repitition" + }, + { + "fontStyle": "bold", + "foreground": "#8ddb8c", + "token": "string.regexp constant.character.escape" + }, + { + "foreground": "#6cb6ff", + "token": "support.constant" + }, + { + "foreground": "#6cb6ff", + "token": "support.variable" + }, + { + "foreground": "#8ddb8c", + "token": "support.type.property-name.json" + }, + { + "foreground": "#6cb6ff", + "token": "meta.module-reference" + }, + { + "foreground": "#f69d50", + "token": "punctuation.definition.list.begin.markdown" + }, + { + "fontStyle": "bold", + "foreground": "#6cb6ff", + "token": "markup.heading" + }, + { + "fontStyle": "bold", + "foreground": "#6cb6ff", + "token": "markup.heading entity.name" + }, + { + "foreground": "#8ddb8c", + "token": "markup.quote" + }, + { + "fontStyle": "italic", + "foreground": "#adbac7", + "token": "markup.italic" + }, + { + "fontStyle": "bold", + "foreground": "#adbac7", + "token": "markup.bold" + }, + { + "fontStyle": "underline", + "token": "markup.underline" + }, + { + "fontStyle": "strikethrough", + "token": "markup.strikethrough" + }, + { + "foreground": "#6cb6ff", + "token": "markup.inline.raw" + }, + { + "background": "#5d0f12", + "foreground": "#ff938a", + "token": "markup.deleted" + }, + { + "background": "#5d0f12", + "foreground": "#ff938a", + "token": "meta.diff.header.from-file" + }, + { + "background": "#5d0f12", + "foreground": "#ff938a", + "token": "punctuation.definition.deleted" + }, + { + "foreground": "#f47067", + "token": "punctuation.section.embedded" + }, + { + "background": "#113417", + "foreground": "#8ddb8c", + "token": "markup.inserted" + }, + { + "background": "#113417", + "foreground": "#8ddb8c", + "token": "meta.diff.header.to-file" + }, + { + "background": "#113417", + "foreground": "#8ddb8c", + "token": "punctuation.definition.inserted" + }, + { + "background": "#682d0f", + "foreground": "#f69d50", + "token": "markup.changed" + }, + { + "background": "#682d0f", + "foreground": "#f69d50", + "token": "punctuation.definition.changed" + }, + { + "foreground": "#2d333b", + "background": "#6cb6ff", + "token": "markup.ignored" + }, + { + "foreground": "#2d333b", + "background": "#6cb6ff", + "token": "markup.untracked" + }, + { + "foreground": "#dcbdfb", + "fontStyle": "bold", + "token": "meta.diff.range" + }, + { + "foreground": "#6cb6ff", + "token": "meta.diff.header" + }, + { + "fontStyle": "bold", + "foreground": "#6cb6ff", + "token": "meta.separator" + }, + { + "foreground": "#6cb6ff", + "token": "meta.output" + }, + { + "foreground": "#768390", + "token": "brackethighlighter.tag" + }, + { + "foreground": "#768390", + "token": "brackethighlighter.curly" + }, + { + "foreground": "#768390", + "token": "brackethighlighter.round" + }, + { + "foreground": "#768390", + "token": "brackethighlighter.square" + }, + { + "foreground": "#768390", + "token": "brackethighlighter.angle" + }, + { + "foreground": "#768390", + "token": "brackethighlighter.quote" + }, + { + "foreground": "#ff938a", + "token": "brackethighlighter.unmatched" + }, + { + "foreground": "#96d0ff", + "token": "constant.other.reference.link" + }, + { + "foreground": "#96d0ff", + "token": "string.other.link" + } + ], + "encodedTokensColors": [] +} diff --git a/src/pages/ide/Dashboard/Dashboard.jsx b/src/pages/ide/Dashboard/Dashboard.jsx index cac69f73..5ce01e3e 100644 --- a/src/pages/ide/Dashboard/Dashboard.jsx +++ b/src/pages/ide/Dashboard/Dashboard.jsx @@ -1,7 +1,8 @@ +import { DataGrid } from "@mui/x-data-grid"; //eslint-disable-line import React from "react"; -import theme from "../../../theme"; +import { useTheme } from "@mui/material/styles"; + import { Box, Button, Card, Grid, useMediaQuery } from "@mui/material"; -import { DataGrid } from "@mui/x-data-grid"; //eslint-disable-line import { Line, PolarArea } from "react-chartjs-2"; const NucDataGrid = ({ rows }) => { @@ -65,6 +66,7 @@ const NucDataGrid = ({ rows }) => { }; const Dashboard = () => { + const theme = useTheme(); const matchDownSM = useMediaQuery(theme.breakpoints.down("md")); const generateRandomList = (length) => { diff --git a/src/palette.js b/src/palette.js new file mode 100644 index 00000000..d7fe288f --- /dev/null +++ b/src/palette.js @@ -0,0 +1,144 @@ +import { alpha } from "@mui/material/styles"; + +// ---------------------------------------------------------------------- + +// SETUP COLORS + +export const grey = { + 0: "#FFFFFF", + 100: "#F9FAFB", + 200: "#F4F6F8", + 300: "#DFE3E8", + 400: "#cdd9e5", + 500: "#adbac7", + 600: "#768390", + 700: "#444c56", + 800: "#22272e", + 900: "#1c2128", +}; + +export const primary = { + lighter: "#C8FAD6", + light: "#5BE49B", + main: "#00A76F", + dark: "#007867", + darker: "#004B50", + contrastText: "#FFFFFF", +}; + +export const secondary = { + lighter: "#EFD6FF", + light: "#C684FF", + main: "#8E33FF", + dark: "#5119B7", + darker: "#27097A", + contrastText: "#FFFFFF", +}; + +export const info = { + lighter: "#CAFDF5", + light: "#61F3F3", + main: "#00B8D9", + dark: "#006C9C", + darker: "#003768", + contrastText: "#FFFFFF", +}; + +export const success = { + lighter: "#D3FCD2", + light: "#77ED8B", + main: "#22C55E", + dark: "#118D57", + darker: "#065E49", + contrastText: "#ffffff", +}; + +export const warning = { + lighter: "#FFF5CC", + light: "#FFD666", + main: "#FFAB00", + dark: "#B76E00", + darker: "#7A4100", + contrastText: grey[800], +}; + +export const error = { + lighter: "#FFE9D5", + light: "#FFAC82", + main: "#FF5630", + dark: "#B71D18", + darker: "#7A0916", + contrastText: "#FFFFFF", +}; + +export const common = { + black: "#000000", + white: "#FFFFFF", +}; + +export const action = { + hover: alpha(grey[500], 0.08), + selected: alpha(grey[500], 0.16), + disabled: alpha(grey[500], 0.8), + disabledBackground: alpha(grey[500], 0.24), + focus: alpha(grey[500], 0.24), + hoverOpacity: 0.08, + disabledOpacity: 0.48, +}; + +export const base = { + primary, + secondary, + info, + success, + warning, + error, + grey, + common, + divider: alpha(grey[500], 0.2), + action, +}; + +// ---------------------------------------------------------------------- + +export function palette(mode) { + const light = { + ...base, + mode: "light", + text: { + primary: grey[800], + secondary: grey[600], + disabled: grey[500], + }, + background: { + paper: "#FFFFFF", + default: "#FFFFFF", + neutral: grey[200], + }, + action: { + ...base.action, + active: grey[600], + }, + }; + + const dark = { + ...base, + mode: "dark", + text: { + primary: "#FFFFFF", + secondary: grey[500], + disabled: grey[600], + }, + background: { + paper: grey[800], + default: grey[900], + neutral: alpha(grey[500], 0.12), + }, + action: { + ...base.action, + active: grey[500], + }, + }; + + return mode === "light" ? light : dark; +} diff --git a/src/theme.js b/src/theme.js index c695626b..8b0c5afa 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,6 +1,7 @@ +import { base } from "./palette"; import { createTheme } from "@mui/material"; -let theme = createTheme({ +let lightTheme = createTheme({ palette: { primary: { main: "#747474", @@ -27,8 +28,8 @@ let theme = createTheme({ }, }); -theme = { - ...theme, +lightTheme = { + ...lightTheme, components: { MuiCssBaseline: { styleOverrides: { @@ -75,7 +76,7 @@ theme = { MuiDrawer: { styleOverrides: { paper: { - backgroundColor: "#323a40", + backgroundColor: "#343a43", }, }, }, @@ -130,18 +131,285 @@ theme = { }, }; -theme = { - ...theme, +lightTheme = { + ...lightTheme, custom: { schema: { width: 75, }, + apiTreeItem: { + fontSize: 12, + color: "#666", + fontWeight: "bold", + backgroundColor: "#fdfdfd", + border: `1px solid #c3c5c8`, + width: 44, + borderRadius: 8, + mt: 1 / 4, + mb: 1 / 4, + boxShadow: "1px 1px #b8b8b8", + }, + drawer: { + "& .MuiDrawer-paper": { + top: "10%", + height: 380, + borderTopLeftRadius: "5px", + borderBottomLeftRadius: "5px", + background: "#353e48", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + paddingTop: 1, + paddingBottom: 1, + }, + }, + drawerSmall: { + "& .MuiDrawer-paper": { + top: "10%", + height: 338, + borderTopLeftRadius: "5px", + borderBottomLeftRadius: "5px", + background: "#353e48", + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + paddingTop: 1, + paddingBottom: 1, + }, + }, + }, +}; + +lightTheme = { + ...lightTheme, + spacing: (factor) => 8 * factor, +}; + +let darkTheme = createTheme({ + palette: { + primary: { + main: base.primary.dark, + }, + secondary: { + main: base.secondary.dark, + }, + custom: { + grey: base.grey[500], + fossil: base.grey[500], + darkDialogBg: "rgba(0,0,0,0.5)", + darkDialogPanel: base.grey[800], + darkDialog: base.grey[800], + apiTreeRightClick: base.common.white, + drawerBG: base.grey[900], + textGray: base.grey[500], + messageBG: base.grey[700], + }, + background: { + default: base.grey[900], + paper: base.grey[800], + }, + text: { + primary: base.common.white, + secondary: base.grey[500], + }, + }, +}); + +darkTheme = { + ...darkTheme, + components: { + MuiCssBaseline: { + styleOverrides: { + body: { + backgroundColor: base.grey[900], + color: base.common.white, + "&::-webkit-scrollbar, & *::-webkit-scrollbar": { + backgroundColor: base.grey[700], + width: 6, + height: 6, + }, + "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": { + borderRadius: 10, + backgroundColor: base.grey[600], + minHeight: 24, + border: "3px", + }, + "&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus": + { + backgroundColor: base.grey[500], + }, + "&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active": + { + backgroundColor: base.grey[500], + }, + "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover": + { + backgroundColor: base.grey[500], + }, + "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": { + backgroundColor: base.grey[800], + }, + }, + }, + }, + + MuiListItemButton: { + styleOverrides: { + root: { + backgroundColor: `${base.grey[900]} !important`, + color: base.grey[500], + "&:hover": { + backgroundColor: base.grey[800], + }, + + "&.Mui-selected, &.Mui-selected:hover": { + backgroundColor: base.secondary.main, + color: base.common.white, + }, + }, + }, + }, + + MuiDataGrid: { + styleOverrides: { + root: { + "& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-cell:focus-within": + { + outline: "none", + }, + }, + }, + }, + MuiDrawer: { + styleOverrides: { + paper: { + backgroundColor: base.grey[900], + }, + }, + }, + + MuiCard: { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + }, + }, + }, + MuiCardActions: { + styleOverrides: { + root: { + justifyContent: "center", + }, + }, + }, + MuiBackdrop: { + styleOverrides: { + root: { + backgroundColor: "rgba(0,0,0,0.1)", + }, + }, + }, + MuiTextField: { + defaultProps: { + variant: "standard", + }, + }, + MuiSelect: { + defaultProps: { + variant: "standard", + }, + }, + MuiButton: { + styleOverrides: { + root: { + color: "white", + }, + }, + }, + MuiFab: { + styleOverrides: { + root: { + backgroundColor: base.grey[800], + color: base.common.white, + "&:hover": { + backgroundColor: base.grey[700], + }, + boxShadow: "none", + "&.Mui-disabled": { + backgroundColor: base.grey[600], + }, + }, + }, + }, + MuiLinearProgress: { + styleOverrides: { + root: { + background: base.grey[300], + color: base.grey[400], + }, + }, + }, + }, +}; + +darkTheme = { + ...darkTheme, + custom: { + schema: { + width: 75, + }, + apiTreeItem: { + fontSize: 12, + color: base.grey[400], + fontWeight: "bold", + backgroundColor: base.grey[900], + border: `1px solid ${base.grey[800]}`, + width: 44, + borderRadius: 8, + mt: 1 / 4, + mb: 1 / 4, + boxShadow: `1px 1px ${base.grey[700]}`, + }, + drawer: { + "& .MuiDrawer-paper": { + top: "10%", + height: 380, + borderTopLeftRadius: "5px", + borderBottomLeftRadius: "5px", + background: base.grey[900], + border: `1px solid ${base.grey[600]}`, + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + paddingTop: 1, + paddingBottom: 1, + }, + }, + drawerSmall: { + "& .MuiDrawer-paper": { + top: "10%", + height: 338, + borderTopLeftRadius: "5px", + borderBottomLeftRadius: "5px", + background: base.grey[900], + border: `1px solid ${base.grey[600]}`, + display: "flex", + flexDirection: "column", + justifyContent: "space-between", + paddingTop: 1, + paddingBottom: 1, + }, + }, }, }; -theme = { - ...theme, +darkTheme = { + ...darkTheme, spacing: (factor) => 8 * factor, // Bootstrap strategy }; +const theme = lightTheme; +export { lightTheme, darkTheme }; export default theme; diff --git a/src/widgets/APITree/APITree.jsx b/src/widgets/APITree/APITree.jsx index 9c6baf38..ab31751b 100644 --- a/src/widgets/APITree/APITree.jsx +++ b/src/widgets/APITree/APITree.jsx @@ -7,9 +7,9 @@ import Error from "@mui/icons-material/Error"; import Fade from "@mui/material/Fade"; import ResourceMenu from "../ResourceMenu"; import styles from "./styles"; -import theme from "../../theme"; import { useContext } from "../../context/context"; import { useEvent } from "@nucleoidjs/synapses"; +import { useTheme } from "@mui/material/styles"; import { Box, @@ -243,6 +243,8 @@ export const compile = ( const renderTree = (data) => { // eslint-disable-next-line let resourceHash; + // eslint-disable-next-line + const theme = useTheme(); return Object.keys(data).map((path) => { const { methods, children } = data[path]; @@ -280,7 +282,7 @@ export const compile = ( justifyContent: "space-between", }} > - + { const [open, setOpen] = React.useState(false); const [context] = useContext(); + const [themeStorage] = useStorage("platform", "theme", "light"); + const file = getFile(context, props); const plugins = [ @@ -172,6 +177,12 @@ const Editor = React.forwardRef((props, ref) => { function handleEditorDidMount(editor, monaco) { const nucFuncs = context.nucleoid.functions; + monaco.editor.defineTheme("custom-dark-theme", monacoDarkTheme); + + monaco.editor.setTheme( + themeStorage === "light" ? "vs-light" : "custom-dark-theme" + ); + monaco.editor.getModels().forEach((item) => { if ( nucFuncs.find( @@ -263,6 +274,7 @@ const Editor = React.forwardRef((props, ref) => { return ( { + const theme = useTheme(); const matchDownMD = useMediaQuery(theme.breakpoints.down("lg")); + const location = useLocation(); const [state] = useContext(); @@ -142,7 +145,7 @@ const ProcessDrawer = () => { variant="persistent" anchor={"right"} open={visible(location?.pathname)} - sx={matchDownMD ? styles.drawerSmall : styles.drawer} + sx={matchDownMD ? theme.custom.drawerSmall : theme.custom.drawer} > diff --git a/src/widgets/SettingsDialog/SettingsDialog.jsx b/src/widgets/SettingsDialog/SettingsDialog.jsx index 3af93443..702a095d 100644 --- a/src/widgets/SettingsDialog/SettingsDialog.jsx +++ b/src/widgets/SettingsDialog/SettingsDialog.jsx @@ -3,10 +3,12 @@ import React from "react"; import Settings from "../../settings"; import SettingsDialogTabs from "../../components/SettingsDialogTabs"; import { publish } from "@nucleoidjs/synapses"; -import theme from "../../theme"; +import { useTheme } from "@mui/material/styles"; + import { Button, Dialog, DialogActions, DialogContent } from "@mui/material"; const SettingsDialog = ({ handleClose }) => { + const theme = useTheme(); const urlRef = React.useRef(); React.useEffect(() => { @@ -55,7 +57,7 @@ const SettingsDialog = ({ handleClose }) => { PaperProps={{ style: { backgroundColor: theme.palette.custom.darkDialog, - color: theme.palette.custom.grey, + color: "white", minHeight: 600, }, }} @@ -70,7 +72,7 @@ const SettingsDialog = ({ handleClose }) => {