feat: more black backgrounds

src/components/RootStyle.tsx

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+
+export const RootStyle = styled.div`
+  .Mui-selected,
+  .Mui-checked {
+    ${({ theme }) =>
+      theme.palette.mode === 'dark'
+        ? css`
+            color: ${theme.palette.primary.light} !important;
+          `
+        : ''};
+  }
+  .Mui-disabled {
+    ${({ theme }) =>
+      theme.palette.mode === 'dark'
+        ? css`
+            color: ${theme.palette.primary.dark} !important;
+            -webkit-text-fill-color: ${theme.palette.primary.light};
+          `
+        : ''};
+  }
+
+  label,
+  input,
+  p {
+    color: ${({ theme }) => theme.palette.text.primary};
+  }
+`;

src/components/TokenForm/GitTokenForm.tsx

@@ -11,7 +11,16 @@ import { getServiceBranchTypes, getServiceEmailTypes, getServiceTokenTypes, getS
 const AuthingLoginButton = styled(Button)`
   width: 100%;
 `;
-const GitTokenInput = styled(TextField)``;
+const GitTokenInput = styled(TextField)`
+  color: ${({ theme }) => theme.palette.text.primary};
+  input {
+    color: ${({ theme }) => theme.palette.text.primary};
+  }
+  p,
+  label {
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
+`;
 GitTokenInput.defaultProps = {
   fullWidth: true,
   variant: 'standard',

src/components/TokenForm/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React, { useEffect, useState } from 'react';
 import styled, { DefaultTheme, keyframes } from 'styled-components';
-import { Tab as TabRaw, ListItemText } from '@material-ui/core';
+import { Tab as TabRaw, ListItemText as ListItemTextRaw } from '@material-ui/core';
 import { TabPanel as TabPanelRaw, TabContext, TabList as TabListRaw } from '@material-ui/lab';
 import { SupportedStorageServices } from '@services/types';
 import { useTranslation } from 'react-i18next';
@@ -12,14 +12,31 @@ const Container = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
+  background-color: ${({ theme }) => theme.palette.background.paper};
+`;
+export const ListItemText: typeof ListItemTextRaw = styled(ListItemTextRaw)`
+  color: ${({ theme }) => theme.palette.text.primary};
+  input {
+    color: ${({ theme }) => theme.palette.text.primary};
+  }
+  p,
+  label {
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
 `;
 const TabPanel = styled(TabPanelRaw)`
   padding: 5px 0 !important;
   padding-left: 16px !important;
+  background-color: ${({ theme }) => theme.palette.background.paper};
+`;
+const TabList = styled(TabListRaw)`
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  & button {
+    background-color: ${({ theme }) => theme.palette.background.paper} !important;
+  }
 `;
-const TabList = styled(TabListRaw)``;
 const TabsContainer = styled.div`
-  background-color: ${({ theme }) => theme.palette.background.default};
+  background-color: ${({ theme }) => theme.palette.background.paper};
   color: ${({ theme }) => theme.palette.text.primary};
   display: flex;
   padding: 15px 0;

src/pages/AddWorkspace/Description.tsx

@@ -14,7 +14,10 @@ const Switch = styled(SwitchRaw)`
   }
 `;
 
-const Container = styled(Paper)``;
+const Container = styled(Paper)`
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
 
 /**
  * Introduce difference between main and sub wiki.

src/pages/AddWorkspace/FormComponents.tsx

@@ -5,13 +5,19 @@ import { useTranslation } from 'react-i18next';
 export const CreateContainer = styled(Paper)`
   padding: 10px;
   margin-top: 10px;
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.primary};
 `;
 export const LocationPickerContainer = styled.div`
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+export const LocationPickerInput = styled(TextField)`
+  background-color: ${({ theme }) => theme.palette.background.paper};
 `;
-export const LocationPickerInput = styled(TextField)``;
 LocationPickerInput.defaultProps = {
   fullWidth: true,
   variant: 'standard',
@@ -28,6 +34,7 @@ export const CloseButton = styled(Button)`
           white-space: nowrap;
         `}
   width: 100%;
+  background-color: ${({ theme }) => theme.palette.secondary[theme.palette.mode]};
 `;
 LocationPickerButton.defaultProps = {
   variant: 'contained',

src/pages/AddWorkspace/index.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
-import { Accordion, AccordionSummary, AccordionDetails, AppBar, Paper, Tab } from '@material-ui/core';
-import { TabPanel as TabPanelRaw, TabContext, TabList } from '@material-ui/lab';
+import { Accordion as AccordionRaw, AccordionSummary, AccordionDetails, AppBar, Paper as PaperRaw, Tab as TabRaw } from '@material-ui/core';
+import { TabPanel as TabPanelRaw, TabContext, TabList as TabListRaw } from '@material-ui/lab';
 import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
 
 import { SupportedStorageServices } from '@services/types';
@@ -30,6 +30,16 @@ enum CreateWorkspaceTabs {
   OpenLocalWiki = 'OpenLocalWiki',
 }
 
+export const Paper = styled(PaperRaw)`
+  border-color: ${({ theme }) => theme.palette.divider};
+  background: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+export const Accordion = styled(AccordionRaw)`
+  border-color: ${({ theme }) => theme.palette.divider};
+  background: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
 const Container = styled.main`
   display: flex;
   flex-direction: column;
@@ -41,11 +51,21 @@ const Container = styled.main`
 const TokenFormContainer = styled(Paper)`
   margin: 10px 0;
   padding: 5px 10px;
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.primary};
 `;
 TokenFormContainer.defaultProps = {
   square: true,
   elevation: 2,
 };
+const TabList = styled(TabListRaw)`
+  background: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+const Tab = styled(TabRaw)`
+  background: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
 const TabPanel = styled(TabPanelRaw)`
   margin-bottom: 10px;
   padding: 0 !important;

src/pages/EditWorkspace/index.tsx

@@ -12,12 +12,13 @@ import {
   TextField as TextFieldRaw,
   Divider,
   List as ListRaw,
-  ListItem,
-  ListItemText,
+  ListItem as ListItemRaw,
+  ListItemText as ListItemTextRaw,
   ListItemSecondaryAction,
   Switch,
   Typography,
   Link,
+  Paper,
 } from '@material-ui/core';
 import { Autocomplete } from '@material-ui/lab';
 import defaultIcon from '../../images/default-icon.png';
@@ -37,12 +38,13 @@ import { TokenForm } from '@/components/TokenForm';
 import { GitRepoUrlForm } from '../AddWorkspace/GitRepoUrlForm';
 import { isEqual } from 'lodash';
 
-const Root = styled.div`
+const Root = styled(Paper)`
   height: 100%;
   width: 100%;
   padding: 20px;
   display: flex;
   flex-direction: column;
+  background: ${({ theme }) => theme.palette.background.paper};
 `;
 const FlexGrow = styled.div`
   flex: 1;
@@ -130,6 +132,28 @@ const List = styled(ListRaw)`
     padding-bottom: 0;
   }
 `;
+export const ListItem: typeof ListItemRaw = styled(ListItemRaw)`
+  svg {
+    color: ${({ theme }) => theme.palette.action.active};
+  }
+  p,
+  label {
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
+  div[role='button'] {
+    color: ${({ theme }) => theme.palette.text.primary};
+  }
+`;
+export const ListItemText: typeof ListItemTextRaw = styled(ListItemTextRaw)`
+  color: ${({ theme }) => theme.palette.text.primary};
+  input {
+    color: ${({ theme }) => theme.palette.text.primary};
+  }
+  p,
+  label {
+    color: ${({ theme }) => theme.palette.text.secondary};
+  }
+`;
 
 const getValidIconPath = (iconPath?: string | null): string => {
   if (typeof iconPath === 'string') {

src/pages/Preferences/PreferenceComponents.tsx

@@ -71,7 +71,7 @@ export const ListItem: typeof ListItemRaw = styled(ListItemRaw)`
   label {
     color: ${({ theme }) => theme.palette.text.secondary};
   }
-  div[role=button] {
+  div[role='button'] {
     color: ${({ theme }) => theme.palette.text.primary};
   }
 `;

src/pages/Preferences/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
@@ -25,7 +25,6 @@ import { Miscellaneous } from './sections/Miscellaneous';
 
 const Root = styled.div`
   padding: 20px;
-  /* background: theme.palette.background.default; */
 `;
 
 const Inner = styled.div`

src/renderer.tsx

@@ -17,6 +17,7 @@ import { darkTheme, lightTheme } from '@services/theme/defaultTheme';
 import { initI18N } from './i18n';
 import 'electron-ipc-cat/fixContextIsolation';
 import { Pages } from './pages';
+import { RootStyle } from './components/RootStyle';
 
 function App(): JSX.Element {
   const theme = useThemeObservable();
@@ -28,7 +29,9 @@ function App(): JSX.Element {
           <CssBaseline />
           <React.Suspense fallback={<div />}>
             <I18nextProvider i18n={i18n}>
-              <Pages />
+              <RootStyle>
+                <Pages />
+              </RootStyle>
             </I18nextProvider>
           </React.Suspense>
         </LocalizationProvider>

src/services/theme/defaultTheme.ts

@@ -15,3 +15,5 @@ export const darkTheme = merge(
     }),
   ),
 ) as Theme;
+// DEBUG: console
+console.warn(`darkTheme`, JSON.stringify(darkTheme, null, '  '));