diff --git a/lib/web_ui/lib/src/engine/window.dart b/lib/web_ui/lib/src/engine/window.dart
index 0a1a86c5058..3897938bdf9 100644
--- a/lib/web_ui/lib/src/engine/window.dart
+++ b/lib/web_ui/lib/src/engine/window.dart
@@ -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.
diff --git a/lib/web_ui/lib/src/ui/window.dart b/lib/web_ui/lib/src/ui/window.dart
index 8f7febcc75a..80f15c712d1 100644
--- a/lib/web_ui/lib/src/ui/window.dart
+++ b/lib/web_ui/lib/src/ui/window.dart
@@ -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.
   ///