From fe8831f7aecc2eaad5abb07797420fc56b6d79da Mon Sep 17 00:00:00 2001 From: x1a0t <405028157@qq.com> Date: Thu, 16 Feb 2023 14:23:24 +0800 Subject: [PATCH] feat: theme for dark mode (#982) Co-authored-by: QiShaoXuan --- .../src/components/workspace-modal/styles.ts | 6 ++--- .../components/workspace-slider-bar/style.ts | 2 +- packages/component/src/styles/theme.ts | 25 ++++++++++--------- packages/component/src/styles/types.ts | 9 +++++-- packages/component/src/ui/modal/styles.ts | 21 ++++++++++------ 5 files changed, 37 insertions(+), 26 deletions(-) diff --git a/apps/web/src/components/workspace-modal/styles.ts b/apps/web/src/components/workspace-modal/styles.ts index 4f36555b9a..f7857ab493 100644 --- a/apps/web/src/components/workspace-modal/styles.ts +++ b/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'), diff --git a/apps/web/src/components/workspace-slider-bar/style.ts b/apps/web/src/components/workspace-slider-bar/style.ts index 24d12cbc61..3f20e46d3a 100644 --- a/apps/web/src/components/workspace-slider-bar/style.ts +++ b/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', diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts index 99319bf557..227ee7fd79 100644 --- a/packages/component/src/styles/theme.ts +++ b/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', - blockHubHoverBackground: '#f8f9ff', + hubBackground: '#fbfbfc', + 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', - blockHubHoverBackground: '#363636', + hubBackground: '#272727', + 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-block-hub-hover-background': theme.colors.blockHubHoverBackground, + '--affine-hub-background': theme.colors.hubBackground, + '--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 diff --git a/packages/component/src/styles/types.ts b/packages/component/src/styles/types.ts index 149685a6db..c13651a1b2 100644 --- a/packages/component/src/styles/types.ts +++ b/packages/component/src/styles/types.ts @@ -26,12 +26,14 @@ export interface AffineTheme { innerHoverBackground: string; codeBackground: string; codeBlockBackground: string; - blockHubBackground: string; - blockHubHoverBackground: string; + // Use for blockHub and slide bar background + 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 diff --git a/packages/component/src/ui/modal/styles.ts b/packages/component/src/ui/modal/styles.ts index bbaa3e84ac..6512a53a45 100644 --- a/packages/component/src/ui/modal/styles.ts +++ b/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({ - zIndex: '-1', - position: 'fixed', - right: '0', - bottom: '0', - top: '0', - left: '0', - backgroundColor: 'rgba(58, 76, 92, 0.2)', +export const StyledBackdrop = styled.div(({ theme }) => { + return { + zIndex: '-1', + position: 'fixed', + right: '0', + bottom: '0', + top: '0', + left: '0', + backgroundColor: + theme.mode === 'light' + ? 'rgba(58, 76, 92, 0.2)' + : 'rgba(34, 34, 34, 0.6)', + }; }); export const StyledModal = styled(ModalUnstyled, {