DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[Web] Implement dark mode support for web (#12335)

Browse Source
This commit is contained in:
Jaime Blasco 2019-09-23 18:42:20 +02:00 committed by Mouad Debbar
parent cdc4c30c81
commit 111a340b93
2 changed files with 56 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
lib/web_ui/lib/src/engine/window.dart
View File

@ -9,6 +9,11 @@ const bool _debugPrintPlatformMessages = false;
/// The Web implementation of [ui.Window].
class EngineWindow extends ui.Window {
EngineWindow() {
_addBrightnessMediaQueryListener();
}
@override
double get devicePixelRatio => _devicePixelRatio;
@ -198,6 +203,56 @@ class EngineWindow extends ui.Window {
callback(data);
});
}
@override
ui.Brightness get platformBrightness => _platformBrightness;
ui.Brightness _platformBrightness = ui.Brightness.light;
/// Updates [_platformBrightness] and invokes [onPlatformBrightnessChanged]
/// callback if [_platformBrightness] changed.
void _updatePlatformBrightness(ui.Brightness newPlatformBrightness) {
ui.Brightness previousPlatformBrightness = _platformBrightness;
_platformBrightness = newPlatformBrightness;
if (previousPlatformBrightness != _platformBrightness &&
onPlatformBrightnessChanged != null)
onPlatformBrightnessChanged();
}
/// Reference to css media query that indicates the user theme preference on the web.
final html.MediaQueryList _brightnessMediaQuery = html.window.matchMedia('(prefers-color-scheme: dark)');
/// A callback that is invoked whenever [_brightnessMediaQuery] changes value.
///
/// Updates the [_platformBrightness] with the new user preference.
html.EventListener _brightnessMediaQueryListener;
/// Set the callback function for listening changes in [_brightnessMediaQuery] value.
void _addBrightnessMediaQueryListener() {
_updatePlatformBrightness(_brightnessMediaQuery.matches ? ui.Brightness.dark : ui.Brightness.light);
_brightnessMediaQueryListener = (html.Event event) {
final html.MediaQueryListEvent mqEvent = event;
_updatePlatformBrightness(mqEvent.matches ? ui.Brightness.dark : ui.Brightness.light);
};
_brightnessMediaQuery.addListener(_brightnessMediaQueryListener);
registerHotRestartListener(() {
_removeBrightnessMediaQueryListener();
});
}
/// Remove the callback function for listening changes in [_brightnessMediaQuery] value.
void _removeBrightnessMediaQueryListener() {
_brightnessMediaQuery.removeListener(_brightnessMediaQueryListener);
_brightnessMediaQueryListener = null;
}
@override
void dispose() {
_removeBrightnessMediaQueryListener();
}
}
/// The window singleton.

4
lib/web_ui/lib/src/ui/window.dart
View File

@ -634,9 +634,7 @@ abstract class Window {
}
/// The setting indicating the current brightness mode of the host platform.
/// If the platform has no preference, [platformBrightness] defaults to [Brightness.light].
Brightness get platformBrightness => _platformBrightness;
Brightness _platformBrightness = Brightness.light;
Brightness get platformBrightness;
/// A callback that is invoked whenever [platformBrightness] changes value.
///