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

feat: modify styles

Browse Source
This commit is contained in:
QiShaoXuan
2022-10-25 16:26:31 +08:00
parent cd6a930939
commit 52e2f3854f
14 changed files with 204 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
packages/app/src/styles/theme.ts
View File

@@ -1,90 +1,108 @@
import '@emotion/react';
import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
import { EditorContainer } from '@blocksuite/editor';
const basicFontFamily =
'apple-system, BlinkMacSystemFont,Helvetica Neue, Tahoma, PingFang SC, Microsoft Yahei, Arial,Hiragino Sans GB, sans-serif, Apple Color Emoji, Segoe UI Emoji,Segoe UI Symbol, Noto Color Emoji';
export const lightTheme: AffineTheme = {
mode: 'light',
colors: {
primaryColor: '#6880FF',
export const getLightTheme = (
editorMode: EditorContainer['mode']
): AffineTheme => {
return {
mode: 'light',
editorMode,
colors: {
primaryColor: '#6880FF',
pageBackground: '#fff',
hoverBackground: '#F1F3FF',
popoverBackground: '#fff',
codeBackground: '#f2f5f9',
pageBackground: '#fff',
hoverBackground: '#F1F3FF',
popoverBackground: '#fff',
codeBackground: '#f2f5f9',
textColor: '#3A4C5C',
edgelessTextColor: '#3A4C5C',
iconColor: '#9096A5',
linkColor: '#6880FF',
linkColor2: '#6880FF',
linkVisitedColor: '#ABB8FE',
popoverColor: '#4C6275',
codeColor: '#517ea6',
quoteColor: '#4C6275',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(104, 128, 255, 0.1)',
borderColor: '#D0D7E3',
},
font: {
xs: '12px',
sm: '16px',
base: '18px',
family: `Avenir Next, ${basicFontFamily}`,
family2: `Space Mono, ${basicFontFamily}`,
lineHeightBase: '26px',
},
zIndex: {
modal: 1000,
popover: 100,
},
shadow: {
popover:
'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);',
modal:
'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);',
tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
},
space: {
paragraph: '8px',
},
radius: {
popover: '10px',
},
textColor: '#3A4C5C',
edgelessTextColor: '#3A4C5C',
iconColor: '#9096A5',
linkColor: '#6880FF',
linkColor2: '#6880FF',
linkVisitedColor: '#ABB8FE',
popoverColor: '#4C6275',
codeColor: '#517ea6',
quoteColor: '#4C6275',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(104, 128, 255, 0.1)',
borderColor: '#D0D7E3',
disableColor: '#C0C0C0',
},
font: {
xs: '12px',
sm: '16px',
base: '18px',
family: `Avenir Next, ${basicFontFamily}`,
family2: `Space Mono, ${basicFontFamily}`,
lineHeightBase: '26px',
},
zIndex: {
modal: 1000,
popover: 100,
},
shadow: {
popover:
'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);',
modal:
'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);',
tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
},
space: {
paragraph: '8px',
},
radius: {
popover: '10px',
},
};
};
export const darkTheme: AffineTheme = {
...lightTheme,
mode: 'dark',
colors: {
primaryColor: '#6880FF',
export const getDarkTheme = (
editorMode: EditorContainer['mode']
): AffineTheme => {
const lightTheme = getLightTheme(editorMode);
pageBackground: '#2c2c2c',
hoverBackground: '#3C3C42',
popoverBackground: '#1F2021',
codeBackground: '#505662',
return {
...lightTheme,
mode: 'dark',
colors: {
primaryColor: '#6880FF',
textColor: '#fff',
edgelessTextColor: '#3A4C5C',
iconColor: '#9096A5',
linkColor: '#7D91FF',
linkColor2: '#6880FF',
linkVisitedColor: '#505FAB',
popoverColor: '#C6CBD9',
codeColor: '#BDDBFD',
quoteColor: '#C6CBD9',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(240, 242, 255, 0.8)',
borderColor: '#4D4C53',
},
shadow: {
popover:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
modal:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
},
pageBackground: '#2c2c2c',
hoverBackground: '#3C3C42',
popoverBackground: '#1F2021',
codeBackground:
editorMode === 'edgeless'
? lightTheme.colors.codeBackground
: '#505662',
textColor: '#fff',
edgelessTextColor: '#3A4C5C',
iconColor: '#9096A5',
linkColor: '#7D91FF',
linkColor2: '#6880FF',
linkVisitedColor: '#505FAB',
popoverColor: '#C6CBD9',
codeColor:
editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD',
quoteColor: '#C6CBD9',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(104, 128, 255, 0.1)',
borderColor: '#4D4C53',
disableColor: '#4b4b4b',
},
shadow: {
popover:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
modal:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
tooltip: '1px 1px 4px rgba(0, 0, 0, 0.14)',
},
};
};
export const globalThemeVariables: (
@@ -92,6 +110,9 @@ export const globalThemeVariables: (
theme: AffineTheme
) => AffineThemeCSSVariables = (mode, theme) => {
return {
'--affine-theme-mode': theme.mode,
'--affine-editor-mode': theme.editorMode,
'--affine-primary-color': theme.colors.primaryColor,
'--affine-page-background': theme.colors.pageBackground,
@@ -112,6 +133,7 @@ export const globalThemeVariables: (
'--affine-selected-color': theme.colors.selectedColor,
'--affine-placeholder-color': theme.colors.placeHolderColor,
'--affine-border-color': theme.colors.borderColor,
'--affine-disable-color': theme.colors.disableColor,
'--affine-modal-shadow': theme.shadow.modal,
'--affine-popover-shadow': theme.shadow.popover,