New themes

Author: javizqh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.2.65",
+  "version": "0.2.66",
   "main": "dist/main.js",
   "typings": "dist/index.d.ts",
   "files": [

src/components/Explorer/file_explorer/MoreActionsMenu.tsx

@@ -50,7 +50,7 @@ function MoreActionsMenu({
   return (
     <StyledExplorerExtraMenuBackdrop active={menuProps.isShown} ref={menuRef}>
       <StyledExplorerExtraMenu
-        bgColor={theme.palette.background}
+        bgColor={theme.palette.bg}
         borderColor={theme.palette.secondary}
         roundness={theme.roundness}
         top={menuProps.position.y}

src/components/FileEditor/TextEditor.tsx

@@ -134,15 +134,15 @@ const FileEditor = ({
         inherit: true,
         rules: [],
         colors: {
-          "editor.background": theme.palette.background,
+          "editor.background": theme.palette.bg,
         },
       });
       monacoRef.current.editor.defineTheme("light-theme", {
         base: "vs",
         inherit: true,
         rules: [],
         colors: {
-          "editor.background": theme.palette.background,
+          "editor.background": theme.palette.bg,
         },
       });
     }
@@ -154,15 +154,15 @@ const FileEditor = ({
       inherit: true,
       rules: [],
       colors: {
-        "editor.background": theme.palette.background,
+        "editor.background": theme.palette.bg,
       },
     });
     monaco.editor.defineTheme("light-theme", {
       base: "vs",
       inherit: true,
       rules: [],
       colors: {
-        "editor.background": theme.palette.background,
+        "editor.background": theme.palette.bg,
       },
     });
   };

src/components/Modals/EditorKeybindModal.tsx

@@ -48,7 +48,7 @@ const NewFolderModal = ({
           <StyledModalEditorKeybind
             lightText={theme.palette.text}
             darkText={theme.palette.darkText}
-            bg={theme.palette.background}
+            bg={theme.palette.bg}
           >
             <div> {keybind.description}</div>
             <div>

src/components/Modals/ErrorModal.tsx

@@ -84,7 +84,7 @@ const ErrorModal = () => {
     roundness: theme.roundness,
     error: theme.palette.error,
     errorBorder: theme.palette.border.error,
-    info: theme.palette.background,
+    info: theme.palette.bg,
     infoBorder: theme.palette.border.info,
     warning: theme.palette.warning,
     warningBorder: theme.palette.border.warning,

src/components/Modals/Modal.tsx

@@ -80,7 +80,7 @@ const Modal = ({
       id={id}
       ref={modalRef}
       onKeyDown={handleKeyDown}
-      bgColor={theme.palette.background}
+      bgColor={theme.palette.bg}
       borderColor={theme.palette.secondary}
       roundness={theme.roundness}
     >
@@ -119,7 +119,7 @@ export const ModalTitlebar = ({
     <StyledModalTitlebar
       color={theme.palette.text}
       altColor={theme.palette.darkText}
-      bg={theme.palette.background}
+      bg={theme.palette.bg}
       hoverColor={theme.palette.secondary}
       roundness={theme.roundness}
     >
@@ -132,7 +132,7 @@ export const ModalTitlebar = ({
           }}
           color={theme.palette.text}
           altColor={theme.palette.darkText}
-          bg={theme.palette.background}
+          bg={theme.palette.bg}
         />
       )}
       <label htmlFor={htmlFor}>{title}</label>
@@ -145,7 +145,7 @@ export const ModalTitlebar = ({
           }}
           color={theme.palette.text}
           altColor={theme.palette.darkText}
-          bg={theme.palette.background}
+          bg={theme.palette.bg}
         />
       )}
     </StyledModalTitlebar>
@@ -201,7 +201,7 @@ export const ModalRow = ({
     case "img":
       return (
         <StyledModalImageRow
-          color={theme.palette.background}
+          color={theme.palette.bg}
           roundness={theme.roundness}
           id={id}
         >
@@ -510,11 +510,11 @@ export const ModalInputDropArea = ({
       onDragLeave={() => setDropActive(false)}
       onDrop={(e) => onDrop(e)}
       text={theme.palette.text}
-      bgColor={theme.palette.background}
+      bgColor={theme.palette.bg}
       buttonColor={theme.palette.primary}
       hoverColor={theme.palette.secondary}
       borderColor={theme.palette.primary}
-      hoverBorderColor={theme.palette.background}
+      hoverBorderColor={theme.palette.bg}
       roundness={theme.roundness}
       active={dropActive}
     >

src/components/VncViewer/VncViewer.tsx

@@ -58,7 +58,7 @@ const VncViewer = ({
   };
 
   return (
-    <StyledVNCViewer bgColor={theme.palette.background}>
+    <StyledVNCViewer bgColor={theme.palette.bg}>
       {enabled(state) ? (
         <StyledVNCScreen
           title="VNC viewer"

src/types/theme.ts

@@ -6,7 +6,9 @@ export interface Theme {
     success?: string;
     warning?: string;
     error?: string;
-    background: string;
+    bgDark: string;
+    bg: string;
+    bgLight: string;
     primary?: string;
     secondary?: string;
     scrollbar?: string;

src/utils/themeProvider.tsx

@@ -14,7 +14,9 @@ const defaultTheme: Theme = {
     success: "#29ac29",
     warning: "#f9e86d",
     error: "#802626",
-    background: "#16161d",
+    bgDark: "#0d0d0dff",
+    bg: "#1a1a1aff",
+    bgLight: "#262626ff",
     primary: "#134f53",
     secondary: "#1d777c",
     scrollbar: "#6f6f90",