theme basic

packages/web/src/widgets/FormStyledButton.js

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
-import theme from '../theme';
+import dimensions from '../theme/dimensions';
 
 const ButtonInput = styled.input`
-  // height: ${theme.toolBar.height - 5}px;
+  // height: ${dimensions.toolBar.height - 5}px;
    border: 1px solid #2e6da4;
   padding: 5px;
   margin: 2px;

packages/web/src/widgets/InlineButton.js

@@ -1,7 +1,6 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
-import theme from '../theme';
 
 const ButtonDiv = styled.div`
   //box-shadow: 3px 4px 0px 0px #899599;

packages/web/src/widgets/Splitter.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 import useDimensions from '../utility/useDimensions';
-import theme from '../theme';
+import dimensions from '../theme/dimensions';
 
 const SplitterMainBase = styled.div`
   flex: 1;
@@ -28,7 +28,7 @@ const HorizontalMainContainer = styled(SplitterMainBase)`
 
 export const VerticalSplitHandle = styled.div`
   background-color: #ccc;
-  height: ${theme.splitter.thickness}px;
+  height: ${dimensions.splitter.thickness}px;
   cursor: row-resize;
   &:hover {
     background-color: #AAA;
@@ -37,7 +37,7 @@ export const VerticalSplitHandle = styled.div`
 
 export const HorizontalSplitHandle = styled.div`
   background-color: #ccc;
-  width: ${theme.splitter.thickness}px;
+  width: ${dimensions.splitter.thickness}px;
   cursor: col-resize;
   &:hover {
     background-color: #AAA;

packages/web/src/widgets/TabControl.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import _ from 'lodash';
 import styled from 'styled-components';
-import theme from '../theme';
+import useTheme from '../theme/useTheme';
+import dimensions from '../theme/dimensions';
 
 const TabItem = styled.div`
   border-right: 1px solid white;
@@ -11,11 +12,11 @@ const TabItem = styled.div`
   align-items: center;
   cursor: pointer;
   &:hover {
-    color: ${theme.tabsPanel.hoverFont};
+    color: ${(props) => props.theme.tabsPanelHoverFont};
   }
   background-color: ${(props) =>
     // @ts-ignore
-    props.selected ? theme.mainArea.background : 'inherit'};
+    props.selected ? props.theme.mainAreaBackground : 'inherit'};
 `;
 
 const TabNameWrapper = styled.span`
@@ -41,9 +42,9 @@ const TabContainer = styled.div`
 
 const TabsContainer = styled.div`
   display: flex;
-  height: ${theme.tabsPanel.height}px;
+  height: ${dimensions.tabsPanel.height}px;
   right: 0;
-  background-color: ${theme.tabsPanel.background};
+  background-color: ${(props) => props.theme.tabsPanelBackground};
 `;
 
 const TabContentContainer = styled.div`
@@ -72,6 +73,8 @@ export function TabControl({ children, activePageIndex = undefined }) {
     if (activePageIndex != null) setValue(activePageIndex);
   }, [activePageIndex]);
 
+  const theme = useTheme();
+
   // // cleanup closed tabs
   // if (_.difference(_.keys(mountedTabs), _.map(childrenArray, 'props.key')).length > 0) {
   //   setMountedTabs(_.pickBy(mountedTabs, (v, k) => childrenArray.find((x) => x.props.key == k)));
@@ -79,12 +82,12 @@ export function TabControl({ children, activePageIndex = undefined }) {
 
   return (
     <MainContainer>
-      <TabsContainer>
+      <TabsContainer theme={theme}>
         {childrenArray
           .filter((x) => x.props)
           .map((tab, index) => (
             // @ts-ignore
-            <TabItem key={index} onClick={() => setValue(index)} selected={value == index}>
+            <TabItem key={index} onClick={() => setValue(index)} selected={value == index} theme={theme}>
               <TabNameWrapper>{tab.props.label}</TabNameWrapper>
             </TabItem>
           ))}

packages/web/src/widgets/Toolbar.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import ToolbarButton from './ToolbarButton';
 import useNewQuery from '../query/useNewQuery';
 import { useConfig } from '../utility/metadataLoaders';
-import { useSetOpenedTabs, useOpenedTabs } from '../utility/globalState';
+import { useSetOpenedTabs, useOpenedTabs, useCurrentTheme, useSetCurrentTheme } from '../utility/globalState';
 import { openNewTab } from '../utility/common';
 import useNewFreeTable from '../freetable/useNewFreeTable';
 import ImportExportModal from '../modals/ImportExportModal';
@@ -25,6 +25,8 @@ export default function ToolBar({ toolbarPortalRef }) {
   const setOpenedTabs = useSetOpenedTabs();
   const openedTabs = useOpenedTabs();
   const showModal = useShowModal();
+  const currentTheme = useCurrentTheme();
+  const setCurrentTheme = useSetCurrentTheme();
 
   React.useEffect(() => {
     window['dbgate_createNewConnection'] = modalState.open;
@@ -47,6 +49,11 @@ export default function ToolBar({ toolbarPortalRef }) {
     ));
   };
 
+  const switchTheme = () => {
+    if (currentTheme == 'light') setCurrentTheme('dark');
+    else setCurrentTheme('light');
+  };
+
   function openTabFromButton(button) {
     if (openedTabs.find((x) => x.tabComponent == 'InfoPageTab' && x.props && x.props.page == button.page)) {
       setOpenedTabs((tabs) =>
@@ -100,6 +107,9 @@ export default function ToolBar({ toolbarPortalRef }) {
       <ToolbarButton onClick={showImport} icon="icon import">
         Import data
       </ToolbarButton>
+      <ToolbarButton onClick={switchTheme} icon="icon theme">
+        Switch theme
+      </ToolbarButton>
 
       <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
     </ToolbarContainer>

packages/web/src/widgets/ToolbarButton.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
-import theme from '../theme';
+import dimensions from '../theme/dimensions';
 
 const ButtonDiv = styled.div`
   padding: 5px 15px;
@@ -10,7 +10,7 @@ const ButtonDiv = styled.div`
   color: black;
   border: 0;
   border-right: 1px solid #ccc;
-  height: ${theme.toolBar.height}px;
+  height: ${dimensions.toolBar.height}px;
 
   ${(props) =>
     !props.disabled &&

packages/web/src/widgets/WidgetIconPanel.js

@@ -1,25 +1,27 @@
 import React from 'react';
-import theme from '../theme';
+import dimensions from '../theme/dimensions';
 import styled from 'styled-components';
 import { useCurrentWidget, useSetCurrentWidget } from '../utility/globalState';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const IconWrapper = styled.div`
-  color: ${theme.widgetMenu.iconFontColor};
-  font-size: ${theme.widgetMenu.iconFontSize};
-  height: ${theme.widgetMenu.iconSize}px;
+  color: ${(props) => props.theme.widgetIconFontColor};
+  font-size: ${dimensions.widgetMenu.iconFontSize};
+  height: ${dimensions.widgetMenu.iconSize}px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: ${(props) =>
     // @ts-ignore
-    props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit'};
+    props.isSelected ? props.theme.widgetBackgroundSelected : 'inherit'};
   &:hover {
-    background-color: ${theme.widgetMenu.backgroundHover};
+    background-color: ${(props) => props.theme.widgetBackgroundHover};
   }
 `;
 
 export default function WidgetIconPanel() {
+  const theme = useTheme();
   const widgets = [
     {
       icon: 'icon database',
@@ -62,6 +64,7 @@ export default function WidgetIconPanel() {
           isSelected={name === currentWidget}
           onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
           title={title}
+          theme={theme}
         >
           <FontIcon icon={icon} />
         </IconWrapper>