themable colors

packages/web/src/Screen.js

@@ -99,6 +99,10 @@ const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)`
   bottom: ${dimensions.statusBar.height}px;
 `;
 
+// const StyledRoot = styled.div`
+//   // color: ${(props) => props.theme.fontColor};
+// `;
+
 export default function Screen() {
   const theme = useTheme();
   const currentWidget = useCurrentWidget();

packages/web/src/TabsPanel.js

@@ -47,7 +47,7 @@ const DbNameWrapper = styled.div`
   }
   background-color: ${(props) =>
     // @ts-ignore
-    props.selected ? props.theme.mainAreaBackground : 'inherit'};
+    props.selected ? props.theme.tabsPanelSelectedBackground : 'inherit'};
 `;
 
 // const DbNameWrapperInner = styled.div`
@@ -71,7 +71,7 @@ const FileTabItem = styled.div`
   }
   background-color: ${(props) =>
     // @ts-ignore
-    props.selected ? props.theme.mainAreaBackground : 'inherit'};
+    props.selected ? props.theme.tabsPanelSelectedBackground : 'inherit'};
 `;
 
 const FileNameWrapper = styled.span`

packages/web/src/datagrid/DataGridCore.js

@@ -29,6 +29,7 @@ import ErrorInfo from '../widgets/ErrorInfo';
 import { openNewTab } from '../utility/common';
 import { useSetOpenedTabs } from '../utility/globalState';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -69,7 +70,7 @@ const TableHeaderCell = styled.td`
   padding: 0;
   // padding: 2px;
   margin: 0;
-  background-color: #f6f7f9;
+  background-color: ${(props) => props.theme.gridHeaderBackground};
   overflow: hidden;
 `;
 const TableFilterCell = styled.td`
@@ -88,7 +89,7 @@ const FocusField = styled.input`
 
 const RowCountLabel = styled.div`
   position: absolute;
-  background-color: lightgoldenrodyellow;
+  background-color: ${(props) => props.theme.gridRowCountLabel};
   right: 40px;
   bottom: 20px;
 `;
@@ -269,6 +270,8 @@ export default function DataGridCore(props) {
     }
   }, [stableStringify(display && display.groupColumns)]);
 
+  const theme = useTheme();
+
   const rowCountInfo = React.useMemo(() => {
     if (selectedCells.length > 1 && selectedCells.every((x) => _.isNumber(x[0]) && _.isNumber(x[1]))) {
       let sum = _.sumBy(selectedCells, (cell) => {
@@ -942,9 +945,10 @@ export default function DataGridCore(props) {
       >
         <TableHead>
           <TableHeaderRow ref={headerRowRef}>
-            <TableHeaderCell data-row="header" data-col="header" />
+            <TableHeaderCell data-row="header" data-col="header" theme={theme} />
             {visibleRealColumns.map((col) => (
               <TableHeaderCell
+                theme={theme}
                 data-row="header"
                 data-col={col.colIndex}
                 key={col.uniqueName}
@@ -1036,7 +1040,7 @@ export default function DataGridCore(props) {
         onScroll={handleRowScroll}
         viewportRatio={visibleRowCountUpperBound / grider.rowCount}
       />
-      {allRowCount && <RowCountLabel>{rowCountInfo}</RowCountLabel>}
+      {allRowCount && <RowCountLabel theme={theme}>{rowCountInfo}</RowCountLabel>}
       {props.toolbarPortalRef &&
         props.toolbarPortalRef.current &&
         tabVisible &&

packages/web/src/datagrid/DataGridRow.js

@@ -3,14 +3,14 @@ import moment from 'moment';
 import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-import { findExistingChangeSetItem } from '@dbgate/datalib';
 import InplaceEditor from './InplaceEditor';
 import { cellIsSelected } from './gridutil';
 import { isTypeLogical } from '@dbgate/tools';
+import useTheme from '../theme/useTheme';
 
 const TableBodyCell = styled.td`
   font-weight: normal;
-  border: 1px solid #c0c0c0;
+  border: 1px solid ${(props) => props.theme.border};
   // border-collapse: collapse;
   padding: 2px;
   white-space: nowrap;
@@ -22,22 +22,21 @@ const TableBodyCell = styled.td`
     !props.isFocusedColumn &&
     `
     background: initial;
-    background-color: deepskyblue;
+    background-color: ${props.theme.gridSelectionBackground};
-    color: white;`}
+    color: ${props.theme.gridSelectionFont};`}
 
   ${(props) =>
     props.isFrameSelected &&
     `
-      outline: 3px solid cyan;
+      outline: 3px solid ${props.theme.gridSelectionBackground};
       outline-offset: -3px;`}
   
   ${(props) =>
     props.isAutofillSelected &&
     !props.isFocusedColumn &&
     `
-    background: initial;
+      outline: 3px solid ${props.theme.gridSelectionBackground};
-    background-color: magenta;
+      outline-offset: -3px;`}
-    color: white;`}
 
     ${(props) =>
     props.isModifiedRow &&
@@ -47,7 +46,7 @@ const TableBodyCell = styled.td`
     !props.isModifiedCell &&
     !props.isFocusedColumn &&
     `
-  background-color: #FFFFDB;`}
+  background-color: ${props.theme.gridModifiedRowBackground};`}
   ${(props) =>
     !props.isSelected &&
     !props.isAutofillSelected &&
@@ -55,7 +54,7 @@ const TableBodyCell = styled.td`
     !props.isFocusedColumn &&
     props.isModifiedCell &&
     `
-      background-color: bisque;`}
+      background-color: ${props.theme.gridModifiedCellBackground};`}
 
   ${(props) =>
     !props.isSelected &&
@@ -63,7 +62,7 @@ const TableBodyCell = styled.td`
     !props.isFocusedColumn &&
     props.isInsertedRow &&
     `
-      background-color: #DBFFDB;`}
+      background-color: ${props.theme.gridInsertedRowBackground};`}
 
   ${(props) =>
     !props.isSelected &&
@@ -71,13 +70,13 @@ const TableBodyCell = styled.td`
     !props.isFocusedColumn &&
     props.isDeletedRow &&
     `
-      background-color: #FFDBFF;
+      background-color: ${props.theme.gridDeletedRowBackground};
   `}
 
   ${(props) =>
     props.isFocusedColumn &&
     `
-    background-color: lightgoldenrodyellow;
+    background-color: ${props.theme.gridFocusedColumnBackground};
   `}
   
     ${(props) =>
@@ -100,27 +99,27 @@ const NullSpan = styled.span`
 
 const TableBodyRow = styled.tr`
   // height: 35px;
-  background-color: #ffffff;
+  background-color: ${(props) => props.theme.gridRowBackground};
   &:nth-child(6n + 3) {
-    background-color: #ebebeb;
+    background-color: ${(props) => props.theme.gridRowBackground2};
   }
   &:nth-child(6n + 6) {
-    background-color: #ebf5ff;
+    background-color: ${(props) => props.theme.gridRowBackground3};
   }
 `;
 
 const TableHeaderCell = styled.td`
-  border: 1px solid #c0c0c0;
+  border: 1px solid ${(props) => props.theme.border};
   text-align: left;
   padding: 2px;
-  background-color: #f6f7f9;
+  background-color: ${(props) => props.theme.gridHeaderBackground};
   overflow: hidden;
 `;
 
 const AutoFillPoint = styled.div`
   width: 8px;
   height: 8px;
-  background-color: #1a73e8;
+  background-color: ${(props) => props.theme.gridAutoFillBackground};
   position: absolute;
   right: 0px;
   bottom: 0px;
@@ -201,6 +200,8 @@ function DataGridRow(props) {
 
   // console.log('RENDER ROW', rowIndex);
 
+  const theme = useTheme();
+
   const rowData = grider.getRowData(rowIndex);
   const rowStatus = grider.getRowStatus(rowIndex);
 
@@ -215,13 +216,14 @@ function DataGridRow(props) {
   if (!rowData) return null;
 
   return (
-    <TableBodyRow style={{ height: `${rowHeight}px` }}>
+    <TableBodyRow style={{ height: `${rowHeight}px` }} theme={theme}>
-      <TableHeaderCell data-row={rowIndex} data-col="header">
+      <TableHeaderCell data-row={rowIndex} data-col="header" theme={theme}>
         {rowIndex + 1}
       </TableHeaderCell>
       {visibleRealColumns.map((col) => (
         <TableBodyCell
           key={col.uniqueName}
+          theme={theme}
           style={{
             width: col.widthPx,
             minWidth: col.widthPx,
@@ -261,7 +263,7 @@ function DataGridRow(props) {
             </>
           )}
           {autofillMarkerCell && autofillMarkerCell[1] == col.colIndex && autofillMarkerCell[0] == rowIndex && (
-            <AutoFillPoint className="autofillHandleMarker"></AutoFillPoint>
+            <AutoFillPoint className="autofillHandleMarker" theme={theme}></AutoFillPoint>
           )}
         </TableBodyCell>
       ))}

packages/web/src/theme/light.js

@@ -1,8 +1,10 @@
 export default {
-  background: '#222',
+  border: '#ccc',
-  iconFontColor: '#eee',
+
-  backgroundHover: '#555',
+  mainAreaBackground: '#eee',
-  backgroundSelected: '#4CAF50',
+  mainFont: 'black',
+  mainFontGray: 'gray',
+  mainFontActive: 'blue',
 
   leftPanelBackground: '#ccc',
 
@@ -10,11 +12,28 @@ export default {
   widgetIconFontColor: '#eee',
   widgetBackgroundHover: '#555',
   widgetBackgroundSelected: '#4CAF50',
+  widgetTitleBackground: 'gray',
 
-  tabsPanelBackground: '#ccc',
+  tabsPanelBackground: '#ddd',
+  tabsPanelBackgroundHover: '#ccc',
+  tabsPanelBackgroundHoverClick: '#aaa',
+  tabsPanelSelectedBackground: '#eee',
   tabsPanelHoverFont: '#338',
 
   statusBarBackground: '#00c',
   toolBarBackground: '#eee',
-  mainAreaBackground: '#eee',
+
+  gridHeaderBackground: '#f6f7f9',
+  gridRowCountLabel: 'lightgoldenrodyellow',
+  gridSelectionBackground: 'deepskyblue',
+  gridSelectionFont: 'white',
+  gridModifiedRowBackground: '#FFFFDB',
+  gridModifiedCellBackground: 'bisque',
+  gridInsertedRowBackground: '#DBFFDB',
+  gridDeletedRowBackground: '#FFDBFF',
+  gridFocusedColumnBackground: 'lightgoldenrodyellow',
+  gridRowBackground: '#ffffff',
+  gridRowBackground2: '#ebebeb',
+  gridRowBackground3: '#ebf5ff',
+  gridAutoFillBackground: '#1a73e8',
 };

packages/web/src/themes/ThemeHelmet.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
+import useTheme from '../theme/useTheme';
 
 export default function ThemeHelmet() {
+  const theme = useTheme();
   return (
     <Helmet>
       <style>{`
@@ -14,6 +16,10 @@ export default function ThemeHelmet() {
         .color-magenta-icon { color: #808 }
         .color-yellow-icon { color: #880 }
         .color-green-icon { color: #0A3; }
+
+        body {
+          color: ${theme.mainFont};
+        }
         `}</style>
     </Helmet>
   );

packages/web/src/widgets/ToolbarButton.js

@@ -3,38 +3,39 @@ import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
 import dimensions from '../theme/dimensions';
+import useTheme from '../theme/useTheme';
 
 const ButtonDiv = styled.div`
   padding: 5px 15px;
   // margin: 2px;
-  color: black;
+  color: ${(props) => props.theme.mainFont};
   border: 0;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid ${(props) => props.theme.border};
   height: ${dimensions.toolBar.height}px;
 
   ${(props) =>
     !props.disabled &&
     `
   &:hover {
-    background-color: #CCC;
+    background-color: ${props.theme.tabsPanelBackgroundHover} ;
   }
 
   &:active:hover {
-    background-color: #AAA;
+    background-color: ${props.theme.tabsPanelBackgroundHoverClick};
   }
   `}
 
   ${(props) =>
     props.disabled &&
     `
-    color: gray;
+    color: ${props.theme.mainFontGray};
   `}
 `;
 
 const StyledIconSpan = styled.span`
   margin-right: 5px;
   // font-size: 18px;
-  color: ${(props) => (props.disabled ? 'gray' : 'blue')};
+  color: ${(props) => (props.disabled ? props.theme.mainFontGray : props.theme.mainFontActive)};
 `;
 
 const ButtonDivInner = styled.div`
@@ -44,8 +45,10 @@ const ButtonDivInner = styled.div`
 `;
 
 export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined, patchY = 2 }) {
+  const theme = useTheme();
   return (
     <ButtonDiv
+      theme={theme}
       onClick={() => {
         if (!disabled && onClick) onClick();
       }}
@@ -53,7 +56,7 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
     >
       <ButtonDivInner patchY={patchY}>
         {icon && (
-          <StyledIconSpan disabled={disabled}>
+          <StyledIconSpan disabled={disabled} theme={theme}>
             <FontIcon icon={icon} />
           </StyledIconSpan>
         )}

packages/web/src/widgets/WidgetStyles.js

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
+import useTheme from '../theme/useTheme';
 // import theme from '../theme';
 import { useLeftPanelWidth } from '../utility/globalState';
 
@@ -62,14 +63,15 @@ const StyledWidgetTitle = styled.div`
   padding: 5px;
   font-weight: bold;
   text-transform: uppercase;
-  background-color: gray;
+  background-color: ${(props) => props.theme.widgetTitleBackground};
-  border: 1px solid #aaa;
+  border: 1px solid ${(props) => props.theme.border};
-  // background-color: #CEC;
 `;
 
 export function WidgetTitle({ children, inputRef = undefined, onClick = undefined }) {
+  const theme = useTheme();
   return (
     <StyledWidgetTitle
+      theme={theme}
       onClick={() => {
         if (inputRef && inputRef.current) inputRef.current.focus();
         if (onClick) onClick();