@aiot-nexus/plugin-sdk 3.1.1 → 3.2.0

package/dist/src/browser/frame-client.js

@@ -8,6 +8,40 @@ const requestMessageType = "nexus-plugin:request";
 const responseMessageType = "nexus-plugin:response";
 const resizeMessageType = "nexus-plugin:resize";
 const defaultInitializationTimeoutMs = 20000;
+const systemThemeMediaQuery = "(prefers-color-scheme: dark)";
+const themeTokenCssVariables = [
+    ["background", "--nexus-color-background"],
+    ["surface", "--nexus-color-surface"],
+    ["surfaceAlt", "--nexus-color-surface-alt"],
+    ["surfaceRaised", "--nexus-color-surface-raised"],
+    ["surfaceHover", "--nexus-color-surface-hover"],
+    ["surfaceInset", "--nexus-color-surface-inset"],
+    ["border", "--nexus-color-border"],
+    ["borderSoft", "--nexus-color-border-soft"],
+    ["borderStrong", "--nexus-color-border-strong"],
+    ["text", "--nexus-color-text"],
+    ["textMuted", "--nexus-color-text-muted"],
+    ["textSoft", "--nexus-color-text-soft"],
+    ["textFaint", "--nexus-color-text-faint"],
+    ["primary", "--nexus-color-primary"],
+    ["accent", "--nexus-color-accent"],
+    ["onPrimary", "--nexus-color-on-primary"],
+    ["primarySoft", "--nexus-color-primary-soft"],
+    ["info", "--nexus-color-info"],
+    ["infoSoft", "--nexus-color-info-soft"],
+    ["positive", "--nexus-color-positive"],
+    ["positiveSoft", "--nexus-color-positive-soft"],
+    ["warning", "--nexus-color-warning"],
+    ["warningSoft", "--nexus-color-warning-soft"],
+    ["negative", "--nexus-color-negative"],
+    ["negativeSoft", "--nexus-color-negative-soft"],
+    ["mutedSoft", "--nexus-color-muted-soft"],
+    ["onInfo", "--nexus-color-on-info"],
+    ["onPositive", "--nexus-color-on-positive"],
+    ["onWarning", "--nexus-color-on-warning"],
+    ["onNegative", "--nexus-color-on-negative"]
+];
+const hostThemeOwners = new WeakMap();
 class PluginFrameClientError extends Error {
     constructor(code, message) {
         super(message);
@@ -25,6 +59,7 @@ function createPluginFrameClient(options = {}) {
     const targetWindow = options.targetWindow || frameWindow.parent;
     const initializationTimeoutMs = options.initializationTimeoutMs === undefined ? defaultInitializationTimeoutMs : options.initializationTimeoutMs;
     const requestTimeoutMs = options.requestTimeoutMs === undefined ? 0 : options.requestTimeoutMs;
+    const autoApplyHostTheme = options.autoApplyHostTheme !== false;
     if (!Number.isFinite(initializationTimeoutMs) || initializationTimeoutMs <= 0) {
         throw new PluginFrameClientError("ProtocolError", "initializationTimeoutMs must be a positive finite number.");
     }
@@ -39,6 +74,16 @@ function createPluginFrameClient(options = {}) {
     let contextTimeoutId;
     let resizeTimer;
     let resizeObserver;
+    const hostThemeOwner = Symbol("nexus-plugin-host-theme");
+    let hostThemeRoot;
+    let hostThemeMarker;
+    let hostThemePreviousMarker;
+    let hostThemeHadPreviousMarker = false;
+    const hostThemeAppliedValues = new Map();
+    const hostThemePreviousValues = new Map();
+    const systemThemeMedia = autoApplyHostTheme && typeof frameWindow.matchMedia === "function"
+        ? frameWindow.matchMedia(systemThemeMediaQuery)
+        : undefined;
     const pendingRequests = new Map();
     const contextListeners = new Set();
     let resolveContext;
@@ -56,6 +101,14 @@ function createPluginFrameClient(options = {}) {
         }
     }, initializationTimeoutMs);
     frameWindow.addEventListener("message", handleMessage);
+    if (systemThemeMedia) {
+        if (typeof systemThemeMedia.addEventListener === "function") {
+            systemThemeMedia.addEventListener("change", handleSystemThemeChange);
+        }
+        else {
+            systemThemeMedia.addListener(handleSystemThemeChange);
+        }
+    }
     if (options.autoResize !== false) {
         frameWindow.addEventListener("resize", scheduleResize);
         const ResizeObserverConstructor = frameWindow.ResizeObserver;
@@ -128,6 +181,7 @@ function createPluginFrameClient(options = {}) {
             const hadContext = contextValue !== undefined;
             hostOrigin = event.origin;
             contextValue = event.data.context;
+            applyCurrentHostTheme();
             if (!contextSettled) {
                 contextSettled = true;
                 if (contextTimeoutId !== undefined) {
@@ -170,6 +224,99 @@ function createPluginFrameClient(options = {}) {
             }
         }
     }
+    function handleSystemThemeChange() {
+        if (contextValue?.themeMode === "system") {
+            applyCurrentHostTheme();
+        }
+    }
+    function applyCurrentHostTheme() {
+        if (!autoApplyHostTheme || !contextValue) {
+            return;
+        }
+        const root = frameWindow.document.documentElement;
+        if (!root?.dataset || !root.style) {
+            return;
+        }
+        initializeHostThemeOwnership(root);
+        const resolvedMode = contextValue.themeMode === "system"
+            ? (systemThemeMedia?.matches ? "dark" : "light")
+            : contextValue.themeMode;
+        root.dataset.nexusTheme = resolvedMode;
+        hostThemeMarker = resolvedMode;
+        const tokens = contextValue.theme?.[resolvedMode];
+        for (const [tokenName, cssVariable] of themeTokenCssVariables) {
+            if (tokens) {
+                const value = tokens[tokenName];
+                root.style.setProperty(cssVariable, value);
+                hostThemeAppliedValues.set(cssVariable, value);
+            }
+            else {
+                restoreHostThemeVariable(root, cssVariable);
+            }
+        }
+    }
+    function initializeHostThemeOwnership(root) {
+        if (hostThemeRoot === root) {
+            hostThemeOwners.set(root, hostThemeOwner);
+            return;
+        }
+        if (hostThemeRoot) {
+            cleanupHostTheme();
+        }
+        hostThemeRoot = root;
+        hostThemeOwners.set(root, hostThemeOwner);
+        hostThemePreviousMarker = root.dataset.nexusTheme;
+        hostThemeHadPreviousMarker = Object.prototype.hasOwnProperty.call(root.dataset, "nexusTheme");
+        hostThemePreviousValues.clear();
+        for (const [, cssVariable] of themeTokenCssVariables) {
+            hostThemePreviousValues.set(cssVariable, root.style.getPropertyValue(cssVariable));
+        }
+    }
+    function restoreHostThemeVariable(root, cssVariable) {
+        const appliedValue = hostThemeAppliedValues.get(cssVariable);
+        if (appliedValue === undefined || root.style.getPropertyValue(cssVariable) !== appliedValue) {
+            hostThemeAppliedValues.delete(cssVariable);
+            return;
+        }
+        const previousValue = hostThemePreviousValues.get(cssVariable) || "";
+        if (previousValue) {
+            root.style.setProperty(cssVariable, previousValue);
+        }
+        else {
+            root.style.removeProperty(cssVariable);
+        }
+        hostThemeAppliedValues.delete(cssVariable);
+    }
+    function cleanupHostTheme() {
+        const root = hostThemeRoot;
+        if (!root) {
+            return;
+        }
+        if (hostThemeOwners.get(root) !== hostThemeOwner) {
+            hostThemeRoot = undefined;
+            hostThemeAppliedValues.clear();
+            hostThemePreviousValues.clear();
+            return;
+        }
+        for (const [, cssVariable] of themeTokenCssVariables) {
+            restoreHostThemeVariable(root, cssVariable);
+        }
+        if (hostThemeMarker !== undefined && root.dataset.nexusTheme === hostThemeMarker) {
+            if (hostThemeHadPreviousMarker) {
+                root.dataset.nexusTheme = hostThemePreviousMarker || "";
+            }
+            else {
+                delete root.dataset.nexusTheme;
+            }
+        }
+        hostThemeOwners.delete(root);
+        hostThemeRoot = undefined;
+        hostThemeMarker = undefined;
+        hostThemePreviousMarker = undefined;
+        hostThemeHadPreviousMarker = false;
+        hostThemeAppliedValues.clear();
+        hostThemePreviousValues.clear();
+    }
     function scheduleResize() {
         if (disposed || !contextValue || options.autoResize === false) {
             return;
@@ -204,6 +351,19 @@ function createPluginFrameClient(options = {}) {
         disposed = true;
         frameWindow.removeEventListener("message", handleMessage);
         frameWindow.removeEventListener("resize", scheduleResize);
+        if (systemThemeMedia) {
+            if (typeof systemThemeMedia.removeEventListener === "function") {
+                systemThemeMedia.removeEventListener("change", handleSystemThemeChange);
+            }
+            else {
+                systemThemeMedia.removeListener(handleSystemThemeChange);
+            }
+        }
+        cleanupHostTheme();
+        if (contextTimeoutId !== undefined) {
+            frameWindow.clearTimeout(contextTimeoutId);
+            contextTimeoutId = undefined;
+        }
         resizeObserver?.disconnect();
         if (resizeTimer !== undefined) {
             frameWindow.clearTimeout(resizeTimer);
@@ -241,8 +401,45 @@ function isPluginRendererContext(value) {
         && typeof value.contributionId === "string"
         && typeof value.language === "string"
         && (value.themeMode === "light" || value.themeMode === "dark" || value.themeMode === "system")
+        && (value.theme === undefined || isPluginRendererTheme(value.theme))
         && typeof value.hostApiVersion === "string";
 }
+function isPluginRendererTheme(value) {
+    if (!hasExactKeys(value, ["light", "dark"])) {
+        return false;
+    }
+    return isPluginThemeTokens(value.light) && isPluginThemeTokens(value.dark);
+}
+function isPluginThemeTokens(value) {
+    const tokenNames = themeTokenCssVariables.map(([tokenName]) => tokenName);
+    return hasExactKeys(value, tokenNames)
+        && tokenNames.every((tokenName) => isSafeCssColorValue(value[tokenName]));
+}
+function hasExactKeys(value, expectedKeys) {
+    if (!isRecord(value)) {
+        return false;
+    }
+    const keys = Object.keys(value);
+    return keys.length === expectedKeys.length && keys.every((key) => expectedKeys.includes(key));
+}
+function isSafeCssColorValue(value) {
+    if (typeof value !== "string" || value.length === 0 || value.length > 64 || /[;{}]/.test(value)) {
+        return false;
+    }
+    if (/^#[0-9a-f]{6}(?:[0-9a-f]{2})?$/i.test(value)) {
+        return true;
+    }
+    const match = /^(rgb|rgba)\(([^)]+)\)$/.exec(value);
+    if (!match) {
+        return false;
+    }
+    const parts = match[2].split(",").map((part) => part.trim());
+    const expectedLength = match[1] === "rgba" ? 4 : 3;
+    if (parts.length !== expectedLength || !parts.slice(0, 3).every((part) => /^\d{1,3}$/.test(part) && Number(part) <= 255)) {
+        return false;
+    }
+    return expectedLength === 3 || /^(?:0|1|0?\.\d+)$/.test(parts[3]) && Number(parts[3]) <= 1;
+}
 function isNexusResult(value) {
     if (!isRecord(value) || typeof value.ok !== "boolean") {
         return false;

package/dist/src/index.d.ts

@@ -1,6 +1,7 @@
 import pluginManifestSchema from "../.generated/plugin-manifest.schema.json";
 export { pluginManifestSchema };
 export * from "../.generated/plugin-framework-version";
+export { NEXUS_PLUGIN_RENDERER_THEME } from "../.generated/theme-contract";
 export * from "./sdk-info";
 export * from "./types";
 export * from "./electron-namespaces";

package/dist/src/index.js

@@ -17,10 +17,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pluginManifestSchema = void 0;
+exports.NEXUS_PLUGIN_RENDERER_THEME = exports.pluginManifestSchema = void 0;
 const plugin_manifest_schema_json_1 = __importDefault(require("../.generated/plugin-manifest.schema.json"));
 exports.pluginManifestSchema = plugin_manifest_schema_json_1.default;
 __exportStar(require("../.generated/plugin-framework-version"), exports);
+var theme_contract_1 = require("../.generated/theme-contract");
+Object.defineProperty(exports, "NEXUS_PLUGIN_RENDERER_THEME", { enumerable: true, get: function () { return theme_contract_1.NEXUS_PLUGIN_RENDERER_THEME; } });
 __exportStar(require("./sdk-info"), exports);
 __exportStar(require("./types"), exports);
 __exportStar(require("./electron-namespaces"), exports);

package/dist/src/sdk-info.d.ts

@@ -1,4 +1,4 @@
-export declare const PLUGIN_SDK_VERSION = "3.1.1";
+export declare const PLUGIN_SDK_VERSION = "3.2.0";
 export declare const PLUGIN_SDK_NODE_ENGINE = ">=16.20.0 <17";
 export declare const PLUGIN_SDK_NPM_ENGINE = ">=6.13.4";
 export declare const PLUGIN_SDK_ELECTRON_VERSION = "22.3.27";

package/dist/src/sdk-info.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPluginSdkInfo = exports.PLUGIN_SDK_TYPES_NODE_VERSION = exports.PLUGIN_SDK_TYPESCRIPT_VERSION = exports.PLUGIN_SDK_ELECTRON_VERSION = exports.PLUGIN_SDK_NPM_ENGINE = exports.PLUGIN_SDK_NODE_ENGINE = exports.PLUGIN_SDK_VERSION = void 0;
 const plugin_framework_version_1 = require("../.generated/plugin-framework-version");
-exports.PLUGIN_SDK_VERSION = "3.1.1";
+exports.PLUGIN_SDK_VERSION = "3.2.0";
 exports.PLUGIN_SDK_NODE_ENGINE = ">=16.20.0 <17";
 exports.PLUGIN_SDK_NPM_ENGINE = ">=6.13.4";
 exports.PLUGIN_SDK_ELECTRON_VERSION = "22.3.27";

package/dist/src/types.d.ts

@@ -12,6 +12,42 @@ export type NexusResult<T> = {
 };
 export type ThemeMode = "light" | "dark" | "system";
 export type LaunchPageParams = Record<string, string>;
+export interface PluginThemeTokens {
+    background: string;
+    surface: string;
+    surfaceAlt: string;
+    surfaceRaised: string;
+    surfaceHover: string;
+    surfaceInset: string;
+    border: string;
+    borderSoft: string;
+    borderStrong: string;
+    text: string;
+    textMuted: string;
+    textSoft: string;
+    textFaint: string;
+    primary: string;
+    accent: string;
+    onPrimary: string;
+    primarySoft: string;
+    info: string;
+    infoSoft: string;
+    positive: string;
+    positiveSoft: string;
+    warning: string;
+    warningSoft: string;
+    negative: string;
+    negativeSoft: string;
+    mutedSoft: string;
+    onInfo: string;
+    onPositive: string;
+    onWarning: string;
+    onNegative: string;
+}
+export interface PluginRendererTheme {
+    light: PluginThemeTokens;
+    dark: PluginThemeTokens;
+}
 export type PluginPermission = "businessLog" | "settings" | "filesystem" | "udp" | "serial" | "externalProcess" | "dialog";
 export type PluginPermissionSupportState = "implemented" | "routeGuard" | "reserved";
 export interface PluginPermissionSummary {
@@ -76,6 +112,7 @@ export interface PluginRendererContext {
     launchParams?: LaunchPageParams;
     language: string;
     themeMode: ThemeMode;
+    theme?: PluginRendererTheme;
     hostApiVersion: string;
 }
 export interface PluginSettingsDocument {

package/dist/src/web-dev.js

@@ -30,6 +30,7 @@ const http = __importStar(require("http"));
 const path = __importStar(require("path"));
 const dev_1 = require("./dev");
 const plugin_framework_version_1 = require("../.generated/plugin-framework-version");
+const theme_contract_1 = require("../.generated/theme-contract");
 const loopbackHost = "127.0.0.1";
 const defaultBodyLimit = 1024 * 1024;
 const browserApiPrefix = "/__nexus_plugin_dev";
@@ -165,6 +166,7 @@ function pluginContext(target) {
         contributionId: target.contributionId,
         language: target.language,
         themeMode: target.themeMode,
+        theme: theme_contract_1.NEXUS_PLUGIN_RENDERER_THEME,
         hostApiVersion: plugin_framework_version_1.PLUGIN_FRAMEWORK_VERSION
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiot-nexus/plugin-sdk",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Types, PluginFrame client, and CLI for AIoT Nexus independent plugins.",
   "license": "UNLICENSED",
   "publishConfig": {

package/templates/minimal/README.md.tmpl

@@ -103,6 +103,10 @@ The renderer calls the trusted-main `demo.echo` operation through `@aiot-nexus/p
 
 The renderer follows `context.language` and `context.themeMode` from Nexus, subscribes to in-place context updates without reloading the iframe, and includes `en-US` and `zh-CN` message catalogs. The plugin page has no language or theme selector; the controls shown by `npm run dev` belong to the debug host and simulate Nexus context changes. Below that toolbar, the iframe has no host padding, border, minimum size, or content-driven height and fills the remaining host viewport. Add or edit renderer messages in `src/renderer/app.ts`; edit host-shell titles and descriptions in `src/manifest.json` resources.
 
+SDK 3.2 automatically maps the active `context.theme` palette to `--nexus-color-*` variables and sets `data-nexus-theme="light|dark"` on the document root. This template consumes those variables with local light/dark fallbacks, so it still renders on an older host. Merely upgrading the SDK does not recolor custom CSS: use the namespaced variables or read the optional palette explicitly, for example `const primary = context.theme?.light.primary`.
+
+For a plugin-owned theme, create the client with `createPluginFrameClient({ autoApplyHostTheme: false })`. The palette remains available from `await client.waitForContext()`, but the SDK will not write CSS variables or `data-nexus-theme`. It never overwrites plugin-owned `--bg`, `--accent`, `data-theme`, or `color-scheme` values.
+
 The current SDK has no generic business-event subscription API. For a long-running operation, register a fast `job.start` operation that returns a `taskId`, then expose `job.getStatus` and optional `job.cancel` for renderer polling. See the Nexus repository's plugin IPC and event notification example for the full contract and code.
 
 Use `npm run dev:web` for renderer-only UI work in the system browser. It runs `build:web`, writes an isolated package under `.nexus-plugin-dev/web-package/`, builds with source maps, serves only on `127.0.0.1:4173`, and opens the browser automatically. It does not execute `mainEntry`, provide Node or Electron main-process APIs, or overwrite the deployable `dist` package. Language and theme controls still simulate Nexus context, while `invokeMain` is intentionally unavailable. Pass `-- --no-open` or `-- --port <port>` when needed; use `npm run dev` for Host API and Electron integration.

package/templates/minimal/src/renderer/app.ts.tmpl

@@ -1,4 +1,5 @@
 import { createPluginFrameClient } from "@aiot-nexus/plugin-sdk/browser";
+import type { PluginThemeTokens } from "@aiot-nexus/plugin-sdk";
 
 interface EchoResponse {
   value: string;
@@ -139,9 +140,11 @@ function applyLanguage(nextLanguage: SupportedLanguage): void {
   client.notifyResize();
 }
 
-function applyContext(context: { language: string; themeMode: ThemeMode }): void {
+function applyContext(context: { language: string; themeMode: ThemeMode; theme?: { light: PluginThemeTokens; dark: PluginThemeTokens } }): void {
   applyLanguage(resolveLanguage(context.language));
   applyTheme(context.themeMode);
+  const resolvedMode = context.themeMode === "dark" || (context.themeMode === "system" && systemDarkMode.matches) ? "dark" : "light";
+  contextOutput.dataset.hostPrimary = context.theme?.[resolvedMode].primary || "";
   revealPluginContent();
 }
 

package/templates/minimal/src/renderer/plugin.css

@@ -1,8 +1,28 @@
 :root {
+  --bg: var(--nexus-color-background, #eef1f4);
+  --panel: var(--nexus-color-surface, #ffffff);
+  --raise: var(--nexus-color-surface-raised, #f7f9fa);
+  --hover: var(--nexus-color-surface-hover, #eef3f6);
+  --line: var(--nexus-color-border, #d7dde3);
+  --line-strong: var(--nexus-color-border-strong, #c2cbd3);
+  --fg: var(--nexus-color-text, #212a32);
+  --fg-dim: var(--nexus-color-text-muted, #5a6772);
+  --brand: var(--nexus-color-primary, #8fc31f);
+  --brand-text: var(--nexus-color-accent, #6f9a15);
+  --on-brand: var(--nexus-color-on-primary, #ffffff);
+  --primary-action: var(--nexus-color-primary, #8fc31f);
+  --on-primary: var(--nexus-color-on-primary, #ffffff);
+  --on-negative: var(--nexus-color-on-negative, #ffffff);
+  --focus-ring: var(--nexus-color-accent, #6f9a15);
+  --brand-soft: var(--nexus-color-primary-soft, rgba(143, 195, 31, 0.12));
+  --positive: var(--nexus-color-positive, #1f9a4e);
   color-scheme: light;
-  font-family: "Segoe UI", Arial, sans-serif;
-  background: #f3f5f7;
-  color: #20252b;
+  font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei",
+    "Segoe UI", system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 14px;
+  letter-spacing: 0;
 }
 
 * {
@@ -16,7 +36,8 @@
 body {
   margin: 0;
   min-height: 0;
-  background: #f3f5f7;
+  background: var(--bg);
+  color: var(--fg);
 }
 
 .plugin-shell {
@@ -27,9 +48,9 @@ body {
 
 .plugin-header,
 .echo-panel {
-  border: 1px solid #d4d9df;
-  border-radius: 8px;
-  background: #ffffff;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
 }
 
 .plugin-header {
@@ -47,22 +68,24 @@ p {
 }
 
 h1 {
-  font-size: 22px;
+  font-size: 18px;
+  font-weight: 600;
 }
 
 h2 {
-  font-size: 15px;
+  font-size: 14.5px;
+  font-weight: 600;
 }
 
 p,
 .result-row > span {
   margin-top: 4px;
-  color: #65717e;
+  color: var(--fg-dim);
   font-size: 12px;
 }
 
 .status {
-  color: #12663f;
+  color: var(--positive);
   font-size: 12px;
   font-weight: 600;
 }
@@ -87,24 +110,42 @@ label {
 input {
   min-width: 0;
   height: 36px;
-  border: 1px solid #aeb7c2;
-  border-radius: 6px;
+  border: 1px solid var(--line-strong);
+  border-radius: 7px;
   padding: 0 10px;
-  background: #ffffff;
-  color: #20252b;
+  background: var(--panel);
+  color: var(--fg);
   font: inherit;
 }
 
 button {
   height: 36px;
-  border: 1px solid #1768a6;
-  border-radius: 6px;
+  border: 1px solid var(--brand);
+  border-radius: 7px;
   padding: 0 16px;
-  background: #1768a6;
-  color: #ffffff;
+  background: var(--brand);
+  color: var(--on-brand);
   font: inherit;
   font-weight: 600;
   cursor: pointer;
+  transition: filter 0.15s ease, background-color 0.15s ease,
+    border-color 0.15s ease, color 0.15s ease;
+}
+
+button:not(:disabled):hover {
+  border-color: var(--primary-action);
+  background: var(--primary-action);
+  color: var(--on-primary);
+}
+
+button:focus-visible,
+input:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+input:hover {
+  border-color: var(--brand);
 }
 
 button:disabled {
@@ -117,7 +158,7 @@ button:disabled {
   grid-template-columns: 80px minmax(0, 1fr);
   gap: 10px;
   margin-top: 14px;
-  border-top: 1px solid #e7eaee;
+  border-top: 1px solid var(--line);
   padding-top: 12px;
 }
 
@@ -135,37 +176,22 @@ output {
 }
 
 :root[data-theme="dark"] {
+  --bg: var(--nexus-color-background, #101418);
+  --panel: var(--nexus-color-surface, #1b222a);
+  --raise: var(--nexus-color-surface-raised, #171c22);
+  --hover: var(--nexus-color-surface-hover, #222a34);
+  --line: var(--nexus-color-border, #2a333e);
+  --line-strong: var(--nexus-color-border-strong, #38434f);
+  --fg: var(--nexus-color-text, #e2e8ee);
+  --fg-dim: var(--nexus-color-text-muted, #97a3af);
+  --brand-text: var(--nexus-color-accent, #a5d43e);
+  --primary-action: var(--nexus-color-primary, #8fc31f);
+  --on-primary: var(--nexus-color-on-primary, #ffffff);
+  --on-negative: var(--nexus-color-on-negative, #101418);
+  --focus-ring: var(--nexus-color-accent, #a5d43e);
+  --brand-soft: var(--nexus-color-primary-soft, rgba(143, 195, 31, 0.14));
+  --positive: var(--nexus-color-positive, #46b96e);
   color-scheme: dark;
-  background: #16191d;
-  color: #edf0f2;
-}
-
-:root[data-theme="dark"] body {
-  background: #16191d;
-  color: #edf0f2;
-}
-
-:root[data-theme="dark"] .plugin-header,
-:root[data-theme="dark"] .echo-panel {
-  border-color: #454b52;
-  background: #24282d;
-}
-
-:root[data-theme="dark"] p,
-:root[data-theme="dark"] .result-row > span {
-  color: #aeb7c2;
-}
-
-:root[data-theme="dark"] input {
-  border-color: #59616a;
-  background: #191c20;
-  color: #edf0f2;
-}
-
-:root[data-theme="dark"] .result-row {
-  border-top-color: #454b52;
-}
-
-:root[data-theme="dark"] .status {
-  color: #75d6a5;
+  background: var(--bg);
+  color: var(--fg);
 }

package/templates/sqlite/README.md.tmpl

@@ -51,6 +51,10 @@ The table selector lists ordinary user tables from the `main` schema. Dynamic he
 
 The renderer follows `context.language` and `context.themeMode` from Nexus and preserves unfinished editor values during in-place context updates. The plugin page has no language or theme selector; the controls shown by `npm run dev` belong to the debug host. Below that toolbar, the iframe has no host padding, border, minimum size, or content-driven height and fills the remaining host viewport. This SDK template deliberately has no Quasar dependency, so its data grid uses a native `<table>` as a dependency-minimized template exception. It still provides pagination, contained horizontal scrolling, light/dark themes, `en-US` / `zh-CN`, and busy/empty/error states. Edit renderer messages in `src/renderer/app.ts`; edit host-shell titles and descriptions in `src/manifest.json` resources.
 
+SDK 3.2 automatically maps the active `context.theme` palette to `--nexus-color-*` variables and sets `data-nexus-theme="light|dark"` on the document root. This template consumes those variables with local light/dark fallbacks, so it still renders on an older host. Merely upgrading the SDK does not recolor custom CSS: use the namespaced variables or read the optional palette explicitly, for example `const primary = context.theme?.light.primary`.
+
+For a plugin-owned theme, create the client with `createPluginFrameClient({ autoApplyHostTheme: false })`. The palette remains available from `await client.waitForContext()`, but the SDK will not write CSS variables or `data-nexus-theme`. It never overwrites plugin-owned `--bg`, `--accent`, `data-theme`, or `color-scheme` values.
+
 The current SDK has no generic business-event subscription API. For a long-running operation, register a fast `job.start` operation that returns a `taskId`, then expose `job.getStatus` and optional `job.cancel` for renderer polling. See the Nexus repository's plugin IPC and event notification example for the full contract and code.
 
 Use `npm run dev:web` for renderer-only layout, styling, localization, and responsive checks in the system browser. It runs `build:web`, writes an isolated package under `.nexus-plugin-dev/web-package/`, and does not rebuild or load `better-sqlite3`, execute `mainEntry`, provide Node or Electron main-process APIs, copy native runtime files, or overwrite the deployable `dist` package. It builds with source maps, serves only on `127.0.0.1:4173`, and opens the browser automatically. The page explicitly reports `PluginCapabilityUnsupported`; file selection, table loading, and CRUD require `npm run dev` or a formal Nexus host. Pass `-- --no-open` or `-- --port <port>` when needed.

package/templates/sqlite/src/renderer/app.ts.tmpl

@@ -1,4 +1,5 @@
 import { createPluginFrameClient } from "@aiot-nexus/plugin-sdk/browser";
+import type { PluginThemeTokens } from "@aiot-nexus/plugin-sdk";
 
 type DatabaseSource = "default" | "external";
 type SqliteAffinity = "integer" | "real" | "text" | "blob" | "numeric";
@@ -906,9 +907,11 @@ function applyLanguage(nextLanguage: SupportedLanguage): void {
   client.notifyResize();
 }
 
-function applyContext(context: { language: string; themeMode: ThemeMode }): void {
+function applyContext(context: { language: string; themeMode: ThemeMode; theme?: { light: PluginThemeTokens; dark: PluginThemeTokens } }): void {
   applyLanguage(resolveLanguage(context.language));
   applyTheme(context.themeMode);
+  const resolvedMode = context.themeMode === "dark" || (context.themeMode === "system" && systemDarkMode.matches) ? "dark" : "light";
+  document.documentElement.dataset.hostPrimary = context.theme?.[resolvedMode].primary || "";
   revealPluginContent();
 }