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

feat: modify style variables

Browse Source
This commit is contained in:
QiShaoXuan
2022-10-18 17:08:42 +08:00
parent 2b13a63848
commit 90dba82a59
15 changed files with 232 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,49 +1,98 @@
import '@emotion/react';
import { AffineTheme, ThemeMode } from './types';
import { AffineTheme, AffineThemeCSSVariables, ThemeMode } from './types';
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 = {
colors: {
primary: '#3A4C5C',
highlight: '#7389FD',
disabled: '#9096A5',
background: '#fff',
primaryColor: '#6880FF',
pageBackground: '#fff',
hoverBackground: '#F1F3FF',
popoverBackground: '#fff',
codeBackground: '#f2f5f9',
textColor: '#3A4C5C',
iconColor: '#9096A5',
linkColor: '#6880FF',
linkColor2: '#6880FF',
linkVisitedColor: '#ABB8FE',
popoverColor: '#4C6275',
codeColor: '#517ea6',
quoteColor: '#4C6275',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(104, 128, 255, 0.1)',
boxShadow:
' 0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04);',
},
font: {
xs: '12px',
sm: '16px',
base: '18px',
family: `Avenir Next, ${basicFontFamily}`,
family2: `Roboto Mono, ${basicFontFamily}`,
},
};
export const darkTheme: AffineTheme = {
...lightTheme,
colors: {
primary: '#fff',
highlight: '#7389FD',
disabled: '#9096A5',
background: '#3d3c3f',
hoverBackground: '#F1F3FF',
primaryColor: '#6880FF',
pageBackground: '#2c2c2c',
hoverBackground: '#3C3C42',
popoverBackground: '#1F2021',
codeBackground: '#505662',
textColor: '#fff',
iconColor: '#9096A5',
linkColor: '#6880FF',
linkColor2: '#7D91FF',
linkVisitedColor: '#505FAB',
popoverColor: '#A9B1C6',
codeColor: '#BDDBFD',
quoteColor: '#A9B1C6',
placeHolderColor: '#C7C7C7',
selectedColor: 'rgba(240, 242, 255, 0.8)',
boxShadow:
'0px 1px 10px -6px rgba(24, 39, 75, 0.08), 0px 3px 16px -6px rgba(24, 39, 75, 0.04)',
},
};
export const globalThemeConstant = (mode: ThemeMode, theme: AffineTheme) => {
const isDark = mode === 'dark';
export const globalThemeVariables: (
mode: ThemeMode,
theme: AffineTheme
) => AffineThemeCSSVariables = (mode, theme) => {
return {
'--page-background-color': theme.colors.background,
'--page-text-color': theme.colors.primary,
'--affine-primary-color': theme.colors.primaryColor,
// editor style variables
'--affine-primary-color': theme.colors.primary,
'--affine-muted-color': '#a6abb7',
'--affine-highlight-color': '#6880ff',
'--affine-placeholder-color': '#c7c7c7',
'--affine-selected-color': 'rgba(104, 128, 255, 0.1)',
'--affine-page-background': theme.colors.pageBackground,
'--affine-popover-background': theme.colors.popoverBackground,
'--affine-hover-background': theme.colors.hoverBackground,
'--affine-code-background': theme.colors.codeBackground,
'--affine-font-family':
'Avenir Next, 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',
'--affine-text-color': theme.colors.textColor,
'--affine-link-color': theme.colors.linkColor,
// In dark mode, normal text`s (not bold) color
'--affine-link-color2': theme.colors.linkColor2,
'--affine-link-visited-color': theme.colors.linkVisitedColor,
'--affine-icon-color': theme.colors.iconColor,
'--affine-popover-color': theme.colors.popoverColor,
'--affine-code-color': theme.colors.codeColor,
'--affine-quote-color': theme.colors.quoteColor,
'--affine-selected-color': theme.colors.selectedColor,
'--affine-placeholder-color': theme.colors.placeHolderColor,
'--affine-font-family2':
'Roboto Mono, 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',
'--affine-box-shadow': theme.colors.boxShadow,
'--affine-font-xs': theme.font.xs, // tiny
'--affine-font-sm': theme.font.sm, // small
'--affine-font-base': theme.font.base,
'--affine-font-family': theme.font.family,
'--affine-font-family2': theme.font.family2,
};
};