dark mode

Author: RafaelGB

src/components/NavBar.tsx

@@ -97,6 +97,10 @@ export function NavBar(navBarProps: NavBarProps) {
             }}
             MenuListProps={{
               "aria-labelledby": "long-button",
+              style: {
+                backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
+                color: StyleVariables.TEXT_NORMAL,
+              },
             }}
           >
             <MenuItem onClick={handleSettingsClick} disableRipple>

src/components/portals/DataviewFiltersPortal.tsx

@@ -93,6 +93,18 @@ const DataviewFiltersPortal = (props: DataviewFiltersProps) => {
           size="small"
           key={`Select-existedColumnSelector-${selectorProps.index}`}
           onChange={onchangeExistedColumnHandler(selectorProps.index)}
+          style={{
+            backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
+            color: StyleVariables.TEXT_NORMAL,
+          }}
+          MenuProps={{
+            PaperProps: {
+              sx: {
+                backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
+                color: StyleVariables.TEXT_NORMAL,
+              },
+            },
+          }}
         >
           {possibleColumns.map((key) => {
             return (
@@ -119,6 +131,18 @@ const DataviewFiltersPortal = (props: DataviewFiltersProps) => {
           value={selectorProps.currentOp}
           size="small"
           onChange={onChangeOperatorHandler(selectorProps.index)}
+          style={{
+            backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
+            color: StyleVariables.TEXT_NORMAL,
+          }}
+          MenuProps={{
+            PaperProps: {
+              sx: {
+                backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
+                color: StyleVariables.TEXT_NORMAL,
+              },
+            },
+          }}
         >
           {Object.entries(OperatorFilter).map(([key, value]) => {
             return (

src/components/reducers/DataviewFilters.tsx

@@ -13,7 +13,7 @@ export default function DataviewFilters(props: DataviewFiltersProps) {
   );
   const columns = tableState.columns((state) => state.columns);
   const dataActions = tableState.data((state) => state.actions);
-  const enableFilterHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
+  const enableFilterHandler = () => {
     // Invert the filter state
     const alteredFilterState = { ...filters };
     alteredFilterState.enabled = !alteredFilterState.enabled;