@aiot-nexus/plugin-sdk 3.1.1 → 3.3.0

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

@@ -1,6 +1,6 @@
 # __DISPLAY_NAME_MARKDOWN__
 
-AIoT Nexus independent PluginFrame plugin generated from the `sqlite` template.
+AIoT Toolkits independent PluginFrame plugin generated from the `sqlite` template.
 
 ```bash
 npm install
@@ -8,7 +8,7 @@ npm run typecheck
 npm run build
 npm run dev:web
 npm run dev
-npm run dev:nexus -- --host C:\path\to\nexus.exe
+npm run dev:nexus -- --host "C:\path\to\AIoT Toolkits.exe"
 ```
 
 SDK checks for a newer `@aiot-nexus/plugin-sdk` in two steps. The package `postinstall` refreshes a user cache; npm 7+ hides dependency lifecycle output by default, so use `npm install --foreground-scripts` to see it. The `nexus-plugin` CLI reads that cache and prints npm-style notices when it is fresh; missing or older-than-24-hours cache data is checked in the background without blocking the command. `npm install --ignore-scripts` skips only the install check, while CLI checks remain available.
@@ -17,7 +17,7 @@ The check follows the npm-configured registry, falls back to the official npm re
 
 Every `npm run build` rebuilds `better-sqlite3@8.7.0` for Electron 22.3.27 with `@electron/rebuild@3.7.2` before packaging. `npm run rebuild:native` remains available as a standalone diagnostic command.
 
-The deployable plugin package is `dist/__PLUGIN_ID__/`. For a manual installation, stop Nexus before replacing `Plugins/__PLUGIN_ID__/`, then start it again. During development, use `npm run dev:nexus` so the CLI coordinates Nexus shutdown, atomic replacement, and restart for trusted `mainEntry` changes. Runtime data is stored in the host-provided plugin data directory and is not written into the plugin package.
+The deployable plugin package is `dist/__PLUGIN_ID__/`. For a manual installation, stop AIoT Toolkits before replacing `Plugins/__PLUGIN_ID__/`, then start it again. During development, use `npm run dev:nexus` so the CLI coordinates AIoT Toolkits shutdown, atomic replacement, and restart for trusted `mainEntry` changes. Runtime data is stored in the host-provided plugin data directory and is not written into the plugin package.
 
 The template is a schema-aware SQLite database browser. It opens `plugin.db` in the plugin data directory by default and initializes the `plugin_records` sample table there. **Open Database** calls Electron's directly imported `dialog.showOpenDialog()` from trusted `mainEntry`; it accepts a single existing SQLite file, including files without an extension. The renderer only displays the selected path and invokes parameterized operations. It never receives an Electron object and does not expose a path input, arbitrary SQL, DDL, `ATTACH`, or a SQL console.
 
@@ -43,19 +43,23 @@ if (!result.canceled && result.filePaths[0]) {
 }
 ```
 
-For related workflows, use `properties: ["openDirectory", "createDirectory"]` to choose a folder or `dialog.showSaveDialog()` to choose a save path. These calls belong in trusted `mainEntry`; the renderer should invoke a registered business operation such as `sqlite.chooseDatabase` through `client.invokeMain()` and receive only the result it needs. Native dialogs are unavailable in `npm run dev:web`; use `npm run dev` or a formal Nexus host.
+For related workflows, use `properties: ["openDirectory", "createDirectory"]` to choose a folder or `dialog.showSaveDialog()` to choose a save path. These calls belong in trusted `mainEntry`; the renderer should invoke a registered business operation such as `sqlite.chooseDatabase` through `client.invokeMain()` and receive only the result it needs. Native dialogs are unavailable in `npm run dev:web`; use `npm run dev` or a formal AIoT Toolkits host.
 
 External files are opened read/write only after a separate candidate connection can query `sqlite_schema`. Canceling the dialog or selecting a corrupt, locked, or inaccessible file keeps the current connection. The latest external path is atomically stored as `sqlite-browser-state.json` in the plugin data directory. Startup restores it when valid; otherwise the template clears the saved selection, falls back to `plugin.db`, and returns a visible notice. External databases do not receive the sample schema or journal pragma.
 
 The table selector lists ordinary user tables from the `main` schema. Dynamic headers show declared type, SQLite affinity, primary-key order, NULL, default, and generated-column metadata. The editor supports default/NULL/value modes for inserts and unchanged/NULL/value modes for updates. INTEGER input uses exact decimal integers, REAL must be finite, NUMERIC accepts integer, real, or text values, and BLOB input uses even-length hexadecimal text. The 1 MiB field and 4 MiB row limits count decoded BLOB bytes rather than hexadecimal characters. Ordinary rowid tables prefer an unshadowed built-in rowid; `WITHOUT ROWID` tables, or tables that shadow every rowid alias, fall back only to primary-key columns that are all non-NULL. A table without a unique locator remains browsable and insertable, but update and delete are unavailable. Primary-key locators larger than 16 KiB are also treated as browse-only so a page cannot copy unbounded keys into the trusted main process and iframe. Update and delete run in a transaction and must affect exactly one row. TEXT previews are capped at 16 KiB of UTF-8 data; BLOB previews show the byte length and first 32 bytes.
 
-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.
+The renderer follows `context.language` and `context.themeMode` from AIoT Toolkits 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.
 
-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.
+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`.
 
-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.
+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.
 
-Use `npm run dev:nexus -- --host C:\path\to\nexus.exe` to run the plugin inside a compiled, packaged Nexus. The initial deployment and every full package replacement are atomic. Renderer-only and safe manifest updates keep the Nexus PID; `mainEntry`, dependency, native-module, or restart-sensitive manifest changes run the complete build (including the Electron 22.3.27 native rebuild), stop Nexus, replace the package, and start a new Nexus process. The database remains under the host-provided plugin data directory across host restarts. Failed builds keep the previous deployment, and launch or readiness failures roll the package back and restore the previous host. Add `--no-devtools`, `--inspect[=<port>]`, `--inspect-brk[=<port>]`, `--surface`, or `--contribution-id` after the second `--` as needed.
+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 AIoT Toolkits 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 AIoT Toolkits host. Pass `-- --no-open` or `-- --port <port>` when needed.
+
+Use `npm run dev:nexus -- --host "C:\path\to\AIoT Toolkits.exe"` to run the plugin inside a compiled, packaged AIoT Toolkits. The initial deployment and every full package replacement are atomic. Renderer-only and safe manifest updates keep the AIoT Toolkits PID; `mainEntry`, dependency, native-module, or restart-sensitive manifest changes run the complete build (including the Electron 22.3.27 native rebuild), stop AIoT Toolkits, replace the package, and start a new AIoT Toolkits process. The database remains under the host-provided plugin data directory across host restarts. Failed builds keep the previous deployment, and launch or readiness failures roll the package back and restore the previous host. Add `--no-devtools`, `--inspect[=<port>]`, `--inspect-brk[=<port>]`, `--surface`, or `--contribution-id` after the second `--` as needed.
 
 When this project was created from a local SDK archive, `vendor/aiot-nexus-plugin-sdk.tgz` is part of the source project and must be kept when the project is moved or committed. An explicit local upgrade copies the target archive to `vendor/aiot-nexus-plugin-sdk-<version>.tgz` and updates the exact file dependency.
 
@@ -63,4 +67,4 @@ For a local SDK archive, the tgz version remains the plugin's current SDK versio
 
 For trusted-main breakpoints, open this plugin directory in VS Code, set breakpoints in `src/main.ts`, and run `Debug Nexus plugin`. To attach manually, start `npm run dev:debug` and select `Attach Nexus plugin main process (9229)`. Renderer DevTools opens automatically, with `src/renderer/app.ts` available through the development source map. The default debug build also runs the Electron 22.3.27 native rebuild before launch. Use `npm run dev -- --no-build` only when intentionally reusing a compatible current `dist` output.
 
-The independent host stores the SQLite database and settings under `.nexus-plugin-dev/data/` and mirrors the PluginFrame protocol and current Host API surface. Its simulated Nexus application version defaults to the version recorded by the SDK build; pass `npm run dev -- --host-version <X.Y.Z>` to exercise another compatibility branch. Run the deployable `dist/__PLUGIN_ID__/` in Nexus before delivery because the standalone host does not reproduce the full application shell or routing state.
+The independent host stores the SQLite database and settings under `.nexus-plugin-dev/data/` and mirrors the PluginFrame protocol and current Host API surface. Its simulated AIoT Toolkits application version defaults to the version recorded by the SDK build; pass `npm run dev -- --host-version <X.Y.Z>` to exercise another compatibility branch. Run the deployable `dist/__PLUGIN_ID__/` in AIoT Toolkits before delivery because the standalone host does not reproduce the full application shell or routing state.

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();
 }
 

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

@@ -1,8 +1,29 @@
 :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);
+  --inset: var(--nexus-color-surface-inset, #e4e9ed);
+  --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);
+  --fg-faint: var(--nexus-color-text-faint, #8b97a1);
+  --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));
+  --negative: var(--nexus-color-negative, #c2402f);
   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;
 }
 
 * {
@@ -19,7 +40,8 @@ body {
   height: 100vh;
   min-height: 100vh;
   overflow: hidden;
-  background: #f3f5f7;
+  background: var(--bg);
+  color: var(--fg);
 }
 
 button,
@@ -46,9 +68,9 @@ textarea {
 .editor-panel,
 .data-panel {
   min-width: 0;
-  border: 1px solid #d4d9df;
-  border-radius: 8px;
-  background: #ffffff;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
 }
 
 .plugin-header {
@@ -86,18 +108,19 @@ p {
 }
 
 h1 {
-  font-size: 20px;
+  font-size: 18px;
+  font-weight: 600;
 }
 
 h2 {
-  font-size: 15px;
+  font-size: 14.5px;
 }
 
 .database-heading p {
   overflow: hidden;
   max-width: min(62vw, 760px);
   margin-top: 3px;
-  color: #65717e;
+  color: var(--fg-dim);
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -115,13 +138,15 @@ h2 {
 
 button {
   min-height: 32px;
-  border: 1px solid #1768a6;
-  border-radius: 6px;
+  border: 1px solid var(--brand);
+  border-radius: 7px;
   padding: 0 11px;
-  background: #1768a6;
-  color: #ffffff;
+  background: var(--brand);
+  color: var(--on-brand);
   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:disabled,
@@ -133,14 +158,50 @@ textarea:disabled {
 }
 
 button.button-secondary {
-  border-color: #aeb7c2;
-  background: #ffffff;
-  color: #20252b;
+  border-color: var(--line-strong);
+  background: var(--panel);
+  color: var(--fg);
 }
 
 button.button-danger {
-  border-color: #b42318;
-  background: #b42318;
+  border-color: var(--negative);
+  background: var(--negative);
+  color: var(--on-negative);
+}
+
+button:not(:disabled):hover {
+  border-color: var(--primary-action);
+  background: var(--primary-action);
+  color: var(--on-primary);
+}
+
+button.button-secondary:not(:disabled):hover,
+button.record-action:not(:disabled):hover {
+  filter: none;
+  border-color: var(--brand);
+  background: var(--hover);
+  color: var(--fg);
+}
+
+button.button-danger:not(:disabled):hover {
+  border-color: var(--negative);
+  background: var(--negative);
+  color: var(--on-negative);
+  filter: brightness(1.06);
+}
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--brand);
 }
 
 .compact-button {
@@ -168,7 +229,7 @@ button.button-danger {
 #statusLog,
 .editor-panel .panel-heading p,
 .field-current {
-  color: #65717e;
+  color: var(--fg-dim);
   font-size: 12px;
 }
 
@@ -184,11 +245,11 @@ select,
 textarea {
   width: 100%;
   min-width: 0;
-  border: 1px solid #aeb7c2;
-  border-radius: 6px;
+  border: 1px solid var(--line-strong);
+  border-radius: 7px;
   padding: 7px 9px;
-  background: #ffffff;
-  color: #20252b;
+  background: var(--panel);
+  color: var(--fg);
 }
 
 textarea {
@@ -236,7 +297,7 @@ textarea {
   gap: 6px 8px;
   align-items: end;
   min-width: 0;
-  border-top: 1px solid #e7eaee;
+  border-top: 1px solid var(--line);
   padding-top: 8px;
 }
 
@@ -255,11 +316,11 @@ textarea {
 }
 
 .column-badge {
-  border: 1px solid #ccd3da;
+  border: 1px solid var(--line);
   border-radius: 4px;
   padding: 1px 4px;
-  background: #f7f8fa;
-  color: #56616d;
+  background: var(--raise);
+  color: var(--fg-dim);
   font-size: 10px;
   font-weight: 600;
 }
@@ -282,7 +343,7 @@ textarea {
 
 .error {
   margin-top: 8px;
-  color: #b42318;
+  color: var(--negative);
   font-size: 12px;
 }
 
@@ -306,9 +367,9 @@ textarea {
 
 .empty-state {
   padding: 18px;
-  border: 1px dashed #aeb7c2;
-  border-radius: 6px;
-  color: #65717e;
+  border: 1px dashed var(--line-strong);
+  border-radius: 7px;
+  color: var(--fg-dim);
   text-align: center;
 }
 
@@ -318,8 +379,8 @@ textarea {
   min-height: 80px;
   max-width: 100%;
   overflow: auto;
-  border: 1px solid #d4d9df;
-  border-radius: 6px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
 }
 
 table {
@@ -331,7 +392,7 @@ table {
 th,
 td {
   max-width: 360px;
-  border-bottom: 1px solid #e7eaee;
+  border-bottom: 1px solid var(--line);
   padding: 7px 9px;
   text-align: left;
   vertical-align: top;
@@ -342,8 +403,8 @@ th {
   z-index: 1;
   top: 0;
   min-width: 120px;
-  background: #f7f8fa;
-  color: #56616d;
+  background: var(--raise);
+  color: var(--fg-dim);
   font-size: 12px;
 }
 
@@ -365,7 +426,7 @@ td {
 .cell-null,
 .cell-blob,
 .cell-truncated {
-  color: #65717e;
+  color: var(--fg-dim);
   font-family: Consolas, monospace;
   font-size: 12px;
 }
@@ -379,7 +440,7 @@ td {
 td.row-actions-cell {
   position: sticky;
   right: 0;
-  background: #ffffff;
+  background: var(--panel);
 }
 
 .pager {
@@ -388,7 +449,7 @@ td.row-actions-cell {
   justify-content: flex-end;
   gap: 12px;
   padding-top: 9px;
-  color: #65717e;
+  color: var(--fg-dim);
   font-size: 12px;
 }
 
@@ -449,14 +510,31 @@ td.row-actions-cell {
 }
 
 :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);
+  --inset: var(--nexus-color-surface-inset, #0c0f13);
+  --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);
+  --fg-faint: var(--nexus-color-text-faint, #64707c);
+  --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));
+  --negative: var(--nexus-color-negative, #e2604f);
   color-scheme: dark;
-  background: #16191d;
-  color: #edf0f2;
+  background: var(--bg);
+  color: var(--fg);
 }
 
 :root[data-theme="dark"] body {
-  background: #16191d;
-  color: #edf0f2;
+  background: var(--bg);
+  color: var(--fg);
 }
 
 :root[data-theme="dark"] .plugin-header,
@@ -464,8 +542,8 @@ td.row-actions-cell {
 :root[data-theme="dark"] .editor-panel,
 :root[data-theme="dark"] .data-panel,
 :root[data-theme="dark"] td.row-actions-cell {
-  border-color: #454b52;
-  background: #24282d;
+  border-color: var(--line);
+  background: var(--panel);
 }
 
 :root[data-theme="dark"] .database-heading p,
@@ -479,36 +557,36 @@ td.row-actions-cell {
 :root[data-theme="dark"] .cell-null,
 :root[data-theme="dark"] .cell-blob,
 :root[data-theme="dark"] .cell-truncated {
-  color: #aeb7c2;
+  color: var(--fg-dim);
 }
 
 :root[data-theme="dark"] input,
 :root[data-theme="dark"] select,
 :root[data-theme="dark"] textarea,
 :root[data-theme="dark"] button.button-secondary {
-  border-color: #59616a;
-  background: #191c20;
-  color: #edf0f2;
+  border-color: var(--line-strong);
+  background: var(--inset);
+  color: var(--fg);
 }
 
 :root[data-theme="dark"] .column-badge {
-  border-color: #59616a;
-  background: #30353b;
-  color: #d2d8de;
+  border-color: var(--line-strong);
+  background: var(--raise);
+  color: var(--fg-dim);
 }
 
 :root[data-theme="dark"] .table-wrap,
 :root[data-theme="dark"] .empty-state,
 :root[data-theme="dark"] .editor-field {
-  border-color: #454b52;
+  border-color: var(--line);
 }
 
 :root[data-theme="dark"] th {
-  background: #2d3238;
-  color: #d2d8de;
+  background: var(--raise);
+  color: var(--fg-dim);
 }
 
 :root[data-theme="dark"] th,
 :root[data-theme="dark"] td {
-  border-bottom-color: #454b52;
+  border-bottom-color: var(--line);
 }