DevTools colors match IDE theme (#9144)

Author: elliette

packages/devtools_app/lib/src/screens/debugger/program_explorer.dart

@@ -255,7 +255,7 @@ class ProgramStructureIcon extends StatelessWidget {
                     style: TextStyle(
                       height: 1,
                       fontFamily: theme.fixedFontStyle.fontFamily,
-                      color: theme.colorScheme.defaultBackgroundColor,
+                      color: theme.colorScheme.surface,
                       fontSize: smallFontSize,
                     ),
                     // Required to center the individual character within the

packages/devtools_app/lib/src/screens/memory/panes/chart/widgets/chart_pane.dart

@@ -10,7 +10,6 @@ import 'package:flutter/services.dart';
 import '../../../../../shared/charts/chart_controller.dart';
 import '../../../../../shared/globals.dart';
 import '../../../../../shared/primitives/utils.dart';
-import '../../../../../shared/ui/colors.dart';
 import '../../../../../shared/ui/common_widgets.dart';
 import '../../../../../shared/utils/utils.dart';
 import '../../../shared/primitives/painting.dart';
@@ -298,7 +297,7 @@ class _MemoryChartPaneState extends State<MemoryChartPane>
             child: Container(
               padding: const EdgeInsets.only(top: 5, bottom: 8),
               decoration: BoxDecoration(
-                color: colorScheme.defaultBackgroundColor,
+                color: colorScheme.surface,
                 border: Border.all(
                   color: focusColor,
                   width: _hoverCardBorderWidth,

packages/devtools_app/lib/src/screens/memory/panes/chart/widgets/legend.dart

@@ -5,7 +5,6 @@
 import 'package:devtools_app_shared/ui.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../../shared/ui/colors.dart';
 import '../../../shared/primitives/painting.dart';
 import '../controller/chart_pane_controller.dart';
 import '../controller/charts/android_chart_controller.dart';
@@ -85,7 +84,7 @@ class MemoryChartLegend extends StatelessWidget {
       height: isAndroidVisible ? _legendHeight2Charts : _legendHeight1Chart,
       padding: const EdgeInsets.only(top: densePadding, right: densePadding),
       decoration: BoxDecoration(
-        color: colorScheme.defaultBackgroundColor,
+        color: colorScheme.surface,
         border: Border.all(color: theme.focusColor),
         borderRadius: defaultBorderRadius,
       ),

packages/devtools_app/lib/src/service/service_extension_widgets.dart

@@ -23,7 +23,6 @@ import '../shared/constants.dart';
 import '../shared/globals.dart';
 import '../shared/primitives/message_bus.dart';
 import '../shared/primitives/utils.dart';
-import '../shared/ui/colors.dart';
 import '../shared/ui/common_widgets.dart';
 import '../shared/ui/hover.dart';
 import 'service_extensions.dart';
@@ -891,7 +890,7 @@ class _ServiceExtensionCheckboxGroupOverlay extends StatelessWidget {
           width: width,
           padding: const EdgeInsets.all(defaultSpacing),
           decoration: BoxDecoration(
-            color: theme.colorScheme.defaultBackgroundColor,
+            color: theme.colorScheme.surface,
             border: Border.all(
               color: theme.focusColor,
               width: hoverCardBorderSize,

packages/devtools_app/lib/src/shared/charts/flame_chart.dart

@@ -1337,7 +1337,7 @@ class TimelineGridPainter extends FlameChartPainter {
         constraints.maxWidth,
         math.min(constraints.maxHeight, chartRowHeight),
       ),
-      Paint()..color = colorScheme.defaultBackgroundColor,
+      Paint()..color = colorScheme.surface,
     );
 
     // Paint the timeline grid lines and corresponding timestamps in the flame

packages/devtools_app/lib/src/shared/ui/colors.dart

@@ -107,20 +107,12 @@ extension SyntaxHighlightingExtension on ColorScheme {
       isLight ? const Color(0xFF098658) : const Color(0xFFB5CEA8);
 }
 
-// TODO(kenz): try to get rid of these colors and replace with something from
-// the light and dark DevTools color schemes.
 extension DevToolsColorExtension on ColorScheme {
-  // TODO(jacobr): replace this with Theme.of(context).scaffoldBackgroundColor, but we use
-  // this in places where we do not have access to the context.
-  // remove.
-  // TODO(kenz): get rid of this.
-  Color get defaultBackgroundColor =>
-      isLight ? Colors.grey[50]! : const Color(0xFF1B1B1F);
-
   Color get grey => const Color.fromARGB(255, 128, 128, 128);
   Color get green =>
       isLight ? const Color(0xFF006B5F) : const Color(0xFF54DBC8);
-
   Color get overlayShadowColor => const Color.fromRGBO(0, 0, 0, 0.5);
-  Color get deeplinkTableHeaderColor => isLight ? Colors.white : Colors.black;
+  // Deep link header is slightly darker than the default surface color. See
+  // comment at: https://github.com/flutter/devtools/pull/7443/files#r1538361768
+  Color get deeplinkTableHeaderColor => surface.darken();
 }

packages/devtools_app/lib/src/shared/ui/search.dart

@@ -405,7 +405,7 @@ class AutoCompleteState extends State<AutoComplete> with AutoDisposeMixin {
           controller: controller,
           onTap: autoComplete.onTap,
           highlightColor: colorScheme.autoCompleteHighlightColor,
-          defaultColor: colorScheme.defaultBackgroundColor,
+          defaultColor: colorScheme.surface,
         ),
       );
     }