feat: theme for dark mode (#982)

Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>

apps/web/src/components/workspace-modal/styles.ts

@@ -57,8 +57,9 @@ export const StyledCard = styled.div<{
     ...displayFlex('flex-start', 'flex-start'),
     marginBottom: '24px',
     transition: 'background .2s',
+    background: theme.mode === 'light' ? '#FFF' : '#2C2C2C',
     ':hover': {
-      background: theme.colors.hoverBackground,
+      background: theme.colors.cardHoverBackground,
       '.add-icon': {
         borderColor: theme.colors.primaryColor,
         color: theme.colors.primaryColor,
@@ -135,14 +136,13 @@ export const StyleWorkspaceAdd = styled.div(() => {
     ...displayFlex('center', 'center'),
   };
 });
-export const StyledModalHeader = styled('div')(({ theme }) => {
+export const StyledModalHeader = styled('div')(() => {
   return {
     width: '100%',
     height: '72px',
     position: 'absolute',
     left: 0,
     top: 0,
-    background: theme.colors.pageBackground,
     borderRadius: '24px 24px 0 0',
     padding: '0 40px',
     ...displayFlex('space-between', 'center'),

apps/web/src/components/workspace-slider-bar/style.ts

@@ -7,7 +7,7 @@ export const StyledSliderBar = styled.div<{ show: boolean }>(
       width: show ? '256px' : '0',
       height: '100vh',
       minHeight: '450px',
-      background: theme.mode === 'dark' ? '#272727' : '#F9F9FB',
+      background: theme.colors.hubBackground,
       boxShadow: theme.shadow.modal,
       transition: 'width .15s, padding .15s',
       position: 'relative',

packages/component/src/styles/theme.ts

@@ -13,7 +13,6 @@ export const getLightTheme = (
     editorMode,
     colors: {
       primaryColor: '#6880FF',
-
       pageBackground: '#fff',
       hoverBackground: '#F1F3FF',
       innerHoverBackground: '#E9E9EC',
@@ -21,12 +20,13 @@ export const getLightTheme = (
       tooltipBackground: '#6880FF',
       codeBackground: '#f2f5f9',
       codeBlockBackground: '#F9F9FB',
-      blockHubBackground: '#fbfbfc',
+      hubBackground: '#fbfbfc',
-      blockHubHoverBackground: '#f8f9ff',
+      cardHoverBackground: '#f8f9ff',
       warningBackground: '#FFF9C7',
       errorBackground: '#FFDED8',
 
-      textColor: '#28293D',
+      textColor: '#424149',
+      secondaryTextColor: '#8E8D91',
       edgelessTextColor: '#3A4C5C',
       iconColor: '#77757D',
       handleColor: '#c7c3d9',
@@ -93,7 +93,6 @@ export const getDarkTheme = (
     mode: 'dark',
     colors: {
       primaryColor: '#6880FF',
-
       pageBackground: '#2c2c2c',
       hoverBackground: '#3C3C42',
       innerHoverBackground: '#E0E6FF',
@@ -104,17 +103,18 @@ export const getDarkTheme = (
           ? lightTheme.colors.codeBackground
           : '#505662',
       codeBlockBackground: '#36383D',
-      blockHubBackground: '#272727',
+      hubBackground: '#272727',
-      blockHubHoverBackground: '#363636',
+      cardHoverBackground: '#363636',
       warningBackground: '#FFF9C7',
       errorBackground: '#FFDED8',
 
       textColor: '#fff',
+      secondaryTextColor: '#8E8D91',
       edgelessTextColor: '#3A4C5C',
-      iconColor: '#888a9e',
+      iconColor: '#77757D',
       handleColor: '#c7c3d9',
       linkColor: '#7D91FF',
-      linkColor2: '#6880FF',
+      linkColor2: '#0C0A15',
       linkVisitedColor: '#505FAB',
       popoverColor: '#C6CBD9',
       inputColor: '#C6CBD9',
@@ -124,7 +124,7 @@ export const getDarkTheme = (
       quoteColor: '#C6CBD9',
       placeHolderColor: '#C7C7C7',
       selectedColor: 'rgba(104, 128, 255, 0.1)',
-      borderColor: '#4D4C53',
+      borderColor: '#3C3A40',
       disableColor: '#4b4b4b',
       warningColor: '#906616',
       errorColor: '#EB4335',
@@ -156,10 +156,11 @@ export const globalThemeVariables: (
     '--affine-code-background': theme.colors.codeBackground,
     '--affine-tooltip-background': theme.colors.tooltipBackground,
 
-    '--affine-block-hub-background': theme.colors.blockHubBackground,
+    '--affine-hub-background': theme.colors.hubBackground,
-    '--affine-block-hub-hover-background': theme.colors.blockHubHoverBackground,
+    '--affine-card-hover-background': theme.colors.cardHoverBackground,
 
     '--affine-text-color': theme.colors.textColor,
+    '--affine-secondary-text-color': theme.colors.secondaryTextColor,
     '--affine-edgeless-text-color': theme.colors.edgelessTextColor,
     '--affine-link-color': theme.colors.linkColor,
     // In dark mode, normal text`s (not bold) color

packages/component/src/styles/types.ts

@@ -26,12 +26,14 @@ export interface AffineTheme {
     innerHoverBackground: string;
     codeBackground: string;
     codeBlockBackground: string;
-    blockHubBackground: string;
+    // Use for blockHub and slide bar background
-    blockHubHoverBackground: string;
+    hubBackground: string;
+    cardHoverBackground: string;
     warningBackground: string;
     errorBackground: string;
     // Use for the page`s text
     textColor: string;
+    secondaryTextColor: string;
     // Use for the editor`s text, because in edgeless mode text is different form other
     edgelessTextColor: string;
     linkColor: string;
@@ -101,7 +103,10 @@ export interface AffineThemeCSSVariables {
   '--affine-code-block-background': AffineTheme['colors']['codeBlockBackground'];
   '--affine-tooltip-background': AffineTheme['colors']['tooltipBackground'];
 
+  '--affine-hub-background': AffineTheme['colors']['hubBackground'];
+  '--affine-card-hover-background': AffineTheme['colors']['cardHoverBackground'];
   '--affine-text-color': AffineTheme['colors']['textColor'];
+  '--affine-secondary-text-color': AffineTheme['colors']['secondaryTextColor'];
   '--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor'];
   '--affine-link-color': AffineTheme['colors']['linkColor'];
   // In dark mode, normal text`s (not bold) color

packages/component/src/ui/modal/styles.ts

@@ -3,14 +3,19 @@ import ModalUnstyled from '@mui/base/ModalUnstyled';
 import { Wrapper } from '../layout';
 import { CSSProperties } from 'react';
 
-export const StyledBackdrop = styled.div({
+export const StyledBackdrop = styled.div(({ theme }) => {
-  zIndex: '-1',
+  return {
-  position: 'fixed',
+    zIndex: '-1',
-  right: '0',
+    position: 'fixed',
-  bottom: '0',
+    right: '0',
-  top: '0',
+    bottom: '0',
-  left: '0',
+    top: '0',
-  backgroundColor: 'rgba(58, 76, 92, 0.2)',
+    left: '0',
+    backgroundColor:
+      theme.mode === 'light'
+        ? 'rgba(58, 76, 92, 0.2)'
+        : 'rgba(34, 34, 34, 0.6)',
+  };
 });
 
 export const StyledModal = styled(ModalUnstyled, {