feat: dark-mode (code editor)

packages/bruno-app/src/components/CodeEditor/StyledWrapper.js

@@ -2,12 +2,31 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.CodeMirror {
-    border: solid 1px var(--color-codemirror-border);
+    background: ${(props) => props.theme.codemirror.bg};
+    border: solid 1px ${(props) => props.theme.codemirror.border};
   }
 
   textarea.cm-editor {
     position: relative;
   }
+
+  // Todo: dark mode temporary fix
+  // Clean this
+  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
+    color: #9cdcfe !important;
+  }
+
+  .cm-s-monokai span.cm-string {
+    color: #ce9178 !important;
+  }
+
+  .cm-s-monokai span.cm-number{
+    color: #b5cea8 !important;
+  }
+
+  .cm-s-monokai span.cm-atom{
+    color: #569cd6 !important;
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/CodeEditor/index.js

@@ -39,6 +39,7 @@ export default class QueryEditor extends React.Component {
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
       readOnly: this.props.readOnly ? 'nocursor' : false,
+      theme: this.props.theme === 'dark' ? 'monokai' : 'default',
       extraKeys: {
         'Cmd-Enter': () => {
           if (this.props.onRun) {
@@ -87,6 +88,12 @@ export default class QueryEditor extends React.Component {
       this.editor.setValue(this.props.value);
       this.editor.setOption('mode', this.props.mode);
     }
+
+    if (this.props.theme !== prevProps.theme && this.editor) {
+      this.cachedValue = this.props.value;
+      this.editor.setValue(this.props.value);
+      this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default');
+    }
     this.ignoreChangeEvent = false;
   }
 

packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js

@@ -2,7 +2,8 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.CodeMirror {
-    border: solid 1px var(--color-codemirror-border);
+    background: ${(props) => props.theme.codemirror.bg};
+    border: solid 1px ${(props) => props.theme.codemirror.border};
     /* todo: find a better way */
     height: calc(100vh - 250px);
   }

packages/bruno-app/src/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js

@@ -4,7 +4,7 @@ const Wrapper = styled.div`
   font-size: 0.8125rem;
 
   .body-mode-selector {
-    background: #efefef;
+    background: ${(props) => props.theme.requestTabPanel.bodyModeSelect.color};
     border-radius: 3px;
 
     .dropdown-item {

packages/bruno-app/src/components/RequestPane/RequestBody/index.js

@@ -4,6 +4,7 @@ import CodeEditor from 'components/CodeEditor';
 import FormUrlEncodedParams from 'components/RequestPane/FormUrlEncodedParams';
 import MultipartFormParams from 'components/RequestPane/MultipartFormParams';
 import { useDispatch } from 'react-redux';
+import { useTheme } from 'providers/Theme';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
@@ -12,6 +13,9 @@ const RequestBody = ({ item, collection }) => {
   const dispatch = useDispatch();
   const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
   const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
+  const {
+    storedTheme
+  } = useTheme();
 
   const onEdit = (value) => {
     dispatch(
@@ -41,7 +45,7 @@ const RequestBody = ({ item, collection }) => {
 
     return (
       <StyledWrapper className="w-full">
-        <CodeEditor value={bodyContent[bodyMode] || ''} onEdit={onEdit} onRun={onRun} onSave={onSave} mode={codeMirrorMode[bodyMode]} />
+        <CodeEditor theme={storedTheme} value={bodyContent[bodyMode] || ''} onEdit={onEdit} onRun={onRun} onSave={onSave} mode={codeMirrorMode[bodyMode]} />
       </StyledWrapper>
     );
   }

packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js

@@ -12,7 +12,7 @@ const Wrapper = styled.div`
     }
 
     thead {
-      color: ${(props) => props.theme.table.thead.color};;
+      color: ${(props) => props.theme.table.thead.color};
       font-size: 0.8125rem;
       user-select: none;
     }
@@ -23,8 +23,6 @@ const Wrapper = styled.div`
 
   .btn-add-header {
     font-size: 0.8125rem;
-    margin-block: 10px;
-    padding: 5px;
   }
 
   input[type='text'] {

packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js

@@ -124,7 +124,7 @@ const RequestHeaders = ({ item, collection }) => {
             : null}
         </tbody>
       </table>
-      <button className="btn-add-header select-none" onClick={addHeader}>
+      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
         + Add Header
       </button>
     </StyledWrapper>

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -1,12 +1,17 @@
 import React from 'react';
 import CodeEditor from 'components/CodeEditor';
+import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 
 const QueryResult = ({ value, width }) => {
+  const {
+    storedTheme
+  } = useTheme();
+
   return (
     <StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
       <div className="h-full">
-        <CodeEditor value={value || ''} readOnly />
+        <CodeEditor theme={storedTheme} value={value || ''} readOnly />
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/ResponsePane/ResponseHeaders/StyledWrapper.js

@@ -22,7 +22,7 @@ const Wrapper = styled.div`
 
     tbody {
       tr:nth-child(odd) {
-        background-color: var(--color-table-stripe);
+        background-color: ${(props) => props.theme.table.striped};
       }
     }
   }

packages/bruno-app/src/globalStyles.js

@@ -2,8 +2,12 @@ import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyle = createGlobalStyle`
   .CodeMirror-gutters {
-    background-color: var(--color-codemirror-background);
+    background-color: ${(props) => props.theme.codemirror.gutter.bg} !important;
-    border-right: solid 1px var(--color-codemirror-border);
+    border-right: solid 1px ${(props) => props.theme.codemirror.border};
+  }
+
+  .text-link {
+    color: ${(props) => props.theme.textLink};
   }
 
   .btn {

packages/bruno-app/src/pageComponents/Index/index.js

@@ -6,6 +6,8 @@ import RequestTabPanel from 'components/RequestTabPanel';
 import Sidebar from 'components/Sidebar';
 import { useSelector } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
+import 'codemirror/theme/material.css';
+import 'codemirror/theme/monokai.css';
 
 const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
 if (!SERVER_RENDERED) {

packages/bruno-app/src/styles/globals.css

@@ -9,8 +9,6 @@
   --color-tab-inactive: rgb(155 155 155);
   --color-tab-active-border: #546de5;
   --color-layout-border: #dedede;
-  --color-codemirror-border: #efefef;
-  --color-codemirror-background: rgb(243, 243, 243);
   --color-text-link: #1663bb;
   --color-text-danger: rgb(185, 28, 28);
   --color-background-danger: #dc3545;
@@ -21,7 +19,6 @@
   --color-method-patch: rgb(52 52 52);
   --color-method-options: rgb(52 52 52);
   --color-method-head: rgb(52 52 52);
-  --color-table-stripe: #f3f3f3;
 }
 
 html, body {
@@ -53,7 +50,3 @@ body::-webkit-scrollbar-thumb, .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
   background-color: #cdcdcd;
   border-radius: 5rem;
 }
-
-.text-link {
-  color: var(--color-text-link);
-}

packages/bruno-app/src/themes/dark.js

@@ -1,6 +1,7 @@
 const darkTheme = {
   brand: '#546de5',
   text: '#d4d4d4',
+  textLink: '#569cd6',
   bg: '#1e1e1e',
 
   menubar: {
@@ -61,6 +62,9 @@ const darkTheme = {
     dragbar: {
       border: '#444',
       activeBorder: '#8a8a8a'
+    },
+    bodyModeSelect: {
+      color: 'transparent'
     }
   },
 
@@ -130,14 +134,19 @@ const darkTheme = {
   },
 
   codemirror: {
-
+    bg: '#1e1e1e',
+    border: 'transparent',
+    gutter: {
+      bg: '#1e1e1e'
+    }
   },
 
   table: {
     border: '#333',
     thead : {
       color: 'rgb(204, 204, 204)'
-    }
+    },
+    striped: '#2A2D2F'
   },
 
   'primary-text': '#ffffff',

packages/bruno-app/src/themes/light.js

@@ -1,6 +1,7 @@
 const lightTheme = {
   brand: '#546de5',
   text: 'rgb(52, 52, 52)',
+  textLink: '#1663bb',
   bg: '#fff',
 
   menubar: {
@@ -61,6 +62,9 @@ const lightTheme = {
     dragbar: {
       border: '#efefef',
       activeBorder: 'rgb(200, 200, 200)'
+    },
+    bodyModeSelect: {
+      color: '#efefef'
     }
   },
 
@@ -104,7 +108,7 @@ const lightTheme = {
 
   tabs: {
     active: {
-      color: '${(props) => props.theme.tabs.active.color}',
+      color: 'rgb(50, 46, 44)',
       border: '#546de5'
     }
   },
@@ -130,14 +134,19 @@ const lightTheme = {
   },
 
   codemirror: {
-
+    bg: 'white',
+    border: '#efefef',
+    gutter: {
+      bg: '#f3f3f3'
+    }
   },
 
   table: {
     border: '#efefef',
     thead : {
       color: '#616161'
-    }
+    },
+    striped: '#f3f3f3'
   },
   
   'primary-text': 'rgb(52 52 52)',