editor theme

packages/web/src/datagrid/DataFilterControl.js

@@ -9,6 +9,7 @@ import useShowModal from '../modals/showModal';
 import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal';
 import SetFilterModal from '../modals/SetFilterModal';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 // import { $ } from '../../Utility/jquery';
 // import autobind from 'autobind-decorator';
 // import * as React from 'react';
@@ -40,7 +41,12 @@ const FilterDiv = styled.div`
 const FilterInput = styled.input`
   flex: 1;
   min-width: 10px;
-  background-color: ${(props) => (props.state == 'ok' ? '#CCFFCC' : props.state == 'error' ? '#FFCCCC' : 'white')};
+  background-color: ${(props) =>
+    props.state == 'ok'
+      ? props.theme.input_background_green[1]
+      : props.state == 'error'
+      ? props.theme.input_background_red[1]
+      : props.theme.input_background};
 `;
 // const FilterButton = styled.button`
 //   color: gray;
@@ -176,6 +182,7 @@ export default function DataFilterControl({
   onFocusGrid,
 }) {
   const showModal = useShowModal();
+  const theme = useTheme();
   const [filterState, setFilterState] = React.useState('empty');
   const setFilterText = (filter) => {
     setFilter(filter);
@@ -281,6 +288,7 @@ export default function DataFilterControl({
   return (
     <FilterDiv>
       <FilterInput
+        theme={theme}
         ref={editorRef}
         onKeyDown={handleKeyDown}
         type="text"

packages/web/src/index.js

@@ -11,6 +11,7 @@ import 'ace-builds/src-noconflict/mode-pgsql';
 import 'ace-builds/src-noconflict/mode-sqlserver';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/theme-twilight';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import localStorageGarbageCollector from './utility/localStorageGarbageCollector';

packages/web/src/modals/ModalBase.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Modal from 'react-modal';
 import styled from 'styled-components';
+import useTheme from '../theme/useTheme';
 
 // const StyledModal = styled(Modal)`
 //   position: absolute;
@@ -60,6 +61,7 @@ const ModalContent = styled.div`
 `;
 
 export default function ModalBase({ modalState, children, isFlex = false, fullScreen = false }) {
+  const theme = useTheme();
   return (
     <StyledModal
       isOpen={modalState.isOpen}

packages/web/src/sqleditor/JavaScriptEditor.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import AceEditor from 'react-ace';
 import useDimensions from '../utility/useDimensions';
+import useTheme from '../theme/useTheme';
 
 const Wrapper = styled.div`
   position: absolute;
@@ -22,6 +23,7 @@ export default function JavaScriptEditor({
 }) {
   const [containerRef, { height, width }] = useDimensions();
   const ownEditorRef = React.useRef(null);
+  const theme = useTheme();
 
   const currentEditorRef = editorRef || ownEditorRef;
 
@@ -51,7 +53,7 @@ export default function JavaScriptEditor({
       <AceEditor
         ref={currentEditorRef}
         mode="javascript"
-        theme="github"
+        theme={theme.aceEditorTheme}
         onChange={onChange}
         name="UNIQUE_ID_OF_DIV"
         editorProps={{ $blockScrolling: true }}

packages/web/src/sqleditor/SqlEditor.js

@@ -8,6 +8,7 @@ import useCodeCompletion from './useCodeCompletion';
 import useShowModal from '../modals/showModal';
 import InsertJoinModal from '../modals/InsertJoinModal';
 import { getDatabaseInfo } from '../utility/metadataLoaders';
+import useTheme from '../theme/useTheme';
 
 const Wrapper = styled.div`
   position: absolute;
@@ -55,6 +56,7 @@ export default function SqlEditor({
 }) {
   const [containerRef, { height, width }] = useDimensions();
   const ownEditorRef = React.useRef(null);
+  const theme = useTheme();
 
   const currentEditorRef = editorRef || ownEditorRef;
   const showModal = useShowModal();
@@ -109,7 +111,7 @@ export default function SqlEditor({
       <AceEditor
         ref={currentEditorRef}
         mode={engineToMode[engine] || 'sql'}
-        theme="github"
+        theme={theme.aceEditorTheme}
         onChange={onChange}
         name="UNIQUE_ID_OF_DIV"
         editorProps={{ $blockScrolling: true }}

packages/web/src/theme/dark.js

@@ -4,7 +4,10 @@ const theme = {
   main_type: 'dark',
   main_background: '#fff',
 
+  fontWhite1: '#ddd',
+
   selectionAntName: 'blue',
+  aceEditorTheme: 'twilight',
 
   border: '#555',
 
@@ -18,6 +21,7 @@ const theme = {
   gridheader_background: '#222',
   gridbody_background: '#000',
   scrollbar_background: '#444',
+  input_background: '#333',
 
   statusBarBackground: '#00c',
 };

packages/web/src/theme/light.js

@@ -5,6 +5,7 @@ const theme = {
   main_background: '#fff',
 
   selectionAntName: 'blue',
+  aceEditorTheme: 'github',
 
   border: '#ccc',
 
@@ -19,6 +20,7 @@ const theme = {
   gridheader_type: 'light',
   gridbody_background: '#fff',
   scrollbar_background: '#ddd',
+  input_background: '#fff',
 
   statusBarBackground: '#00c',
 };

packages/web/src/themes/ThemeHelmet.js

@@ -42,6 +42,22 @@ export default function ThemeHelmet() {
         body *::-webkit-scrollbar-thumb:hover {
           background-color: ${theme.scrollbar_background4};
         }
+
+        input {
+          background-color: ${theme.input_background};
+          color: ${theme.input_font1};
+        }
+        
+        select {
+          background-color: ${theme.input_background};
+          color: ${theme.input_font1};
+        }
+
+        textarea {
+          background-color: ${theme.input_background};
+          color: ${theme.input_font1};
+        }
+
         `}</style>
     </Helmet>
   );