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

feat: modify mode radio animate

Browse Source
This commit is contained in:
QiShaoXuan
2022-10-17 12:55:34 +08:00
parent cf99129205
commit 9db0b21e35
12 changed files with 443 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/styles/index.ts
View File

@@ -1,6 +1,6 @@
export type { ThemeMode, ThemeProviderProps, AffineTheme } from './types';
export { styled } from './styled';
export * from './styled';
export { ThemeProvider } from './themeProvider';
export { lightTheme, darkTheme } from './theme';
export { useTheme } from './hooks';

2
packages/app/src/styles/styled.ts
View File

@@ -1,3 +1,3 @@
import emotionStyled from '@emotion/styled';
export { css, keyframes } from '@emotion/react';
export const styled = emotionStyled;

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

@@ -3,25 +3,30 @@ import { AffineTheme, ThemeMode } from './types';
export const lightTheme: AffineTheme = {
colors: {
primary: '#0070f3',
primary: '#3A4C5C',
highlight: '#7389FD',
disabled: '#9096A5',
background: '#fff',
},
};
export const darkTheme: AffineTheme = {
colors: {
primary: '#000',
primary: '#fff',
highlight: '#7389FD',
disabled: '#9096A5',
background: '#3d3c3f',
},
};
export const globalThemeConstant = (mode: ThemeMode, theme: AffineTheme) => {
const isDark = mode === 'dark';
return {
'--color-primary': theme.colors.primary,
'--page-background-color': isDark ? '#3d3c3f' : '#fff',
'--page-text-color': isDark ? '#fff' : '#3a4c5c',
'--page-background-color': theme.colors.background,
'--page-text-color': theme.colors.primary,
// editor style variables
'--affine-primary-color': isDark ? '#fff' : '#3a4c5c',
'--affine-primary-color': theme.colors.primary,
'--affine-muted-color': '#a6abb7',
'--affine-highlight-color': '#6880ff',
'--affine-placeholder-color': '#c7c7c7',
@@ -34,22 +39,3 @@ export const globalThemeConstant = (mode: ThemeMode, theme: AffineTheme) => {
'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',
};
};
const editorStyleVariable = {
'--affine-primary-color': '#3a4c5c',
'--affine-muted-color': '#a6abb7',
'--affine-highlight-color': '#6880ff',
'--affine-placeholder-color': '#c7c7c7',
'--affine-selected-color': 'rgba(104, 128, 255, 0.1)',
'--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-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',
};
const pageStyleVariable = {
'--page-background-color': '#fff',
'--page-text-color': '#3a4c5c',
};

3
packages/app/src/styles/types.ts
View File

@@ -14,6 +14,9 @@ export type ThemeProviderValue = {
export interface AffineTheme {
colors: {
primary: string;
highlight: string;
disabled: string;
background: string;
};
}