themable colors

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;
-  border: 1px solid #aaa;
-  // background-color: #CEC;
+  background-color: ${(props) => props.theme.widgetTitleBackground};
+  border: 1px solid ${(props) => props.theme.border};
 `;
 
 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();