Mixin

Author: KaspOu

src/commands/showWelcome.ts

@@ -13,10 +13,11 @@ export function registerShowWelcome(command: Commands) {
       const showWelcomeAtStartup = config.get("showWelcomeAtStartup", true);
 
       const colorThemeConfig = config.get("theme.colorTheme", "auto");
-      const colorTheme = LwcPanelManager.resolveTheme(colorThemeConfig);
+      const { colorTheme, colorContrast } = LwcPanelManager.resolveTheme(colorThemeConfig);
       const panel = lwcManager.getOrCreatePanel("s-welcome", {
         showWelcomeAtStartup: showWelcomeAtStartup,
-        colorTheme
+        colorTheme,
+        colorContrast
       });
       panel.updateTitle("SFDX Hardis Welcome");
 

src/extension.ts

@@ -251,15 +251,12 @@ export function activate(context: vscode.ExtensionContext) {
 
       const config = vscode.workspace.getConfiguration("vsCodeSfdxHardis.theme");
       const colorThemeConfig = config.get("colorTheme", "auto");
-      const colorTheme = LwcPanelManager.resolveTheme(colorThemeConfig);
+      const { colorTheme, colorContrast } = LwcPanelManager.resolveTheme(colorThemeConfig);
 
       getExtensionConfigSections(context.extensionUri).then((sections) => {
         LwcPanelManager.getInstance(context).refreshAllPanels({
           colorTheme,
-          "s-extension-config": { 
-            sections: sections,
-            activeTabValue: "theme" 
-          } 
+          colorContrast 
         });
       }).catch((err) => {
         Logger.log("Error refreshing panels with new theme: " + err.message);
@@ -274,12 +271,12 @@ export function activate(context: vscode.ExtensionContext) {
 
     if (!colorThemeConfig || colorThemeConfig === "auto") {
       const lwcManager = LwcPanelManager.getInstance(context);
-      const colorTheme = LwcPanelManager.resolveTheme(colorThemeConfig);
+      const { colorTheme, colorContrast } = LwcPanelManager.resolveTheme(colorThemeConfig);
 
       // Send theme update to all active panels
       lwcManager.sendMessageToAllPanels({
         type: "updateTheme",
-        data: { colorTheme }
+        data: { colorTheme, colorContrast }
       });
     }
   });

src/lwc-panel-manager.ts

@@ -247,10 +247,10 @@ export class LwcPanelManager {
 
 
   /**
-   * Resolve the theme string based on configuration
-   * @returns The resolved theme string
+   * Resolve the theme to use based on the input and VS Code's active theme
+   * @returns An object with colorTheme and colorContrast properties
    */
-  public static resolveTheme(colorTheme: string): string {
+  public static resolveTheme(colorTheme: string): any {
     return LwcUiPanel.resolveTheme(colorTheme);
   }
 }

src/themeUtils.ts

@@ -4,7 +4,7 @@ import * as vscode from "vscode";
 export class ThemeUtils {
   public emojisInSections: boolean;
   public menuIconType: "vscode" | "hardis";
-  public colorTheme: "auto" | "light" | "dark" | "high-contrast";
+  public colorTheme: "auto" | "light" | "dark" | "dark-high" | "light-high";
   public allTopicEmojis: any;
   public allCommandIcons: any;
 
@@ -40,7 +40,7 @@ export class ThemeUtils {
   public static getThemeConfiguration(): {
     emojisInSections: boolean;
     menuIconType: "vscode" | "hardis";
-    colorTheme: "auto" | "light" | "dark" | "high-contrast";
+    colorTheme: "auto" | "light" | "dark" | "dark-high" | "light-high";
   } {
     const config = vscode.workspace.getConfiguration("vsCodeSfdxHardis.theme");
     return {

src/webviews/lwc-ui-panel.ts

@@ -197,7 +197,9 @@ export class LwcUiPanel {
     // Always add colorTheme to initialization data for consistent theme support
     const config = vscode.workspace.getConfiguration("vsCodeSfdxHardis.theme");
     const colorThemeConfig = config.get("colorTheme", "auto");
-    data.colorTheme = LwcUiPanel.resolveTheme(colorThemeConfig);
+    const { colorTheme, colorContrast } = LwcUiPanel.resolveTheme(colorThemeConfig);
+    data.colorTheme = colorTheme;
+    data.colorContrast = colorContrast;
 
     this.panel.webview.postMessage({
       type: "initialize",
@@ -611,8 +613,7 @@ export class LwcUiPanel {
    * Refresh the webview HTML (useful when configuration changes, like theme)
    */
   public refresh(data: any): void {
-    
-    if (data?.colorTheme) { // FIXME
+    if (data?.colorTheme) {
       this.sendMessage({
         type: "updateTheme",
         data
@@ -625,24 +626,40 @@ export class LwcUiPanel {
 
   /**
    * Resolve the theme to use based on the input and VS Code's active theme
-   * @param theme The input theme, can be "auto", "dark", "light", dark-high-contrast" or "light-high-contrast"
-   * @returns The resolved theme string: everything but "auto"
+   * @param theme The input theme, can be "auto", "dark", "light", "dark-high" or "light-high"
+   * @returns An object with colorTheme and colorContrast properties
    */
-  public static resolveTheme(theme: string): string {
-    if (theme === "auto") {
+  public static resolveTheme(theme: string): any {
+    const resultTheme = {
+      colorTheme: "light",
+      colorContrast: ""
+    }
+    if (!theme || theme === "auto") {
       const vsCodeTheme = vscode.window.activeColorTheme.kind;
       switch (vsCodeTheme) {
         case vscode.ColorThemeKind.HighContrast:
+          resultTheme.colorTheme = "dark";
+          resultTheme.colorContrast = "high";
+          break;
         case vscode.ColorThemeKind.Dark:
-          return "dark";
+          resultTheme.colorTheme = "dark";
+          break;
         case vscode.ColorThemeKind.HighContrastLight:
+          resultTheme.colorTheme = "light";
+          resultTheme.colorContrast = "high";
+          break;
         case vscode.ColorThemeKind.Light:
         default:
-          return "light";
+          resultTheme.colorTheme = "light";
+          break;
       }
+    } else {
+      const themeParts = theme.split("-", 2);
+      resultTheme.colorTheme = themeParts[0];
+      resultTheme.colorContrast = themeParts.length > 1 ? themeParts[1] : "";
     }
 
-    return theme;  
+    return resultTheme;
   }
 
   private getHtmlForWebview(webview: vscode.Webview) {
@@ -672,28 +689,27 @@ export class LwcUiPanel {
       vscode.Uri.joinPath(this.extensionUri, "out", "assets", "styles", "global-theme.css"),
     );
 
-    // Safely serialize initialization data
-    const initDataJson = this.initializationData
-      ? JSON.stringify(this.initializationData)
-          .replace(/'/g, "'")
-          .replace(/"/g, """)
-      : "{}";
-
     // Determine theme based on configuration
     const config = vscode.workspace.getConfiguration("vsCodeSfdxHardis.theme");
     const colorThemeConfig = config.get("colorTheme", "auto");
-    const colorTheme = LwcUiPanel.resolveTheme(colorThemeConfig);
+    const { colorTheme, colorContrast } = LwcUiPanel.resolveTheme(colorThemeConfig);
+    const initData = this.initializationData || {};
+    initData.colorTheme = colorTheme;
+    initData.colorContrast = colorContrast;
+
+    // Safely serialize initialization data
+    const initDataJson = JSON.stringify(initData)
+          .replace(/'/g, "'")
+          .replace(/"/g, """);
 
     const mermaidTheme = {
       clusterBkg: "#EAF5FC",
       edgeLabelBackground: "rgba(232,232,232, 0.8)"
     }
-    if (colorTheme.indexOf("dark") >= 0) {
+    if (colorTheme == "dark") {
       mermaidTheme.clusterBkg = "#333";
       mermaidTheme.edgeLabelBackground = "rgba(77, 77, 77, 0.5)";
     }
-    const colorThemeInfo = colorTheme.split('-')
-    const colorContrast = colorThemeInfo.length > 1 ? colorThemeInfo[1] : "";
 
     return `<!DOCTYPE html>
       <html lang="en">
@@ -713,7 +729,7 @@ export class LwcUiPanel {
         <!-- Global theme stylesheet: always included, handles both light and dark themes. -->
         <link rel="stylesheet" href="${globalThemeCssUri}">
       </head>
-      <body class="slds-scope blue-back" data-theme="${colorThemeInfo[0]}" data-contrast="${colorContrast}">
+      <body class="slds-scope blue-back" data-theme="${colorTheme}" data-contrast="${colorContrast}">
         <div id="app" data-lwc-id="${this.lwcId}" data-init-data="${initDataJson}"></div>
         
         <script>

src/webviews/lwc-ui/index.js

@@ -22,14 +22,12 @@ function routeMessageToComponent(message) {
   }
 
   if (message.type === "updateTheme") {
-    const colorTheme = message.data?.colorTheme;
-    if (colorTheme && document?.body) {
-      const colorThemeInfo = colorTheme.split('-')
-      document.body.setAttribute("data-theme", colorThemeInfo[0]);
-      document.body.setAttribute("data-contrast", colorThemeInfo.length > 1 ? colorThemeInfo[1] : "" );
-      console.log('test')
-      console.log('test', document.getElementById("app").querySelector('div'))
-      document.getElementById("app")?.querySelector('div')?.setAttribute("data-theme", colorThemeInfo[0]);
+    if (message.data?.colorTheme && document?.body) {
+      document.body.setAttribute("data-theme", message.data?.colorTheme);
+      document.body.setAttribute("data-contrast", message.data?.colorContrast);
+      if (typeof component.handleColorThemeMessage === "function") {
+        component.handleColorThemeMessage(message.type, message.data);
+      }
     }
   }
 
@@ -149,8 +147,8 @@ document.addEventListener("DOMContentLoaded", async () => {
       flushPendingMessages();
 
       // Avoid flash of unthemed content by applying theme early
-      if (initData?.colorTheme && element.handleMessage) {
-        element.handleMessage("updateTheme", { colorTheme: initData.colorTheme });
+      if (initData?.colorTheme && element.handleColorThemeMessage) {
+        element.handleColorThemeMessage("updateTheme", { colorTheme: initData.colorTheme, colorContrast: initData.colorContrast } );
       }
 
       // Wait a bit for the component to fully initialize

src/webviews/lwc-ui/modules/s/colorThemeMixin/colorThemeMixin.js

@@ -0,0 +1,43 @@
+/* eslint-disable */
+// LWC: ignore parsing errors for import/export, handled by LWC compiler
+// @ts-nocheck
+// eslint-env es6
+
+/**
+ * Mixin for managing color theme in LWC components
+ * Provides colorTheme and colorContrast tracking and update handling
+ * Usage:
+ *   import { ColorThemeMixin } from 's/colorThemeMixin';
+ *   export default class MyComponent extends ColorThemeMixin(LightningElement) {
+ *    ...
+ *    @api
+ *    handleColorThemeMessage(type, data) {
+ *      // Delegate to the mixin's implementation
+ *      if (super.handleColorThemeMessage)
+ *        super.handleColorThemeMessage(type, data);
+ *    }
+ */
+
+export const ColorThemeMixin = (BaseClass) =>
+	class extends BaseClass {
+		_colorTheme;
+        _colorContrast;
+		get colorTheme() {
+        return this._colorTheme || "";
+    }
+    set colorTheme(value) {
+        this._colorTheme = value;
+    }
+		get colorContrast() {
+        return this._colorContrast || "";
+    }
+    set colorContrast(value) {
+        this._colorContrast = value;
+    }
+    handleColorThemeMessage(type, data) {
+        if (type === "updateTheme" && data?.colorTheme) {
+            this._colorTheme = data.colorTheme;
+            this._colorContrast = data.colorContrast;
+        }
+    }
+};