fix: theme sidechain UI with DSH web design tokens (dark mode) - #6
Merged
Conversation
The sidechain panel and the /side, /btw command cards referenced `--ds-color-*` CSS variables that DSH web never defines, so every var() fell back to its light literal — the panel stayed all-white in dark mode. DSH web themes through design tokens injected by the host's @deepseek-ai/dsh-client-ui-theme plugin: `--dsw-alias-*` / `--dsw-specific-*` / `--dsw-static-*` are declared on `body` and overridden under `body[data-ds-dark-theme]`, so consuming them follows the active theme (including manual theme switching) without theme JS of our own. Remap the panel palette and command cards to those tokens, keeping a light literal fallback for hosts that do not inject the token stylesheet, and align the running-row shimmer with the host's deep-diving gradient. Verified with pnpm check (typecheck, 116 tests, build) plus light/dark renders of the panel against the real token stylesheet.
# Conflicts: # src/client/SideCommandCard.tsx
Collaborator
|
感谢提交这个修复！主题 token 的调整已经合并，现在侧链面板和命令卡片可以正确跟随 DSH 的明暗主题。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes the sidechain panel and the
/side//btwcommand cards staying all-white in dark mode.Root cause
The plugin's UI used a
--ds-color-*variable family (--ds-color-bg-1,--ds-color-text-1,--ds-color-primary, …) that DSH web never defines. Everyvar()therefore resolved to its light literal fallback (#ffffff,#1d2129,#3370ff, …), so switching the app to dark mode simply had no effect on the plugin (verified by grepping the running shell's CSS/JS:--ds-colorappears 0 times).DSH web themes through design tokens injected by the host's
@deepseek-ai/dsh-client-ui-themeplugin:--dsw-alias-*,--dsw-specific-*,--dsw-static-*are declared onbodybody[data-ds-dark-theme]Consuming these tokens makes the panel follow the active theme (including manual theme switching) with no theme JS of our own.
Changes
src/client/SidechainPanel.tsx— remap the shared palette to DSW tokenssrc/client/SideCommandCard.tsx— same for the/side//btwcards and inline bubblessrc/client/panel-style.ts— running-row shimmer now uses--dsw-static-deepseek-500/--dsw-static-deepseek-200, the same colors as the host's deep-diving hint gradientSelected mappings (light → dark):
--dsw-alias-bg-layer-1#fff#232324--dsw-alias-label-primary#0f1115#f9fafb--dsw-alias-bg-module-platform#f5f6f7#353638--dsw-specific-bubble(same as main-chat user bubble)#edf3fe#2c2c2e--dsw-alias-markdown-code-block#f9fafb#1b1b1c--dsw-specific-input-major(same as main composer)#fff#2c2c2e--dsw-alias-button-info-fill(host's in-chat primary action)#4176e6#679efe--dsw-alias-state-business-primary#4176e6#679efeEvery token keeps a light-mode literal fallback, so hosts that do not inject the token stylesheet still render the previous light appearance.
Verification
pnpm check— typecheck, 116 tests, build — all greenbodyandbody[data-ds-dark-theme]blocks