From bd387f655179eb6d852bcb7245f3560fe08db812 Mon Sep 17 00:00:00 2001 From: Himself65 Date: Fri, 14 Apr 2023 02:13:14 -0500 Subject: [PATCH] fix: theme color (#1944) --- packages/component/src/styles/theme.ts | 21 +++------------------ packages/component/src/styles/types.ts | 4 +++- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/component/src/styles/theme.ts b/packages/component/src/styles/theme.ts index 66053f606..fe22534b8 100644 --- a/packages/component/src/styles/theme.ts +++ b/packages/component/src/styles/theme.ts @@ -2,6 +2,7 @@ import '@emotion/react'; import type { EditorContainer } from '@blocksuite/editor'; +import { nextDarkColorScheme, nextLightColorScheme } from './color-scheme'; import type { AffineTheme, AffineThemeCSSVariables } from './types'; const basicFontFamily = @@ -16,11 +17,9 @@ export const getLightTheme = ( }, editorMode, colors: { - primaryColor: '#5438FF', pageBackground: '#fff', hoverBackground: 'rgba(0,0,0,.04)', innerHoverBackground: '#E9E9EC', - backgroundTertiaryColor: '#E9E9EC', popoverBackground: '#fff', tooltipBackground: '#261499', codeBackground: '#f2f5f9', @@ -33,23 +32,17 @@ export const getLightTheme = ( textColor: '#424149', secondaryTextColor: '#8E8D91', - textEmphasisColor: '#5438FF', edgelessTextColor: '#3A4C5C', - iconColor: '#77757D', handleColor: '#c7c3d9', - linkColor: '#5438FF', linkColor2: '#5438FF', linkVisitedColor: '#5438FF', tooltipColor: '#fff', codeColor: '#77757D', - quoteColor: '#645F82', placeHolderColor: '#C0BFC1', selectedColor: 'rgba(84, 56, 255, 0.04)', - borderColor: '#E3E2E4', disableColor: '#A9A9AD', - warningColor: '#906616', - errorColor: '#EB4335', lineNumberColor: '#77757D', + ...nextLightColorScheme, }, font: { title: '36px', @@ -107,11 +100,9 @@ export const getDarkTheme = ( mode: 'dark', }, colors: { - primaryColor: '#5438FF', pageBackground: '#2c2c2c', hoverBackground: 'rgba(0,0,0,.04)', innerHoverBackground: '#5A5A5A', - backgroundTertiaryColor: '#1E1E1E', popoverBackground: '#1F2021', tooltipBackground: '#0C0A15', codeBackground: @@ -127,24 +118,18 @@ export const getDarkTheme = ( textColor: '#fff', secondaryTextColor: '#8E8D91', - textEmphasisColor: '#D0CDDC', edgelessTextColor: '#3A4C5C', - iconColor: '#77757D', handleColor: '#c7c3d9', - linkColor: '#7D91FF', linkColor2: '#0C0A15', linkVisitedColor: '#505FAB', tooltipColor: '#fff', codeColor: editorMode === 'edgeless' ? lightTheme.colors.codeColor : '#BDDBFD', - quoteColor: '#C6CBD9', placeHolderColor: '#C7C7C7', selectedColor: 'rgba(104, 128, 255, 0.1)', - borderColor: '#3C3A40', disableColor: '#4b4b4b', - warningColor: '#906616', - errorColor: '#EB4335', lineNumberColor: '#888A9E', + ...nextDarkColorScheme, }, shadow: { popover: diff --git a/packages/component/src/styles/types.ts b/packages/component/src/styles/types.ts index fd6f0c245..a8d75424f 100644 --- a/packages/component/src/styles/types.ts +++ b/packages/component/src/styles/types.ts @@ -1,6 +1,8 @@ import type { EditorContainer } from '@blocksuite/editor'; import type { CSSProperties } from 'react'; +import type { AffineNextLightColorScheme } from './color-scheme'; + export type Theme = 'light' | 'dark'; export type ThemeMode = Theme | 'auto'; @@ -59,7 +61,7 @@ export interface AffineTheme { warningColor: string; errorColor: string; lineNumberColor: string; - }; + } & AffineNextLightColorScheme; font: { title: string; h1: string;