feat(layout): react instantly to color theme changes

Author: mbehr1

src/extension/fbaEditor.ts

@@ -266,9 +266,17 @@ export class FBAEditorProvider implements vscode.CustomTextEditorProvider, vscod
             }
         });
 
+        const changeThemeSubsription = vscode.window.onDidChangeActiveColorTheme((event) => {
+            postMsgOnceAlive({
+                type: 'onDidChangeActiveColorTheme',
+                kind: event.kind // 1 = light, 2 = dark, 3 = high contrast
+            });
+        });
+
         // Make sure we get rid of the listener when our editor is closed.
         webviewPanel.onDidDispose(() => {
             changeDocumentSubscription.dispose();
+            changeThemeSubsription.dispose();
             changeActiveDltDocSubscription.dispose();
         });
 

src/webview/src/App.js

@@ -255,6 +255,11 @@ export default class App extends Component {
           // console.warn(`App.onDidChangeActiveRestQueryDoc  attributes=${JSON.stringify(this.state.attributes)}`);
           this.setState((state) => { return { attributes: [...state.attributes] }; });
           break;
+        case 'onDidChangeActiveColorTheme':
+          console.log(`App.onDidChangeActiveColorTheme kind=${msg.kind}`);
+          // for now simply change title to force render:
+          this.setState((state) => { return { title: state.title }; });
+          break;
         default:
           console.warn(`App received unknown type=${msg.type} msg:`);
           console.log(msg);