Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-11 20:08:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: upgrate to new theme (#2027)

Browse Source 
Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
Flrande
2023-04-20 16:31:19 +08:00
committed by GitHub
parent 63f7b2556e
commit 372377dd6b
61 changed files with 624 additions and 1037 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/web/src/components/affine/pinboard/styles.ts
View File

@@ -20,7 +20,7 @@ export const StyledCollapsedButton = styled('button')<{
top: '0',
bottom: '0',
margin: 'auto',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
opacity: '.6',
transition: 'opacity .15s ease-in-out',
display: show ? 'flex' : 'none',
@@ -57,13 +57,13 @@ export const StyledPinboard = styled('div')<{
padding: disableCollapse ? '0 5px' : '0 2px 0 16px',
position: 'relative',
color: disable
? theme.colors.disableColor
? 'var(--affine-text-disable-color)'
: active
? theme.colors.primaryColor
: theme.colors.textColor,
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
cursor: disable ? 'not-allowed' : 'pointer',
background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
fontSize: theme.font.base,
background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '',
fontSize: 'var(--affine-font-base)',
userSelect: 'none',
...(textWrap
? {
@@ -85,11 +85,13 @@ export const StyledPinboard = styled('div')<{
fontSize: '20px',
marginRight: '8px',
flexShrink: '0',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
},
':hover': {
backgroundColor: disable ? '' : theme.colors.hoverBackground,
backgroundColor: disable ? '' : 'var(--affine-hover-color)',
},
};
}
@@ -110,9 +112,9 @@ export const StyledSearchContainer = styled('div')(({ theme }) => {
width: 'calc(100% - 24px)',
margin: '0 auto',
...displayFlex('flex-start', 'center'),
borderBottom: `1px solid ${theme.colors.borderColor}`,
borderBottom: '1px solid var(--affine-border-color)',
label: {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
fontSize: '20px',
height: '20px',
},
@@ -126,7 +128,7 @@ export const StyledMenuContent = styled('div')(() => {
});
export const StyledMenuSubTitle = styled('div')(({ theme }) => {
return {
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
lineHeight: '36px',
padding: '0 12px',
};
@@ -136,12 +138,12 @@ export const StyledMenuFooter = styled('div')(({ theme }) => {
return {
width: 'calc(100% - 24px)',
margin: '0 auto',
borderTop: `1px solid ${theme.colors.borderColor}`,
borderTop: '1px solid var(--affine-border-color)',
padding: '6px 0',
p: {
paddingLeft: '44px',
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
fontSize: '14px',
},
};

6
apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
View File

@@ -15,7 +15,7 @@ export const Content = styled('div')({
export const ContentTitle = styled('h1')(({ theme }) => {
return {
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
lineHeight: '28px',
fontWeight: 600,
};
@@ -26,7 +26,7 @@ export const StyleTips = styled('div')(({ theme }) => {
userSelect: 'none',
margin: '20px 0',
a: {
color: theme.colors.primaryColor,
color: 'var(--affine-background-primary-color)',
},
};
});
@@ -36,7 +36,7 @@ export const StyleButton = styled(Button)(({ theme }) => {
textAlign: 'center',
margin: '20px 0',
borderRadius: '8px',
backgroundColor: theme.colors.primaryColor,
backgroundColor: 'var(--affine-background-primary-color)',
span: {
margin: '0',
},

14
apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx
View File

@@ -154,7 +154,7 @@ const Members = styled('div')(({ theme }) => {
return {
position: 'absolute',
width: '100%',
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
textAlign: 'left',
zIndex: 1,
borderRadius: '0px 10px 10px 10px',
@@ -162,7 +162,7 @@ const Members = styled('div')(({ theme }) => {
padding: '8px 12px',
input: {
'&::placeholder': {
color: theme.colors.placeHolderColor,
color: 'var(--affine-placeholder-color)',
},
},
};
@@ -170,8 +170,8 @@ const Members = styled('div')(({ theme }) => {
// const NoFind = styled('div')(({ theme }) => {
// return {
// color: theme.colors.iconColor,
// fontSize: theme.font.sm,
// color: 'var(--affine-icon-color)',
// fontSize: 'var(--affine-font-sm)',
// lineHeight: '40px',
// userSelect: 'none',
// width: '100%',
@@ -180,8 +180,8 @@ const Members = styled('div')(({ theme }) => {
const Member = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
fontSize: theme.font.sm,
color: 'var(--affine-icon-color)',
fontSize: 'var(--affine-font-sm)',
lineHeight: '40px',
userSelect: 'none',
display: 'flex',
@@ -193,7 +193,7 @@ const MemberIcon = styled('div')(({ theme }) => {
width: '40px',
height: '40px',
borderRadius: '50%',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
background: '#F5F5F5',
textAlign: 'center',
lineHeight: '45px',

4
apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts
View File

@@ -66,7 +66,7 @@ export const StyledMemberName = styled('div')(({ theme }) => {
fontWeight: '400',
fontSize: '18px',
lineHeight: '26px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
};
});
@@ -75,7 +75,7 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
fontWeight: '400',
fontSize: '16px',
lineHeight: '22px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
};
});

4
apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts
View File

@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
position: 'relative',
padding: '0px',
width: '560px',
background: theme.colors.popoverBackground,
background: 'var(--affine-white)',
borderRadius: '12px',
// height: '312px',
};
@@ -42,7 +42,7 @@ export const StyledInputContent = styled('div')(({ theme }) => {
flexDirection: 'row',
justifyContent: 'center',
margin: '24px 0',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
};
});

2
apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts
View File

@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
position: 'relative',
padding: '0px',
width: '460px',
background: theme.colors.popoverBackground,
background: 'var(--affine-white)',
borderRadius: '12px',
};
});

8
apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts
View File

@@ -3,9 +3,9 @@ import { Input } from '@affine/component';
export const StyledInput = styled(Input)(({ theme }) => {
return {
border: `1px solid ${theme.colors.borderColor}`,
border: '1px solid var(--affine-border-color)',
borderRadius: '10px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
};
});
@@ -14,7 +14,7 @@ export const StyledWorkspaceInfo = styled('div')(({ theme }) => {
...displayFlex('flex-start', 'center'),
fontSize: '20px',
span: {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
marginLeft: '15px',
},
};
@@ -49,7 +49,7 @@ export const StyledAvatar = styled('div')(
export const StyledEditButton = styled('div')(({ theme }) => {
return {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
cursor: 'pointer',
marginLeft: '36px',
};

2
apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx
View File

@@ -12,7 +12,7 @@ import type { PanelProps } from '../../index';
export const StyledWorkspaceName = styled('span')(({ theme }) => {
return {
fontWeight: '400',
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});

22
apps/web/src/components/affine/workspace-setting-detail/style.ts
View File

@@ -32,10 +32,12 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
display: 'flex',
margin: '0 48px 0 0',
height: '34px',
color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
color: isActive
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
fontWeight: '500',
fontSize: theme.font.h6,
lineHeight: theme.font.lineHeight,
fontSize: 'var(--affine-font-h6)',
lineHeight: 'var(--affine-line-height)',
cursor: 'pointer',
transition: 'all 0.15s ease',
};
@@ -46,7 +48,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
export const StyledSettingKey = styled('div')(({ theme }) => {
return {
width: '140px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 500,
marginRight: '56px',
flexShrink: 0,
@@ -61,14 +63,14 @@ export const StyledRow = styled(FlexWrapper)(() => {
export const StyledWorkspaceName = styled('span')(({ theme }) => {
return {
fontWeight: '400',
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});
export const StyledIndicator = styled('div')(({ theme }) => {
return {
height: '2px',
background: theme.colors.primaryColor,
background: 'var(--affine-primary-color)',
position: 'absolute',
left: '0',
bottom: '0',
@@ -90,8 +92,8 @@ export const StyledTabButtonWrapper = styled('div')(() => {
// height: '86px',
// border: '1px solid',
// borderColor: active
// ? theme.colors.primaryColor
// : theme.colors.borderColor,
// ? 'var(--affine-primary-color)'
// : 'var(--affine-border-color)',
// borderRadius: '10px',
// padding: '8px 12px',
// position: 'relative',
@@ -107,7 +109,7 @@ export const StyledTabButtonWrapper = styled('div')(() => {
// );
// export const StyledDownloadCardDes = styled('div')(({ theme }) => {
// return {
// fontSize: theme.font.sm,
// color: theme.colors.iconColor,
// fontSize: 'var(--affine-font-sm)',
// color: 'var(--affine-icon-color)',
// };
// });

5
apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
View File

@@ -47,7 +47,6 @@ const FavoriteTag: React.FC<FavoriteTagProps> = ({
pageMeta: { favorite },
onClick,
}) => {
const theme = useTheme();
const { t } = useTranslation();
return (
<Tooltip
@@ -64,7 +63,9 @@ const FavoriteTag: React.FC<FavoriteTagProps> = ({
);
}}
style={{
color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
color: favorite
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
}}
className={favorite ? '' : 'favorite-button'}
>

6
apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts
View File

@@ -22,7 +22,7 @@ export const StyledTitleWrapper = styled('div')(({ theme }) => {
color: 'unset',
},
'a:hover': {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
};
});
@@ -31,11 +31,11 @@ export const StyledTitleLink = styled('div')(({ theme }) => {
maxWidth: '80%',
marginRight: '18px',
...displayFlex('flex-start', 'center'),
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
'>svg': {
fontSize: '24px',
marginRight: '12px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
};
});

4
apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts
View File

@@ -25,7 +25,7 @@ export const StyledEditorModeSwitch = styled('div')<{
display: showAlone ? 'none' : 'block',
width: '24px',
height: '24px',
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
boxShadow:
mode === 'dark'
? '0px 0px 6px rgba(22, 22, 22, 0.6)'
@@ -47,7 +47,7 @@ export const StyledSwitchItem = styled('button')<{
width: '24px',
height: '24px',
borderRadius: '8px',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
display: hide ? 'none' : 'inline-flex',
alignItems: 'center',
justifyContent: 'center',

4
apps/web/src/components/blocksuite/workspace-header/header-right-items/EditPage.tsx
View File

@@ -28,8 +28,8 @@ const StyledEditPageButton = styled(
{}
)(({ theme }) => {
return {
border: `1px solid ${theme.colors.primaryColor}`,
color: theme.colors.primaryColor,
border: '1px solid var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
width: '100%',
borderRadius: '8px',
whiteSpace: 'nowrap',

4
apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx
View File

@@ -9,7 +9,6 @@ import {
PageIcon,
} from '@blocksuite/icons';
import { assertExists } from '@blocksuite/store';
import { useTheme } from '@mui/material';
import {
useBlockSuitePageMeta,
usePageMetaHelper,
@@ -30,7 +29,6 @@ import {
export const EditorOptionMenu = () => {
const { t } = useTranslation();
const theme = useTheme();
// fixme(himself65): remove these hooks ASAP
const [workspace] = useCurrentWorkspace();
@@ -61,7 +59,7 @@ export const EditorOptionMenu = () => {
}}
icon={
favorite ? (
<FavoritedIcon style={{ color: theme.colors.primaryColor }} />
<FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
) : (
<FavoriteIcon />
)

2
apps/web/src/components/blocksuite/workspace-header/header-right-items/SyncUser.tsx
View File

@@ -29,7 +29,7 @@ const IconWrapper = styled('div')(({ theme }) => {
height: '32px',
marginRight: '12px',
fontSize: '24px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
...displayFlex('center', 'center'),
};
});

8
apps/web/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts
View File

@@ -12,7 +12,7 @@ export const StyledThemeModeSwitch = styled('button')(({ theme }) => {
overflow: 'hidden',
backgroundColor: 'transparent',
position: 'relative',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
fontSize: '24px',
};
});
@@ -35,7 +35,7 @@ export const StyledSwitchItem = styled('div')<{
const activeStyle = active
? {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
top: '0',
animation: css`
${keyframes`${
@@ -46,8 +46,8 @@ export const StyledSwitchItem = styled('div')<{
}
: {
top: '100%',
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
animation: css`
${keyframes`${
isHover ? raiseAnimate : declineAnimate

22
apps/web/src/components/blocksuite/workspace-header/styles.ts
View File

@@ -14,7 +14,7 @@ export const StyledHeaderContainer = styled('div')<{
flexShrink: 0,
position: 'sticky',
top: 0,
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
zIndex: 1,
WebkitAppRegion: sidebarFloating ? '' : 'drag',
button: {
@@ -30,7 +30,7 @@ export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
width: '100%',
padding: '0 20px',
...displayFlex('space-between', 'center'),
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
zIndex: 99,
position: 'relative',
};
@@ -44,7 +44,7 @@ export const StyledTitleContainer = styled('div')(({ theme }) => ({
margin: 'auto',
...absoluteCenter({ horizontal: true, position: { top: 0 } }),
...displayFlex('center', 'center'),
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
}));
export const StyledTitle = styled('div')(({ theme }) => {
@@ -83,10 +83,10 @@ export const StyledHeaderRightSide = styled('div')({
export const StyledBrowserWarning = styled('div')<{ show: boolean }>(
({ theme, show }) => {
return {
backgroundColor: theme.colors.warningBackground,
color: theme.colors.warningColor,
backgroundColor: 'var(--affine-background-warning-color)',
color: 'var(--affine-background-warning-color)',
height: '36px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
display: show ? 'flex' : 'none',
justifyContent: 'center',
alignItems: 'center',
@@ -98,7 +98,7 @@ export const StyledCloseButton = styled('div')(({ theme }) => {
return {
width: '36px',
height: '36px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
cursor: 'pointer',
...displayFlex('center', 'center'),
position: 'absolute',
@@ -138,8 +138,8 @@ export const StyledSearchArrowWrapper = styled('div')(() => {
export const StyledPageListTittleWrapper = styled(StyledTitle)(({ theme }) => {
return {
fontSize: theme.font.base,
color: theme.colors.textColor,
fontSize: 'var(--affine-font-base)',
color: 'var(--affine-text-primary-color)',
...displayFlex('center', 'center'),
'>svg': {
fontSize: '20px',
@@ -154,9 +154,9 @@ export const StyledQuickSearchTipButton = styled('div')(({ theme }) => {
color: '#FFFFFF',
width: '48px',
height: ' 26px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
lineHeight: '22px',
background: theme.colors.primaryColor,
background: 'var(--affine-primary-color)',
borderRadius: '8px',
textAlign: 'center',
cursor: 'pointer',

28
apps/web/src/components/pure/footer/styles.ts
View File

@@ -10,7 +10,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
return {
width: '1px',
height: '20px',
background: theme.colors.borderColor,
background: 'var(--affine-border-color)',
marginRight: '24px',
};
});
@@ -21,7 +21,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
width: '202px',
p: {
height: '20px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
...displayFlex('flex-start', 'center'),
},
svg: {
@@ -38,7 +38,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 600,
lineHeight: '24px',
marginBottom: '10px',
@@ -50,7 +50,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
export const StyledCard = styled('div')<{
active?: boolean;
}>(({ theme, active }) => {
const borderColor = active ? theme.colors.primaryColor : 'transparent';
const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
return {
width: '310px',
height: '124px',
@@ -64,10 +64,10 @@ export const StyledCard = styled('div')<{
transition: 'background .2s',
background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
':hover': {
background: theme.colors.cardHoverBackground,
background: 'var(--affine-hover-color)',
'.add-icon': {
borderColor: theme.colors.primaryColor,
color: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
},
},
};
@@ -87,10 +87,10 @@ export const StyleUserInfo = styled('div')(({ theme }) => {
flex: 1,
p: {
lineHeight: '24px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
'p:first-of-type': {
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
fontWeight: 600,
},
};
@@ -102,16 +102,16 @@ export const StyledModalHeaderLeft = styled('div')(() => {
export const StyledModalTitle = styled('div')(({ theme }) => {
return {
fontWeight: 600,
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});
export const StyledHelperContainer = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
marginLeft: '15px',
fontWeight: 400,
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
...displayFlex('center', 'center'),
};
});
@@ -162,8 +162,8 @@ export const StyledSignInButton = styled(Button)(({ theme }) => {
width: '40px',
height: '40px',
borderRadius: '20px',
backgroundColor: theme.colors.hoverBackground,
color: theme.colors.primaryColor,
backgroundColor: 'var(--affine-hover-color)',
color: 'var(--affine-primary-color)',
fontSize: '24px',
flexShrink: 0,
marginRight: '16px',

18
apps/web/src/components/pure/help-island/style.ts
View File

@@ -12,7 +12,7 @@ export const StyledIsland = styled('div')<{
: 'unset',
padding: '0 4px 44px',
borderRadius: '10px',
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
':hover': {
boxShadow:
'4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
@@ -21,7 +21,7 @@ export const StyledIsland = styled('div')<{
content: '""',
width: '36px',
height: '1px',
background: spread ? theme.colors.borderColor : 'transparent',
background: spread ? 'var(--affine-border-color)' : 'transparent',
...positionAbsolute({
left: 0,
right: 0,
@@ -34,11 +34,11 @@ export const StyledIsland = styled('div')<{
});
export const StyledIconWrapper = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
...displayFlex('center', 'center'),
cursor: 'pointer',
fontSize: '24px',
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
borderRadius: '5px',
width: '36px',
height: '36px',
@@ -46,8 +46,8 @@ export const StyledIconWrapper = styled('div')(({ theme }) => {
transition: 'background-color 0.2s',
position: 'relative',
':hover': {
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
},
};
});
@@ -62,14 +62,14 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
width: '36px',
height: '36px',
cursor: 'pointer',
backgroundColor: theme.colors.pageBackground,
color: theme.colors.iconColor,
backgroundColor: 'var(--affine-background-primary-color)',
color: 'var(--affine-icon-color)',
borderRadius: '5px',
fontSize: '24px',
...displayFlex('center', 'center'),
...positionAbsolute({ left: '4px', bottom: '4px' }),
':hover': {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
};
});

2
apps/web/src/components/pure/quick-search-button/index.tsx
View File

@@ -13,7 +13,7 @@ const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
transform: 'translateY(3px)',
},
'::after': {
background: theme.colors.pageBackground,
background: 'var(--affine-background-primary-color)',
},
},
};

18
apps/web/src/components/pure/quick-search-modal/navigation-path/styles.ts
View File

@@ -4,10 +4,10 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
return {
height: '46px',
...displayFlex('flex-start', 'center'),
background: theme.colors.hubBackground,
background: 'var(--affine-background-secondary-color)',
padding: '0 40px 0 20px',
position: 'relative',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
zIndex: 2,
'.collapse-btn': {
position: 'absolute',
@@ -18,7 +18,7 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
},
'.path-arrow': {
fontSize: '16px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
},
};
});
@@ -26,7 +26,9 @@ export const StyledNavigationPathContainer = styled('div')(({ theme }) => {
export const StyledNavPathLink = styled('div')<{ active?: boolean }>(
({ theme, active }) => {
return {
color: active ? theme.colors.textColor : theme.colors.secondaryTextColor,
color: active
? 'var(--affine-text-primary-color)'
: 'var(--affine-text-secondary-color)',
cursor: active ? 'auto' : 'pointer',
maxWidth: '160px',
...textEllipsis(1),
@@ -35,7 +37,7 @@ export const StyledNavPathLink = styled('div')<{ active?: boolean }>(
':hover': active
? {}
: {
background: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
borderRadius: '4px',
},
};
@@ -51,10 +53,10 @@ export const StyledNavPathExtendContainer = styled('div')<{ show: boolean }>(
zIndex: '1',
height: '100%',
width: '100%',
background: theme.colors.hubBackground,
background: 'var(--affine-background-secondary-color)',
transition: 'top .15s',
fontSize: theme.font.sm,
color: theme.colors.secondaryTextColor,
fontSize: 'var(--affine-font-sm)',
color: 'var(--affine-text-secondary-color)',
padding: '46px 12px 0 15px',
};
}

38
apps/web/src/components/pure/quick-search-modal/style.ts
View File

@@ -9,7 +9,7 @@ export const StyledContent = styled('div')(({ theme }) => {
marginBottom: '10px',
...displayFlex('flex-start', 'flex-start'),
flexDirection: 'column',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
transition: 'all 0.15s',
letterSpacing: '0.06em',
'[cmdk-group]': {
@@ -20,8 +20,8 @@ export const StyledContent = styled('div')(({ theme }) => {
margin: '0 16px',
height: '36px',
lineHeight: '22px',
fontSize: theme.font.sm,
color: theme.colors.secondaryTextColor,
fontSize: 'var(--affine-font-sm)',
color: 'var(--affine-text-secondary-color)',
},
'[cmdk-item]': {
margin: '0 4px',
@@ -29,8 +29,8 @@ export const StyledContent = styled('div')(({ theme }) => {
'[aria-selected="true"]': {
transition: 'all 0.15s',
borderRadius: '4px',
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
padding: '0 2px',
},
};
@@ -40,7 +40,7 @@ export const StyledJumpTo = styled('div')(({ theme }) => {
...displayFlex('center', 'start'),
flexDirection: 'column',
padding: '10px 10px 10px 0',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
strong: {
fontWeight: '500',
marginBottom: '10px',
@@ -53,9 +53,9 @@ export const StyledNotFound = styled('div')(({ theme }) => {
...displayFlex('center', 'center'),
flexDirection: 'column',
padding: '0 16px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
lineHeight: '22px',
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
span: {
...displayFlex('flex-start', 'center'),
width: '100%',
@@ -75,20 +75,20 @@ export const StyledInputContent = styled('div')(({ theme }) => {
width: '492px',
height: '22px',
padding: '0 12px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
...displayFlex('space-between', 'center'),
letterSpacing: '0.06em',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
'::placeholder': {
color: theme.colors.placeHolderColor,
color: 'var(--affine-placeholder-color)',
},
},
};
});
export const StyledShortcut = styled('div')(({ theme }) => {
return {
color: theme.colors.placeHolderColor,
fontSize: theme.font.sm,
color: 'var(--affine-placeholder-color)',
fontSize: 'var(--affine-font-sm)',
whiteSpace: 'nowrap',
};
});
@@ -97,7 +97,7 @@ export const StyledLabel = styled('label')(({ theme }) => {
return {
width: '20px',
height: '20px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
fontSize: '20px',
};
});
@@ -114,7 +114,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
width: 'auto',
height: '0',
margin: '6px 16px',
borderTop: `0.5px solid ${theme.colors.borderColor}`,
borderTop: '0.5px solid var(--affine-border-color)',
};
});
@@ -124,7 +124,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
lineHeight: '22px',
marginBottom: '8px',
textAlign: 'center',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
...displayFlex('center', 'center'),
transition: 'all .15s',
'[cmdk-item]': {
@@ -133,8 +133,8 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
'[aria-selected="true"]': {
transition: 'all 0.15s',
borderRadius: '4px',
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
'span,svg': {
transition: 'all 0.15s',
transform: 'scale(1.02)',
@@ -146,7 +146,7 @@ export const StyledModalFooterContent = styled('button')(({ theme }) => {
return {
width: '600px',
height: '32px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
lineHeight: '22px',
textAlign: 'center',
...displayFlex('center', 'center'),

18
apps/web/src/components/pure/shortcuts-modal/style.ts
View File

@@ -4,9 +4,9 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
width: '288px',
height: '74vh',
paddingBottom: '28px',
backgroundColor: theme.colors.popoverBackground,
boxShadow: theme.shadow.popover,
borderRadius: `${theme.radius.popover} 0 ${theme.radius.popover} ${theme.radius.popover}`,
backgroundColor: 'var(--affine-white)',
boxShadow: 'var(--affine-text-popover-shadow)',
borderRadius: `var(--affine-popover-radius) 0 var(--affine-popover-radius) var(--affine-popover-radius)`,
overflow: 'auto',
boxRadius: '10px',
position: 'fixed',
@@ -14,23 +14,23 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
top: '0',
bottom: '0',
margin: 'auto',
zIndex: theme.zIndex.modal,
zIndex: 'var(--affine-z-index-modal)',
}));
export const StyledTitle = styled('div')(({ theme }) => ({
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
fontWeight: '500',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
height: '44px',
...displayFlex('center', 'center'),
svg: {
width: '20px',
marginRight: '14px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
}));
export const StyledSubTitle = styled('div')(({ theme }) => ({
fontWeight: '500',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
height: '34px',
lineHeight: '36px',
marginTop: '28px',
@@ -52,6 +52,6 @@ export const StyledModalHeader = styled('div')(() => ({
export const StyledListItem = styled('div')(({ theme }) => ({
height: '34px',
...displayFlex('space-between', 'center'),
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
padding: '0 16px',
}));

2
apps/web/src/components/pure/workspace-list-modal/language-menu.tsx
View File

@@ -58,7 +58,7 @@ export const LanguageMenu: React.FC = () => {
const ListItem = styled(MenuItem)(({ theme }) => ({
height: '38px',
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
textTransform: 'capitalize',
padding: '0 24px',
}));

26
apps/web/src/components/pure/workspace-list-modal/styles.ts
View File

@@ -4,7 +4,7 @@ export const StyledSplitLine = styled('div')(({ theme }) => {
return {
width: '1px',
height: '20px',
background: theme.colors.borderColor,
background: 'var(--affine-border-color)',
marginRight: '12px',
};
});
@@ -15,7 +15,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
width: '202px',
p: {
height: '20px',
fontSize: theme.font.sm,
fontSize: 'var(--affine-font-sm)',
...displayFlex('flex-start', 'center'),
},
svg: {
@@ -32,7 +32,7 @@ export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
return {
fontSize: theme.font.base,
fontSize: 'var(--affine-font-base)',
fontWeight: 600,
lineHeight: '24px',
marginBottom: '10px',
@@ -44,7 +44,7 @@ export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
export const StyledCard = styled('div')<{
active?: boolean;
}>(({ theme, active }) => {
const borderColor = active ? theme.colors.primaryColor : 'transparent';
const borderColor = active ? 'var(--affine-primary-color)' : 'transparent';
return {
width: '310px',
height: '124px',
@@ -58,7 +58,7 @@ export const StyledCard = styled('div')<{
transition: 'background .2s',
background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
':hover': {
background: theme.colors.cardHoverBackground,
background: 'var(--affine-hover-color)',
},
};
});
@@ -73,14 +73,14 @@ export const StyledCreateWorkspaceCard = styled('div')(({ theme }) => {
borderRadius: '12px',
transition: 'all .1s',
...displayFlex('flex-start', 'flex-start'),
color: theme.colors.secondaryTextColor,
color: 'var(--affine-text-secondary-color)',
':hover': {
background: theme.colors.cardHoverBackground,
color: theme.colors.textColor,
background: 'var(--affine-hover-color)',
color: 'var(--affine-text-primary-color)',
'.add-icon': {
borderColor: theme.colors.primaryColor,
color: theme.colors.primaryColor,
borderColor: 'var(--affine-primary-color)',
color: 'var(--affine-primary-color)',
},
},
};
@@ -92,16 +92,16 @@ export const StyledModalHeaderLeft = styled('div')(() => {
export const StyledModalTitle = styled('div')(({ theme }) => {
return {
fontWeight: 600,
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
};
});
export const StyledHelperContainer = styled('div')(({ theme }) => {
return {
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
marginLeft: '15px',
fontWeight: 400,
fontSize: theme.font.h6,
fontSize: 'var(--affine-font-h6)',
...displayFlex('center', 'center'),
};
});

12
apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts
View File

@@ -8,10 +8,10 @@ export const StyledSelectorContainer = styled('div')(({ theme }) => {
padding: '0 6px',
marginBottom: '16px',
borderRadius: '8px',
color: theme.colors.textColor,
color: 'var(--affine-text-primary-color)',
':hover': {
cursor: 'pointer',
background: theme.colors.hoverBackground,
background: 'var(--affine-hover-color)',
},
};
});
@@ -36,12 +36,12 @@ export const StyledWorkspaceStatus = styled('div')(({ theme }) => {
return {
height: '22px',
...displayFlex('flex-start', 'center'),
fontSize: theme.font.sm,
color: theme.colors.secondaryTextColor,
fontSize: 'var(--affine-font-sm)',
color: 'var(--affine-text-secondary-color)',
userSelect: 'none',
svg: {
color: theme.colors.iconColor,
fontSize: theme.font.base,
color: 'var(--affine-icon-color)',
fontSize: 'var(--affine-font-base)',
marginRight: '4px',
},
};

36
apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
View File

@@ -12,7 +12,9 @@ export const StyledListItem = styled('div')<{
}>(({ theme, active, disabled }) => {
return {
height: '32px',
color: active ? theme.colors.primaryColor : theme.colors.textColor,
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
padding: '0 16px',
borderRadius: '8px',
cursor: 'pointer',
@@ -24,17 +26,19 @@ export const StyledListItem = styled('div')<{
...(disabled
? {
cursor: 'not-allowed',
color: theme.colors.borderColor,
color: 'var(--affine-border-color)',
}
: {}),
'> svg, a > svg': {
fontSize: '20px',
marginRight: '12px',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
},
':hover:not([disabled])': {
backgroundColor: theme.colors.hoverBackground,
backgroundColor: 'var(--affine-hover-color)',
},
};
});
@@ -53,7 +57,7 @@ export const StyledCollapseButton = styled('button')<{
top: '0',
bottom: '0',
margin: 'auto',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
opacity: '.6',
transition: 'opacity .15s ease-in-out',
display: show ? 'flex' : 'none',
@@ -81,12 +85,12 @@ export const StyledCollapseItem = styled('div')<{
paddingRight: '2px',
position: 'relative',
color: disable
? theme.colors.disableColor
? 'var(--affine-text-disable-color)'
: active
? theme.colors.primaryColor
: theme.colors.textColor,
? 'var(--affine-primary-color)'
: 'var(--affine-text-primary-color)',
cursor: disable ? 'not-allowed' : 'pointer',
background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
background: isOver ? alpha('var(--affine-primary-color)', 0.06) : '',
userSelect: 'none',
...(textWrap
? {
@@ -103,13 +107,15 @@ export const StyledCollapseItem = styled('div')<{
fontSize: '20px',
marginRight: '8px',
flexShrink: '0',
color: active ? theme.colors.primaryColor : theme.colors.iconColor,
color: active
? 'var(--affine-primary-color)'
: 'var(--affine-icon-color)',
},
':hover': disable
? {}
: {
backgroundColor: theme.colors.hoverBackground,
backgroundColor: 'var(--affine-hover-color)',
'.operation-button': {
visibility: 'visible',
},
@@ -173,9 +179,9 @@ export const StyledChangeLog = styled('div')<{
width: '110%',
height: '32px',
...displayFlex('flex-start', 'center'),
color: theme.colors.primaryColor,
backgroundColor: theme.colors.hoverBackground,
border: `1px solid ${theme.colors.primaryColor}`,
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)',
border: '1px solid var(--affine-primary-color)',
borderRight: 'none',
marginLeft: '8px',
paddingLeft: '8px',
@@ -191,7 +197,7 @@ export const StyledChangeLog = styled('div')<{
'> svg, a > svg': {
fontSize: '20px',
marginRight: '12px',
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
button: {
marginRight: '12%',

24
apps/web/src/components/pure/workspace-slider-bar/style.ts
View File

@@ -1,4 +1,4 @@
import { displayFlex, styled } from '@affine/component';
import { baseTheme, displayFlex, styled } from '@affine/component';
import Link from 'next/link';
const macosElectron = environment.isDesktop && environment.isMacOs;
@@ -14,14 +14,16 @@ export const StyledSliderBarWrapper = styled('div')<{
'button, a': {
userSelect: 'none',
},
zIndex: theme.zIndex.modal,
zIndex: 'var(--affine-z-index-modal)',
transition: resizing ? '' : 'transform .3s, width .3s, max-width .3s',
transform: show ? 'translateX(0)' : 'translateX(-100%)',
maxWidth: floating ? 'calc(10vw + 400px)' : 'calc(100vw - 698px)',
background:
!floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
!floating && macosElectron
? 'transparent'
: 'var(--affine-background-secondary-color)',
borderRight: macosElectron ? '' : '1px solid',
borderColor: theme.colors.borderColor,
borderColor: 'var(--affine-border-color)',
};
});
@@ -82,17 +84,17 @@ export const StyledNewPageButton = styled('button')(({ theme }) => {
height: '52px',
...displayFlex('flex-start', 'center'),
borderTop: '1px solid',
borderColor: theme.colors.borderColor,
borderColor: 'var(--affine-border-color)',
padding: '0 8px 0 16px',
svg: {
fontSize: '20px',
color: theme.colors.iconColor,
color: 'var(--affine-icon-color)',
marginRight: '8px',
},
':hover': {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
svg: {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
},
},
};
@@ -108,8 +110,8 @@ export const StyledSliderModalBackground = styled('div')<{ active: boolean }>(
left: 0,
right: active ? 0 : '100%',
bottom: 0,
zIndex: theme.zIndex.modal - 1,
background: theme.colors.modalBackground,
zIndex: parseInt(baseTheme.zIndexModal) - 1,
background: 'var(--affine-background-modal-color)',
};
}
);
@@ -121,6 +123,6 @@ export const StyledScrollWrapper = styled('div')<{
maxHeight: '50%',
overflowY: 'auto',
borderTop: '1px solid',
borderColor: showTopBorder ? theme.colors.borderColor : 'transparent',
borderColor: showTopBorder ? 'var(--affine-border-color)' : 'transparent',
};
});

6
apps/web/src/layouts/styles.ts
View File

@@ -57,7 +57,7 @@ export const MainContainer = styled('div')(({ theme }) => {
position: 'relative',
flexGrow: 1,
maxWidth: '100%',
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
[theme.breakpoints.up('md')]: {
minWidth: '686px',
},
@@ -72,7 +72,7 @@ export const StyledToolWrapper = styled('div')(({ theme }) => {
position: 'fixed',
right: '30px',
bottom: '30px',
zIndex: theme.zIndex.popover,
zIndex: 'var(--affine-z-index-popover)',
[theme.breakpoints.down('md')]: {
right: 'calc((100vw - 640px) * 3 / 19 + 5px)',
},
@@ -93,7 +93,7 @@ export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>(
width: '12px',
transform: 'translateX(50%)',
cursor: 'col-resize',
zIndex: theme.zIndex.modal,
zIndex: 'var(--affine-z-index-modal)',
userSelect: 'none',
':hover > *': {
background: 'rgba(0, 0, 0, 0.1)',

4
apps/web/src/pages/invite/[invite_code].tsx
View File

@@ -94,7 +94,7 @@ const StyledContainer = styled('div')(({ theme }) => {
height: '100vh',
...displayFlex('center', 'center'),
flexDirection: 'column',
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
img: {
width: '300px',
height: '300px',
@@ -103,7 +103,7 @@ const StyledContainer = styled('div')(({ theme }) => {
...displayFlex('center', 'center'),
marginTop: '24px',
svg: {
color: theme.colors.primaryColor,
color: 'var(--affine-primary-color)',
fontSize: '24px',
marginRight: '12px',
},

10
apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
View File

@@ -32,7 +32,7 @@ export const NavContainer = styled('div')(({ theme }) => {
width: '100vw',
height: '52px',
...displayFlex('space-between', 'center'),
backgroundColor: theme.colors.pageBackground,
backgroundColor: 'var(--affine-background-primary-color)',
};
});
@@ -43,13 +43,13 @@ export const StyledBreadcrumbs = styled(Link)(({ theme }) => {
paddingLeft: '12px',
span: {
padding: '0 12px',
fontSize: theme.font.base,
lineHeight: theme.font.lineHeight,
fontSize: 'var(--affine-font-base)',
lineHeight: 'var(--affine-line-height)',
},
':hover': { color: theme.colors.primaryColor },
':hover': { color: 'var(--affine-primary-color)' },
transition: 'all .15s',
':visited': {
':hover': { color: theme.colors.primaryColor },
':hover': { color: 'var(--affine-primary-color)' },
},
};
});

66
apps/web/src/providers/ThemeProvider.tsx
View File

@@ -1,17 +1,9 @@
import type {
AffineNextCssVariables,
AffineNextLightColorScheme,
AffineCssVariables,
AffineTheme,
ThemeProviderProps,
} from '@affine/component';
import {
getDarkTheme,
getLightTheme,
globalThemeVariables,
nextDarkColorScheme,
nextLightColorScheme,
ThemeProvider as AffineThemeProvider,
} from '@affine/component';
import { AffineMuiThemeProvider, getTheme, muiThemes } from '@affine/component';
import { GlobalStyles } from '@mui/material';
import kebabCase from 'kebab-case';
import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
@@ -21,17 +13,9 @@ import { memo, useEffect, useMemo, useState } from 'react';
import { useCurrentMode } from '../hooks/current/use-current-mode';
const ThemeInjector = memo<{
themeStyle: AffineTheme;
nextThemeStyle: AffineNextLightColorScheme;
}>(function ThemeInjector({ themeStyle, nextThemeStyle }) {
const injectAffineNextTheme = useMemo(() => {
return Object.entries(nextThemeStyle).reduce((variables, [key, value]) => {
variables[`--affine-${kebabCase(key)}` as keyof AffineNextCssVariables] =
value;
return variables;
}, {} as AffineNextCssVariables);
}, [nextThemeStyle]);
const CssVariablesInjector = memo<{
theme: AffineTheme;
}>(function ThemeInjector({ theme }) {
return (
<GlobalStyles
styles={{
@@ -39,13 +23,17 @@ const ThemeInjector = memo<{
// ...globalThemeVariables(themeStyle),
// },
':root': {
...globalThemeVariables(themeStyle),
...injectAffineNextTheme,
...Object.entries(theme).reduce((variables, [key, value]) => {
variables[
`--affine-${kebabCase(key)}` as keyof AffineCssVariables
] = value;
return variables;
}, {} as AffineCssVariables),
},
html: {
fontFamily: themeStyle.font.family,
fontSize: themeStyle.font.base,
lineHeight: themeStyle.font.lineHeight,
fontFamily: theme.fontFamily,
fontSize: theme.fontBase,
lineHeight: theme.lineHeight,
},
}}
/>
@@ -56,29 +44,23 @@ const ThemeProviderInner = memo<React.PropsWithChildren>(
function ThemeProviderInner({ children }) {
const { resolvedTheme: theme } = useTheme();
const editorMode = useCurrentMode();
const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
const darkThemeStyle = useMemo(
() => getDarkTheme(editorMode),
[editorMode]
);
// SSR will always render the light theme, so we need to defer the theme if user selected dark mode
const [deferTheme, setDeferTheme] = useState('light');
const [deferTheme, setDeferTheme] = useState<'light' | 'dark'>('light');
const themeStyle = useMemo(
() => getTheme(deferTheme, editorMode),
[deferTheme, editorMode]
);
useEffect(() => {
window.apis?.onThemeChange(theme === 'dark' ? 'dark' : 'light');
setDeferTheme(theme === 'dark' ? 'dark' : 'light');
}, [theme]);
return (
<AffineThemeProvider
theme={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
>
<ThemeInjector
themeStyle={deferTheme === 'dark' ? darkThemeStyle : themeStyle}
nextThemeStyle={
deferTheme === 'dark' ? nextDarkColorScheme : nextLightColorScheme
}
/>
<AffineMuiThemeProvider theme={muiThemes}>
<CssVariablesInjector theme={themeStyle} />
{children}
</AffineThemeProvider>
</AffineMuiThemeProvider>
);
}
);