feat: sync theme of Explo view with VS Code (#11)

blaugold · web-flow · commit 5e9e2e7dbecc · 2021-12-13T23:10:18.000+01:00
Closes #10
diff --git a/.gitignore b/.gitignore
@@ -337,7 +337,8 @@ modules.xml
 .LSOverride
 
 # Icon must end with two \r
-Icon
+Icon
+
 
 # Thumbnails
 ._*
@@ -536,3 +537,4 @@ $RECYCLE.BIN/
 
 # Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
 
+*.vsix
diff --git a/explo-code/src/explo_view_commands.ts b/explo-code/src/explo_view_commands.ts
@@ -1,4 +1,5 @@
 import {
+  ColorThemeKind,
   commands,
   Disposable,
   ExtensionContext,
@@ -92,6 +93,9 @@ export class ExploViewCommands implements Disposable {
     panel.webview.html = exploWebviewContent({
       baseUri: baseUri.toString(),
       vmServiceUri: session.vmServiceUri!,
+      themeMode: vscodeColorThemeKindToExploThemeMode(
+        window.activeColorTheme.kind
+      ),
     })
 
     this.openViewPanels.set(session, panel)
@@ -112,12 +116,29 @@ export class ExploViewCommands implements Disposable {
   }
 }
 
+enum ExploThemeMode {
+  light = 'light',
+  dark = 'dark',
+}
+
+function vscodeColorThemeKindToExploThemeMode(kind: ColorThemeKind) {
+  switch (kind) {
+    case ColorThemeKind.HighContrast:
+    case ColorThemeKind.Dark:
+      return ExploThemeMode.dark
+    case ColorThemeKind.Light:
+      return ExploThemeMode.light
+  }
+}
+
 function exploWebviewContent({
   baseUri,
   vmServiceUri,
+  themeMode,
 }: {
   baseUri: string
   vmServiceUri: string
+  themeMode: 'light' | 'dark'
 }): string {
   return `
 <!DOCTYPE html>
@@ -132,7 +153,8 @@ function exploWebviewContent({
         // Prepare browser environment for the view.
         window.explo = {
             config: {
-                vmServiceUri: '${vmServiceUri}'
+                vmServiceUri: '${vmServiceUri}',
+                themeMode: '${themeMode}'
             }
         }
 
diff --git a/packages/explo_ide_view/lib/config.dart b/packages/explo_ide_view/lib/config.dart
@@ -1,15 +1,39 @@
+/// The config properties in this library have to be set in the browser
+/// environment, before the Flutter app is loaded.
+///
+/// ```js
+/// window.explo = {
+///   config: {
+///     vmServiceUri: ...,
+///     themeMode: ...,
+///   }
+/// }
+/// ```
 @JS('explo.config')
 library config;
 
+import 'package:flutter/material.dart';
 import 'package:js/js.dart';
 
 /// The VM Service URI of the target.
-///
-/// This has to be set in the browser environment, before the Flutter app is
-/// loaded.
-///
-/// ```js
-/// window.explo = { config: { vmServiceUri: ... } }
-/// ```
-@JS()
-external String get vmServiceUri;
+Uri get vmServiceUri => Uri.parse(_vmServiceUri);
+
+@JS('vmServiceUri')
+external String get _vmServiceUri;
+
+/// The theme mode to use for the view.
+ThemeMode get themeMode => parseThemeMode(_themeMode);
+
+@JS('themeMode')
+external String get _themeMode;
+
+ThemeMode parseThemeMode(String value) {
+  switch (value) {
+    case 'dark':
+      return ThemeMode.dark;
+    case 'light':
+      return ThemeMode.light;
+    default:
+      throw ArgumentError.value(value, 'value', 'Unknown theme mode');
+  }
+}
diff --git a/packages/explo_ide_view/lib/main.dart b/packages/explo_ide_view/lib/main.dart
@@ -19,7 +19,10 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       theme: ThemeData.from(colorScheme: const ColorScheme.light()),
       darkTheme: ThemeData.from(colorScheme: const ColorScheme.dark()),
-      home: ExploView(vmServiceUri: Uri.parse(vmServiceUri)),
+      home: ExploView(
+        vmServiceUri: vmServiceUri,
+        themeMode: themeMode,
+      ),
     );
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,10 @@ class MyApp extends StatelessWidget {`
`19`	`19`	`return MaterialApp(`
`20`	`20`	`theme: ThemeData.from(colorScheme: const ColorScheme.light()),`
`21`	`21`	`darkTheme: ThemeData.from(colorScheme: const ColorScheme.dark()),`
`22`		`- home: ExploView(vmServiceUri: Uri.parse(vmServiceUri)),`
	`22`	`+ home: ExploView(`
	`23`	`+ vmServiceUri: vmServiceUri,`
	`24`	`+ themeMode: themeMode,`
	`25`	`+ ),`
`23`	`26`	`);`
`24`	`27`	`}`
`25`	`28`	`}`