feat: add css virable

This commit is contained in:
QiShaoXuan 2022-10-27 15:17:00 +08:00
parent 43e1efd79e
commit 659e83befd
3 changed files with 6 additions and 4 deletions

View File

@ -17,6 +17,7 @@ export const getLightTheme = (
pageBackground: '#fff',
hoverBackground: '#F1F3FF',
popoverBackground: '#fff',
toolTipBackground: '#6880FF',
codeBackground: '#f2f5f9',
textColor: '#3A4C5C',
@ -79,6 +80,7 @@ export const getDarkTheme = (
editorMode === 'edgeless'
? lightTheme.colors.codeBackground
: '#505662',
toolTipBackground: '#1F2021',
textColor: '#fff',
edgelessTextColor: '#3A4C5C',
@ -119,6 +121,7 @@ export const globalThemeVariables: (
'--affine-popover-background': theme.colors.popoverBackground,
'--affine-hover-background': theme.colors.hoverBackground,
'--affine-code-background': theme.colors.codeBackground,
'--affine-tooltip-background': theme.colors.toolTipBackground,
'--affine-text-color': theme.colors.textColor,
'--affine-edgeless-text-color': theme.colors.edgelessTextColor,

View File

@ -23,6 +23,7 @@ export interface AffineTheme {
popoverBackground: string;
hoverBackground: string;
codeBackground: string;
toolTipBackground: string;
// Use for the page`s text
textColor: string;
@ -77,6 +78,7 @@ export interface AffineThemeCSSVariables {
'--affine-popover-background': AffineTheme['colors']['popoverBackground'];
'--affine-hover-background': AffineTheme['colors']['hoverBackground'];
'--affine-code-background': AffineTheme['colors']['codeBackground'];
'--affine-tooltip-background': AffineTheme['colors']['toolTipBackground'];
'--affine-text-color': AffineTheme['colors']['textColor'];
'--affine-edgeless-text-color': AffineTheme['colors']['edgelessTextColor'];

View File

@ -8,10 +8,7 @@ const StyledTooltip = styled(StyledPopperContainer)(({ theme }) => {
return {
boxShadow: theme.shadow.tooltip,
padding: '4px 12px',
backgroundColor:
theme.mode === 'dark'
? theme.colors.popoverBackground
: theme.colors.primaryColor,
backgroundColor: theme.colors.toolTipBackground,
color: '#fff',
fontSize: theme.font.xs,
};