-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: support auto computing dark mode #1093
base: v6
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -22,7 +22,7 @@ import { GradientObject } from './graphic/Gradient'; | |
import { PatternObject } from './graphic/Pattern'; | ||
import { EventCallback } from './core/Eventful'; | ||
import Displayable from './graphic/Displayable'; | ||
import { lum } from './tool/color'; | ||
import { lum, normalizeColorMap } from './tool/color'; | ||
import { DARK_MODE_THRESHOLD } from './config'; | ||
import Group from './graphic/Group'; | ||
|
||
|
@@ -83,6 +83,7 @@ class ZRender { | |
private _needsRefreshHover = true | ||
private _disposed: boolean; | ||
/** | ||
* TODO: probably should be removed in the future | ||
* If theme is dark mode. It will determine the color strategy for labels. | ||
*/ | ||
private _darkMode = false; | ||
|
@@ -117,7 +118,19 @@ class ZRender { | |
? false | ||
: opts.useDirtyRect; | ||
|
||
const painter = new painterCtors[rendererType](dom, storage, opts, id); | ||
const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; | ||
const darkMode = opts.darkMode === 'light' | ||
? false | ||
: (opts.darkMode === 'dark' ? true : isDark); | ||
|
||
opts.darkColorMap = normalizeColorMap(opts.darkColorMap); | ||
console.log(opts.darkColorMap) | ||
|
||
const painter = new painterCtors[rendererType](dom, storage, | ||
{ | ||
darkMode, | ||
...opts | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use |
||
}, id); | ||
const ssrMode = opts.ssr || painter.ssrOnly; | ||
|
||
this.storage = storage; | ||
|
@@ -491,6 +504,8 @@ export interface ZRenderInitOpt { | |
devicePixelRatio?: number | ||
width?: number | string // 10, 10px, 'auto' | ||
height?: number | string | ||
darkMode?: 'auto' | 'light' | 'dark' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Semantically, the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was intentionly using There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
It looks clear enough to me:
This is how many apps do. And if there is a must to avoid boolean value, 'colorScheme' (from CSS property color-scheme) may be a candidate for the name. |
||
darkColorMap?: Dictionary<string>, | ||
useDirtyRect?: boolean | ||
useCoarsePointer?: 'auto' | boolean | ||
pointerSize?: number | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We need to ensure the window exists. Add
env.hasGlobalWindow
beforewindow.matchMedia
and I recommend moving this line to 124 to avoid unnecessary invoking.