theme basic

packages/web/src/App.js

@@ -9,6 +9,7 @@ import {
   OpenedConnectionsProvider,
   LeftPanelWidthProvider,
   CurrentArchiveProvider,
+  CurrentThemeProvider,
 } from './utility/globalState';
 import { SocketProvider } from './utility/SocketProvider';
 import ConnectionsPinger from './utility/ConnectionsPinger';
@@ -28,10 +29,12 @@ function App() {
                   <ConnectionsPinger>
                     <ModalLayerProvider>
                       <CurrentArchiveProvider>
-                        <UploadsProvider>
+                        <CurrentThemeProvider>
-                          <ThemeHelmet />
+                          <UploadsProvider>
-                          <Screen />
+                            <ThemeHelmet />
-                        </UploadsProvider>
+                            <Screen />
+                          </UploadsProvider>
+                        </CurrentThemeProvider>
                       </CurrentArchiveProvider>
                     </ModalLayerProvider>
                   </ConnectionsPinger>

packages/web/src/Screen.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 
 import React from 'react';
-import theme from './theme';
+import dimensions from './theme/dimensions';
 import styled from 'styled-components';
 import TabsPanel from './TabsPanel';
 import TabContent from './TabContent';
@@ -14,14 +14,15 @@ import { useSplitterDrag, HorizontalSplitHandle } from './widgets/Splitter';
 import { ModalLayer } from './modals/showModal';
 import DragAndDropFileTarget from './DragAndDropFileTarget';
 import { useUploadsZone } from './utility/UploadsProvider';
+import useTheme from './theme/useTheme';
 
 const BodyDiv = styled.div`
   position: fixed;
-  top: ${theme.tabsPanel.height + theme.toolBar.height}px;
+  top: ${dimensions.tabsPanel.height + dimensions.toolBar.height}px;
   left: ${(props) => props.contentLeft}px;
-  bottom: ${theme.statusBar.height}px;
+  bottom: ${dimensions.statusBar.height}px;
   right: 0;
-  background-color: ${theme.mainArea.background};
+  background-color: ${(props) => props.theme.mainAreaBackground};
 `;
 
 const ToolBarDiv = styled.div`
@@ -29,36 +30,36 @@ const ToolBarDiv = styled.div`
   top: 0;
   left: 0;
   right: 0;
-  background-color: ${theme.toolBar.background};
+  background-color: ${(props) => props.theme.toolBarBackground};
-  height: ${theme.toolBar.height}px;
+  height: ${dimensions.toolBar.height}px;
 `;
 
 const IconBar = styled.div`
   position: fixed;
-  top: ${theme.toolBar.height}px;
+  top: ${dimensions.toolBar.height}px;
   left: 0;
-  bottom: ${theme.statusBar.height}px;
+  bottom: ${dimensions.statusBar.height}px;
-  width: ${theme.widgetMenu.iconSize}px;
+  width: ${dimensions.widgetMenu.iconSize}px;
-  background-color: ${theme.widgetMenu.background};
+  background-color: ${(props) => props.theme.widgetBackground};
 `;
 
 const LeftPanel = styled.div`
   position: fixed;
-  top: ${theme.toolBar.height}px;
+  top: ${dimensions.toolBar.height}px;
-  left: ${theme.widgetMenu.iconSize}px;
+  left: ${dimensions.widgetMenu.iconSize}px;
-  bottom: ${theme.statusBar.height}px;
+  bottom: ${dimensions.statusBar.height}px;
-  background-color: ${theme.leftPanel.background};
+  background-color: ${(props) => props.theme.leftPanelBackground};
   display: flex;
 `;
 
 const TabsPanelContainer = styled.div`
   display: flex;
   position: fixed;
-  top: ${theme.toolBar.height}px;
+  top: ${dimensions.toolBar.height}px;
   left: ${(props) => props.contentLeft}px;
-  height: ${theme.tabsPanel.height}px;
+  height: ${dimensions.tabsPanel.height}px;
   right: 0;
-  background-color: ${theme.tabsPanel.background};
+  background-color: ${(props) => props.theme.tabsPanelBackground};
   border-top: 1px solid #ccc;
 
   overflow-x: auto;
@@ -85,26 +86,27 @@ const TabsPanelContainer = styled.div`
 
 const StausBarContainer = styled.div`
   position: fixed;
-  height: ${theme.statusBar.height}px;
+  height: ${dimensions.statusBar.height}px;
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${theme.statusBar.background};
+  background-color: ${(props) => props.theme.statusBarBackground};
 `;
 
 const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)`
   position: absolute;
-  top: ${theme.toolBar.height}px;
+  top: ${dimensions.toolBar.height}px;
-  bottom: ${theme.statusBar.height}px;
+  bottom: ${dimensions.statusBar.height}px;
 `;
 
 export default function Screen() {
+  const theme = useTheme();
   const currentWidget = useCurrentWidget();
   const leftPanelWidth = useLeftPanelWidth();
   const setLeftPanelWidth = useSetLeftPanelWidth();
   const contentLeft = currentWidget
-    ? theme.widgetMenu.iconSize + leftPanelWidth + theme.splitter.thickness
+    ? dimensions.widgetMenu.iconSize + leftPanelWidth + dimensions.splitter.thickness
-    : theme.widgetMenu.iconSize;
+    : dimensions.widgetMenu.iconSize;
   const toolbarPortalRef = React.useRef();
   const onSplitDown = useSplitterDrag('clientX', (diff) => setLeftPanelWidth((v) => v + diff));
 
@@ -112,30 +114,30 @@ export default function Screen() {
 
   return (
     <div {...getRootProps()}>
-      <ToolBarDiv>
+      <ToolBarDiv theme={theme}>
         <ToolBar toolbarPortalRef={toolbarPortalRef} />
       </ToolBarDiv>
-      <IconBar>
+      <IconBar theme={theme}>
         <WidgetIconPanel />
       </IconBar>
       {!!currentWidget && (
-        <LeftPanel>
+        <LeftPanel theme={theme}>
           <WidgetContainer />
         </LeftPanel>
       )}
       {!!currentWidget && (
         <ScreenHorizontalSplitHandle
           onMouseDown={onSplitDown}
-          style={{ left: leftPanelWidth + theme.widgetMenu.iconSize }}
+          style={{ left: leftPanelWidth + dimensions.widgetMenu.iconSize }}
         />
       )}
-      <TabsPanelContainer contentLeft={contentLeft}>
+      <TabsPanelContainer contentLeft={contentLeft} theme={theme}>
         <TabsPanel></TabsPanel>
       </TabsPanelContainer>
-      <BodyDiv contentLeft={contentLeft}>
+      <BodyDiv contentLeft={contentLeft} theme={theme}>
         <TabContent toolbarPortalRef={toolbarPortalRef} />
       </BodyDiv>
-      <StausBarContainer>
+      <StausBarContainer theme={theme}>
         <StatusBar />
       </StausBarContainer>
       <ModalLayer />

packages/web/src/TabsPanel.js

@@ -1,13 +1,13 @@
 import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-import theme from './theme';
 import { DropDownMenuItem, DropDownMenuDivider } from './modals/DropDownMenu';
 
 import { useOpenedTabs, useSetOpenedTabs, useCurrentDatabase, useSetCurrentDatabase } from './utility/globalState';
 import { showMenu } from './modals/DropDownMenu';
 import { getConnectionInfo } from './utility/metadataLoaders';
 import { FontIcon } from './icons';
+import useTheme from './theme/useTheme';
 
 // const files = [
 //   { name: 'app.js' },
@@ -47,7 +47,7 @@ const DbNameWrapper = styled.div`
   }
   background-color: ${(props) =>
     // @ts-ignore
-    props.selected ? theme.mainArea.background : 'inherit'};
+    props.selected ? props.theme.mainAreaBackground : 'inherit'};
 `;
 
 // const DbNameWrapperInner = styled.div`
@@ -67,11 +67,11 @@ const FileTabItem = styled.div`
   cursor: pointer;
   user-select: none;
   &: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 FileNameWrapper = styled.span`
@@ -82,7 +82,7 @@ const CloseButton = styled(FontIcon)`
   margin-left: 5px;
   color: gray;
   &:hover {
-    color: ${theme.tabsPanel.hoverFont};
+    color: ${(props) => props.theme.tabsPanelHoverFont};
   }
 `;
 
@@ -124,6 +124,7 @@ function getDbIcon(key) {
 
 export default function TabsPanel() {
   // const formatDbKey = (conid, database) => `${database}-${conid}`;
+  const theme = useTheme();
 
   const tabs = useOpenedTabs();
   const setOpenedTabs = useSetOpenedTabs();
@@ -252,6 +253,7 @@ export default function TabsPanel() {
             // @ts-ignore
             selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}
             onClick={() => handleSetDb(tabsByDb[dbKey][0].props)}
+            theme={theme}
           >
             <FontIcon icon={getDbIcon(dbKey)} /> {tabsByDb[dbKey][0].tabDbName}
           </DbNameWrapper>
@@ -261,6 +263,7 @@ export default function TabsPanel() {
                 {...tab}
                 title={tab.tooltip}
                 key={tab.tabid}
+                theme={theme}
                 onClick={(e) => handleTabClick(e, tab.tabid)}
                 onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
                 onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)}
@@ -270,6 +273,7 @@ export default function TabsPanel() {
                 <CloseButton
                   icon="icon close"
                   className="tabCloseButton"
+                  theme={theme}
                   onClick={(e) => {
                     e.preventDefault();
                     closeTab(tab.tabid);

packages/web/src/datagrid/InplaceEditor.js

@@ -3,7 +3,6 @@
 import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-import theme from '../theme';
 import keycodes from '../utility/keycodes';
 
 const StyledInput = styled.input`

packages/web/src/datagrid/ManagerStyles.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import theme from '../theme';
 
 export const ManagerInnerContainer = styled.div`
   flex: 1 1;

packages/web/src/datagrid/ReferenceHeader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 import styled from 'styled-components';
-import theme from '../theme';
+import dimensions from '../theme/dimensions';
 import { FontIcon } from '../icons';
 
 const Container = styled.div`
@@ -9,8 +9,8 @@ const Container = styled.div`
   justify-content: space-between;
   align-items: center;
   background: #ddeeee;
-  height: ${theme.toolBar.height}px;
+  height: ${dimensions.toolBar.height}px;
-  min-height: ${theme.toolBar.height}px;
+  min-height: ${dimensions.toolBar.height}px;
   overflow: hidden;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;

packages/web/src/freetable/MacroDetail.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 import styled from 'styled-components';
 import { TabPage, TabControl } from '../widgets/TabControl';
-import theme from '../theme';
+import dimensions from '../theme/dimensions';
 import JavaScriptEditor from '../sqleditor/JavaScriptEditor';
 import MacroParameters from './MacroParameters';
 import { WidgetTitle } from '../widgets/WidgetStyles';
@@ -15,8 +15,8 @@ const Container = styled.div`
   justify-content: space-between;
   align-items: center;
   background: #ddeeee;
-  height: ${theme.toolBar.height}px;
+  height: ${dimensions.toolBar.height}px;
-  min-height: ${theme.toolBar.height}px;
+  min-height: ${dimensions.toolBar.height}px;
   overflow: hidden;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;

packages/web/src/icons.js

@@ -34,6 +34,7 @@ const iconNames = {
   'icon format-code': 'mdi mdi-code-tags-check',
   'icon show-wizard': 'mdi mdi-comment-edit',
   'icon disconnected': 'mdi mdi-lan-disconnect',
+  'icon theme': 'mdi mdi-brightness-6',
 
   'icon run': 'mdi mdi-play',
   'icon chevron-down': 'mdi mdi-chevron-down',

packages/web/src/tabs/ViewDataTab.js

@@ -1,7 +1,4 @@
 import React from 'react';
-import useFetch from '../utility/useFetch';
-import styled from 'styled-components';
-import theme from '../theme';
 import DataGrid from '../datagrid/DataGrid';
 import { ViewGridDisplay, createGridCache, createChangeSet } from '@dbgate/datalib';
 import { useConnectionInfo, useViewInfo } from '../utility/metadataLoaders';

packages/web/src/theme.js

@@ -1,33 +0,0 @@
-export default {
-  widgetMenu: {
-    iconSize: 60,
-    background: '#222',
-    iconFontSize: '23pt',
-    iconFontColor: '#eee',
-    backgroundHover: '#555',
-    backgroundSelected: '#4CAF50',
-  },
-  leftPanel: {
-    // width: 300,
-    background: '#ccc',
-  },
-  tabsPanel: {
-    height: 53,
-    background: '#ddd',
-    hoverFont: '#338',
-  },
-  statusBar: {
-    height: 20,
-    background: '#00c',
-  },
-  toolBar: {
-    height: 30,
-    background: '#eee',
-  },
-  mainArea: {
-    background: '#eee',
-  },
-  splitter: {
-    thickness: 3,
-  },
-};

packages/web/src/theme/_theme.bak.js

@@ -0,0 +1,33 @@
+// export default {
+//   widgetMenu: {
+//     iconSize: 60,
+//     background: '#222',
+//     iconFontSize: '23pt',
+//     iconFontColor: '#eee',
+//     backgroundHover: '#555',
+//     backgroundSelected: '#4CAF50',
+//   },
+//   leftPanel: {
+//     // width: 300,
+//     background: '#ccc',
+//   },
+//   tabsPanel: {
+//     height: 53,
+//     background: '#ddd',
+//     hoverFont: '#338',
+//   },
+//   statusBar: {
+//     height: 20,
+//     background: '#00c',
+//   },
+//   toolBar: {
+//     height: 30,
+//     background: '#eee',
+//   },
+//   mainArea: {
+//     background: '#eee',
+//   },
+//   splitter: {
+//     thickness: 3,
+//   },
+// };

packages/web/src/theme/dark.js

@@ -0,0 +1,20 @@
+export default {
+  background: '#000',
+  iconFontColor: '#eee',
+  backgroundHover: '#555',
+  backgroundSelected: '#4CAF50',
+
+  leftPanelBackground: '#ccc',
+
+  widgetBackground: '#222',
+  widgetIconFontColor: '#eee',
+  widgetBackgroundHover: '#555',
+  widgetBackgroundSelected: '#4CAF50',
+
+  tabsPanelBackground: '#ccc',
+  tabsPanelHoverFont: '#338',
+
+  statusBarBackground: '#00c',
+  toolBarBackground: '#eee',
+  mainAreaBackground: '#333',
+};

packages/web/src/theme/dimensions.js

@@ -0,0 +1,18 @@
+export default {
+  widgetMenu: {
+    iconSize: 60,
+    iconFontSize: '23pt',
+  },
+  tabsPanel: {
+    height: 53,
+  },
+  statusBar: {
+    height: 20,
+  },
+  toolBar: {
+    height: 30,
+  },
+  splitter: {
+    thickness: 3,
+  },
+};

packages/web/src/theme/light.js

@@ -0,0 +1,20 @@
+export default {
+  background: '#222',
+  iconFontColor: '#eee',
+  backgroundHover: '#555',
+  backgroundSelected: '#4CAF50',
+
+  leftPanelBackground: '#ccc',
+
+  widgetBackground: '#222',
+  widgetIconFontColor: '#eee',
+  widgetBackgroundHover: '#555',
+  widgetBackgroundSelected: '#4CAF50',
+
+  tabsPanelBackground: '#ccc',
+  tabsPanelHoverFont: '#338',
+
+  statusBarBackground: '#00c',
+  toolBarBackground: '#eee',
+  mainAreaBackground: '#eee',
+};

packages/web/src/theme/useTheme.js

@@ -0,0 +1,10 @@
+import { useCurrentTheme } from '../utility/globalState';
+import light from './light';
+import dark from './dark';
+
+const themes = { light, dark };
+
+export default function useTheme() {
+  const currentTheme = useCurrentTheme();
+  return themes[currentTheme];
+}

packages/web/src/utility/globalState.js

@@ -119,3 +119,7 @@ export { LeftPanelWidthProvider, useLeftPanelWidth, useSetLeftPanelWidth };
 const [CurrentArchiveProvider, useCurrentArchive, useSetCurrentArchive] = createGlobalState('default');
 
 export { CurrentArchiveProvider, useCurrentArchive, useSetCurrentArchive };
+
+const [CurrentThemeProvider, useCurrentTheme, useSetCurrentTheme] = createGlobalState('light');
+
+export { CurrentThemeProvider, useCurrentTheme, useSetCurrentTheme };

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};
+  color: ${(props) => props.theme.widgetIconFontColor};
-  font-size: ${theme.widgetMenu.iconFontSize};
+  font-size: ${dimensions.widgetMenu.iconFontSize};
-  height: ${theme.widgetMenu.iconSize}px;
+  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>