fix(web): correct dark monochrome composer styling (#2083)

Co-authored-by: StaR4y <star4y@origin.pw>
Co-authored-by: qer <wbxl2000@outlook.com>

.changeset/fix-dark-mono-composer.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+web: Fix dark-mode monochrome controls and align the chat composer corner radius with the design system.

apps/kimi-web/src/components/chat/Composer.vue

@@ -1277,8 +1277,7 @@ function selectModel(modelId: string): void {
   --composer-send-inset: var(--space-2);
   position: relative;
   border: 1px solid var(--line);
-  border-radius: calc((var(--composer-send-size) / 2) + var(--composer-send-inset) + var(--space-3));
-  corner-shape: superellipse(1.5);
+  border-radius: var(--radius-xl);
   background: var(--bg);
   box-shadow: var(--shadow-md);
   transition: border-color 0.15s, box-shadow 0.15s;
@@ -1328,7 +1327,7 @@ function selectModel(modelId: string): void {
 }
 .att-lightbox-name {
   max-width: 100%;
-  color: var(--color-text-on-accent);
+  color: var(--surface-light);
   font-family: var(--mono);
   font-size: calc(var(--ui-font-size) - 2px);
   overflow: hidden;
@@ -1344,7 +1343,7 @@ function selectModel(modelId: string): void {
   border: 1px solid rgba(255,255,255,0.45);
   border-radius: 50%;
   background: rgba(20,23,28,0.82);
-  color: var(--color-text-on-accent);
+  color: var(--surface-light);
   cursor: pointer;
 }
 
@@ -1453,7 +1452,7 @@ function selectModel(modelId: string): void {
   height: var(--composer-send-size);
   border-radius: 50%;
   background: var(--color-accent);
-  color: var(--color-text-on-accent); /* white on accent — readable in light and dark */
+  color: var(--color-text-on-accent);
   border: none;
   box-shadow: var(--shadow-xs);
   padding: 0;
@@ -1491,7 +1490,7 @@ function selectModel(modelId: string): void {
 }
 
 .send.is-starting :deep(.ui-spinner__track) {
-  stroke: rgba(255, 255, 255, 0.32);
+  stroke: color-mix(in srgb, var(--color-text-on-accent) 32%, transparent);
 }
 
 .send svg {
@@ -1522,7 +1521,7 @@ function selectModel(modelId: string): void {
 }
 .stop:hover {
   background: var(--color-danger);
-  color: var(--color-text-on-accent);
+  color: var(--surface-light);
   border-color: var(--color-danger);
 }
 .stop:active {

apps/kimi-web/src/components/mobile/MobileSwitcherSheet.vue

@@ -469,7 +469,7 @@ function onDeleteWorkspace(ws: WorkspaceView): void {
   flex: none;
   font-family: var(--font-mono);
   font-size: max(9px, calc(var(--ui-font-size) - 4px));
-  color: var(--color-text-on-accent);
+  color: var(--surface-light);
   background: var(--color-warning);
   border-radius: var(--radius-full);
   padding: 1px 7px;

apps/kimi-web/src/components/ui/Button.vue

@@ -105,7 +105,7 @@ withDefaults(defineProps<{
 
 .ui-button--danger {
   background: var(--color-danger);
-  color: var(--color-text-on-accent);
+  color: var(--surface-light);
   border-color: var(--color-danger);
   box-shadow: var(--shadow-xs);
 }
@@ -116,7 +116,7 @@ withDefaults(defineProps<{
   color: var(--color-danger);
   border-color: var(--color-danger-bd);
 }
-.ui-button--danger-soft:not(:disabled):hover { background: var(--color-danger); color: var(--color-text-on-accent); border-color: var(--color-danger); }
+.ui-button--danger-soft:not(:disabled):hover { background: var(--color-danger); color: var(--surface-light); border-color: var(--color-danger); }
 
 .ui-button.is-loading .ui-button__content { opacity: 0.7; }
 .ui-button .ui-button__spinner { flex: none; color: inherit; }

apps/kimi-web/src/components/ui/Switch.vue

@@ -48,9 +48,12 @@ const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>();
   width: 16px;
   height: 16px;
   border-radius: var(--radius-full);
-  background: var(--color-text-on-accent);
+  background: var(--surface-light);
   box-shadow: var(--shadow-xs);
   transition: transform var(--duration-base) var(--ease-out);
 }
-.ui-switch.is-on .ui-switch__thumb { transform: translateX(16px); }
+.ui-switch.is-on .ui-switch__thumb {
+  background: var(--color-text-on-accent);
+  transform: translateX(16px);
+}
 </style>

apps/kimi-web/src/style.css

@@ -337,15 +337,15 @@ html[data-accent="mono"] {
 }
 
 /* mono accent × dark: the light grayscale above would win over the dark
-   variables (same specificity, later in source) — remap to dark grays.
-   Text/icons sitting ON the accent colour use var(--bg), so the near-white
-   accent stays readable here. */
+   variables (same specificity, later in source) — remap to dark grays and
+   pair the near-white accent with the scheme background as its foreground. */
 html[data-color-scheme="dark"][data-accent="mono"] {
   --accent-primary: #e8eaed;
   --color-accent: #e8eaed;
   --color-accent-hover: #c9cdd4;
   --color-accent-soft: #21262d;
   --color-accent-bd: #444c56;
+  --color-text-on-accent: var(--color-bg);
   --blue: #e8eaed;
   --blue2: #c9cdd4;
   --soft: #21262d;
@@ -361,6 +361,7 @@ html[data-color-scheme="dark"][data-accent="mono"] {
     --color-accent-hover: #c9cdd4;
     --color-accent-soft: #21262d;
     --color-accent-bd: #444c56;
+    --color-text-on-accent: var(--color-bg);
     --blue: #e8eaed;
     --blue2: #c9cdd4;
     --soft: #21262d;

apps/kimi-web/src/views/DesignSystemView.vue

@@ -1883,9 +1883,10 @@ onUnmounted(() => {
     font-family: var(--font-ui); color: var(--color-text); font-size: var(--text-base);
   }
   /* ---- Dark skin overrides ---- */
-  [data-p="dark"] {
+  .ds-page [data-p="dark"] {
     --p-bg: #0d1117; --p-surface: #161b22; --p-surface-raised: #1c2128; --p-surface-sunken: #0d1117;
     --p-text: #c9cdd4; --p-text-muted: #9aa0a8; --p-text-faint: #6b7280;
+    --p-text-on-accent: #ffffff;
     --p-line: #2d333b; --p-line-strong: #3d444d;
     --p-accent: #58a6ff; --p-accent-hover: #79b8ff; --p-accent-soft: rgba(88,166,255,.14); --p-accent-bd: rgba(88,166,255,.28);
     --p-success: #3fb950; --p-success-soft: rgba(63,185,80,.14); --p-success-bd: rgba(63,185,80,.28);
@@ -2125,7 +2126,7 @@ onUnmounted(() => {
   .p-composer-ta.ph { color: var(--p-text-faint); }
   .p-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px; }
   .p-composer-left, .p-composer-right { display: flex; align-items: center; gap: 2px; }
-  .p-send { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--p-accent); color: #fff; border: none; cursor: pointer; box-shadow: var(--p-sh-xs); transition: transform var(--p-dur-fast) var(--p-ease), background var(--p-dur) var(--p-ease); }
+  .p-send { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--p-accent); color: var(--p-text-on-accent); border: none; cursor: pointer; box-shadow: var(--p-sh-xs); transition: transform var(--p-dur-fast) var(--p-ease), background var(--p-dur) var(--p-ease); }
   .p-send:hover { background: var(--p-accent-hover); }
   .p-send:active { transform: scale(.92); }
   .p-send .p-ic { width: 16px; height: 16px; }
@@ -2204,11 +2205,11 @@ onUnmounted(() => {
   .p-switch::after {
     content: ""; position: absolute; top: 2px; left: 2px;
     width: 16px; height: 16px; border-radius: var(--p-r-full);
-    background: var(--p-surface-raised); box-shadow: var(--p-sh-xs);
+    background: var(--surface-light); box-shadow: var(--p-sh-xs);
     transition: transform var(--p-dur) var(--p-ease);
   }
   .p-switch.on { background: var(--p-accent); }
-  .p-switch.on::after { transform: translateX(16px); }
+  .p-switch.on::after { background: var(--p-text-on-accent); transform: translateX(16px); }
   .p-switch:focus-visible { outline: none; box-shadow: var(--p-focus-ring); }
 
   /* ===== Checkbox ===== */