Introduction¶

The philosophy of DSH is “everything is a plugin,” and appearance is no exception. However, if you switch between deepseek-v4-flash and deepseek-v4-pro daily, or adjust reasoning levels, the interface lacks visual feedback corresponding to the levels, making different sessions look identical.

dsh-theme-rheostat, written by nineandnine-9, solves this problem: it maps the current session’s model + reasoning level to the appearance of four levels, ensuring the accent color, glow, and indicator bar above the input box follow the level. Unlike common static skins, its appearance is not a hardcoded color scheme but is driven by session state; in terms of implementation, it is isomorphic to the maid-atelier skin referenced in the README and does not register a full theme. Below is an introduction in the order of four-level appearance, implementation principles, and installation/customization.

What is this¶

dsh-theme-rheostat is categorized as “Fun Skins” in the community directory. Its one-sentence definition is: it cuts the interface into four levels based on the current session’s model + reasoning level and displays a level indicator bar above the input box.

The metaphor is “rheostat warming up”: flush uses a cool color scheme (blue → indigo), pro uses a warm color scheme (amber → bright red), and from “strong” to “super strong,” it warms up and widens the glow within their respective color schemes.

Four-Level Appearance¶

The mapping for the four levels is as follows, with each level providing two sets of accent colors: light and dark:

Level	Model	Reasoning Level	Accent Color (Light / Dark)	Glow
flush-strong	deepseek-v4-flash	high (Strong)	`#2563EB` / `#60A5FA`	Weak
flush-max	deepseek-v4-flash	max (Super Strong)	`#4F46E5` / `#818CF8`	Medium
pro-strong	deepseek-v4-pro	high (Strong)	`#D97706` / `#FBBF24`	Medium
pro-max	deepseek-v4-pro	max (Super Strong)	`#DC2626` / `#F87171`	Strong

Currently, it only maps the high (Strong) and max (Super Strong) reasoning levels; unknown or missing reasoningEffort falls back to high.

Implementation Principles¶

The plugin essentially does three things: injects a CSS file, adds a glow to the input box card, and mounts a level indicator bar on the official slots. These are explained separately below.

Color Change: Overriding Semantic Tokens¶

The plugin injects a CSS file that uses body[data-dsh-rheostat][data-rheostat-level="…"] selectors to override semantic tokens like --dsw-alias-brand-primary and --dsw-alias-border-l2, distinguishing dark mode with [data-ds-dark-theme]. It does not register a full theme, so it will not add an extra item to the theme list in appearance settings.

Glow: Input Box Card¶

The same CSS file writes box-shadow halo and outer glow for [data-composer-card] (the stable DOM hook for the conversation input box card) based on the level, with different glow intensities for the four levels.

Level Indicator: Official Slots¶

The indicator bar occupies the official slot conversation.input.dock (the entire row above the input box card). The component uses React useSyncExternalStore to subscribe to the current session’s ctx.modelDirectories.directoryFor(sessionId).store, reads { model, reasoningEffort }, parses it into a level, and writes data-rheostat-* attributes to <body>—the CSS selectors above rely on these attributes.

Whale Slider¶

Above the level bar is a continuous rail with four segmented color blocks. The slider is a cartoon whale, supporting drag, click, and arrow key switching of models and reasoning levels. The four level PNGs are embedded as base64 in src/client/assets.generated.ts, generated by scripts/embed-assets.mjs.

Installation and Activation¶

The README provides installation via local link + profile bundles configuration, with no registry install command, so you must first build the artifacts locally:

cd dsh-theme-rheostat
pnpm install      # Only requires tsdown
pnpm run assets   # Regenerate base64 assets after changing PNGs in assets/
pnpm build        # Produces lib/index.js + lib/client.js

The build output consists of the lib/index.js (host side) and lib/client.js (client side). Then, mount the package into your web profile:

Add a line to the dependencies in the profile’s package.json (e.g., C:\Users\rzh15\.dsh\profiles\web\package.json), changing the link path according to your local repository’s actual location:

"@dsh-external/dsh-theme-rheostat": "link:E:/dsh-workplace2/dsh-theme-rheostat"

Append to the dsh.profile.bundles array in the same file:

"@dsh-external/dsh-theme-rheostat"

Install and restart web:

dsh plugin --profile web install
dsh web

dsh plugin --profile web install is equivalent to forwarding arguments to the pnpm in the profile directory. You can also add the package in one command (then manually add the bundles line):

dsh plugin --profile web add "link:E:/dsh-workplace2/dsh-theme-rheostat"

Customizing Levels¶

After the steps above, the plugin is mounted to the profile. To adjust behavior, mainly modify three files:

Colors and Glow: Edit the LEVELS object in src/client/levels.ts. Each level has four parameter groups: accent / ring / glow / spread.
Model Matching: modelMatch is a case-insensitive substring match on ModelSelection.model. Currently it is v4-flush / v4-pro; if the model IDs in your catalog are different, change this here.
Copy: The text on the indicator bar is in the zh / en dictionaries in src/client/index.ts.

After modifying source code or PNGs, run pnpm run assets and pnpm build again, then restart web to apply changes.

Use Cases and Notes¶

Suitable for: People who switch between flash/pro and strong/super strong and want levels visible at a glance, or users who simply want to change the UI outfit. Aside from the whale slider which can switch models and reasoning levels, the rest of the plugin’s changes are on the visual layer.

Points to know before using:

Size: The four level PNGs are 1024×1024 originals. After base64 embedding, lib/client.js is approximately 6.3MB, loaded at once. If volume is a concern, first compress the PNGs to ~128px, then run pnpm run assets.
Skin Coexistence: The plugin only overrides a few semantic tokens and input box glow, acting as an “emphasis layer” overlaid on existing skins. If a skin that overrides the same batch of tokens is enabled simultaneously, CSS selector specificity decides which takes effect—this plugin’s body[data-dsh-rheostat][data-rheostat-level] specificity is higher.
Level Mapping: It only maps high (Strong) and max (Super Strong); unknown or missing reasoningEffort falls back to high.
Platform and Dependencies: package.json declares the client platform as web, injecting four dependencies: @deepseek-ai/dsh-client-ui-slots, @deepseek-ai/dsh-client-locale, @deepseek-ai/dsh-client-ui-conversation, and @deepseek-ai/dsh-client-ui-model-selection.
Permissions and License: The plugin runs with the current dsh process permissions. It is recommended to read the source code before installing. package.json marks private: true and has no declared license field, and the README provides no license information. You need to confirm for yourself whether it can be used in your scenario.

Conclusion¶

The value of dsh-theme-rheostat lies in making “which model and which level of reasoning the current session is running on” visible: four levels, two color schemes, an indicator bar above the input box, plus a draggable whale. If you want to try it, enter via the links below:

Community Directory: https://www.skillhub.cn/plugins/nineandnine-9/dsh-theme-rheostat
GitHub Repository: https://github.com/nineandnine-9/dsh-theme-rheostat

dsh-theme-rheostat: DSH "Rheostat" theme that shifts with model and inference levels