mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-23 21:38:44 +08:00
Peng Xiao
5979162a5c
Add color-scheme to html so that the web will use system scheme when scripts has not being loaded; Use `(prefers-color-scheme: dark)` so that the css vars do not defer load based on `data-theme`, which is set by next-themes (which is deferred).
27 lines
581 B
TypeScript
27 lines
581 B
TypeScript
import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
|
|
import { globalStyle } from '@vanilla-extract/css';
|
|
|
|
globalStyle('body', {
|
|
color: 'var(--affine-text-primary-color)',
|
|
fontFamily: 'var(--affine-font-family)',
|
|
fontSize: 'var(--affine-font-base)',
|
|
});
|
|
|
|
globalStyle('html', {
|
|
vars: lightCssVariables,
|
|
});
|
|
|
|
globalStyle('html', {
|
|
'@media': {
|
|
'(prefers-color-scheme: dark)': {
|
|
vars: darkCssVariables,
|
|
},
|
|
},
|
|
});
|
|
|
|
if (process.env.NODE_ENV === 'development') {
|
|
globalStyle('.undefined', {
|
|
border: '5px solid red !important',
|
|
});
|
|
}
|