Skip to content

feat(web): highlight selected settings options with the accent color - #2315

Open
bowenliang123 wants to merge 1 commit into
MoonshotAI:mainfrom
bowenliang123:feat/web-settings-accent-highlight
Open

feat(web): highlight selected settings options with the accent color#2315
bowenliang123 wants to merge 1 commit into
MoonshotAI:mainfrom
bowenliang123:feat/web-settings-accent-highlight

Conversation

@bowenliang123

@bowenliang123 bowenliang123 commented Jul 28, 2026

Copy link
Copy Markdown

Related Issue

No linked issue — the problem is explained below.

Problem

In the web settings dialog, selected options in the segmented pickers (theme, accent color, language, default permission) were highlighted with a neutral raised surface, so the selection state did not reflect the accent color the user picked (blue / mono).

What changed

When the Accent color is selected as "Blue",

Before:

image

After:
image

  • Added an optional tinted variant to the shared SegmentedControl component: the selected item uses --color-accent-soft background + --color-accent text, matching the settings tab style and following the active accent in both light and dark mode.
  • Applied the variant (variant="tinted") to the settings pickers: theme, accent color, and default permission in SettingsDialog, the shared LanguageSwitcher (also used by the mobile settings sheet), and the theme picker in MobileSettingsSheet.
  • Left view-toggle usages (diff view, file preview, archive sort) on the neutral highlight, as the design system documents that style for toggles.
  • Changeset: patch on @moonshot-ai/kimi-code (web: entry), since the web app ships bundled in the CLI.

Checklist

  • I have read the CONTRIBUTING document.
  • I have linked a related issue, or explained the problem above.
  • I have added tests that prove my feature works. (CSS-only visual variant; verified with vue-tsc typecheck and oxlint.)
  • Ran gen-changesets skill, or this PR needs no changeset.
  • Ran gen-docs skill, or this PR needs no doc update. (Minor visual tweak; no doc impact.)

@changeset-bot

changeset-bot Bot commented Jul 28, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c6da1b4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@moonshot-ai/kimi-code Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2ce88e55a4

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread apps/kimi-web/src/components/ui/SegmentedControl.vue Outdated
@bowenliang123
bowenliang123 force-pushed the feat/web-settings-accent-highlight branch from 2ce88e5 to c6da1b4 Compare July 28, 2026 10:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant