Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-09-07 01:09:54 +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
packages/app/src/styles/index.ts
+1 -1
View File
@@ -2,6 +2,6 @@ export type { ThemeMode, ThemeProviderProps, AffineTheme } from './types';
export * from './styled';
export { ThemeProvider } from './themeProvider';
export { lightTheme, darkTheme } from './theme';
export * from './theme';
export { useTheme } from './hooks';
export * from './helper';
packages/app/src/styles/theme.ts
+97 -75
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,
packages/app/src/styles/themeProvider.tsx
+6 -4
View File
@@ -11,13 +11,14 @@ import {
ThemeProviderProps,
ThemeProviderValue,
} from './types';
import { lightTheme, darkTheme, globalThemeVariables } from './theme';
import { getLightTheme, getDarkTheme, globalThemeVariables } from './theme';
import { SystemThemeHelper, localStorageThemeHelper } from './utils';
import { useEditor } from '@/components/editor-provider';
export const ThemeContext = createContext<ThemeProviderValue>({
mode: 'light',
changeMode: () => {},
theme: lightTheme,
theme: getLightTheme('page'),
});
export const ThemeProvider = ({
@@ -26,8 +27,9 @@ export const ThemeProvider = ({
}: PropsWithChildren<ThemeProviderProps>) => {
const [theme, setTheme] = useState<Theme>(defaultTheme);
const [mode, setMode] = useState<ThemeMode>('auto');
const themeStyle = theme === 'light' ? lightTheme : darkTheme;
const { mode: editorMode } = useEditor();
const themeStyle =
theme === 'light' ? getLightTheme(editorMode) : getDarkTheme(editorMode);
const changeMode = (themeMode: ThemeMode) => {
themeMode !== mode && setMode(themeMode);
// Remember the theme mode which user selected for next time
packages/app/src/styles/types.ts
+8
View File
@@ -1,3 +1,5 @@
import { EditorContainer } from '@blocksuite/editor';
export type Theme = 'light' | 'dark';
export type ThemeMode = Theme | 'auto';
@@ -13,6 +15,7 @@ export type ThemeProviderValue = {
export interface AffineTheme {
mode: Theme;
editorMode: EditorContainer['mode'];
colors: {
primaryColor: string;
@@ -36,6 +39,7 @@ export interface AffineTheme {
placeHolderColor: string;
selectedColor: string;
borderColor: string;
disableColor: string;
};
font: {
xs: string; // tiny
@@ -65,6 +69,9 @@ export interface AffineTheme {
}
export interface AffineThemeCSSVariables {
'--affine-theme-mode': Theme;
'--affine-editor-mode': EditorContainer['mode'];
'--affine-primary-color': AffineTheme['colors']['primaryColor'];
'--affine-page-background': AffineTheme['colors']['pageBackground'];
'--affine-popover-background': AffineTheme['colors']['popoverBackground'];
@@ -84,6 +91,7 @@ export interface AffineThemeCSSVariables {
'--affine-placeholder-color': AffineTheme['colors']['placeHolderColor'];
'--affine-selected-color': AffineTheme['colors']['selectedColor'];
'--affine-border-color': AffineTheme['colors']['borderColor'];
'--affine-disable-color': AffineTheme['colors']['disableColor'];
'--affine-modal-shadow': AffineTheme['shadow']['modal'];
'--affine-popover-shadow': AffineTheme['shadow']['popover'];