apps/desktop/src/renderer/styles/settings/theme-preview.css

/* Appearance theme and palette previews. */
.settingsThemeOptions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.settingsThemeOption {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: auto;
  min-height: 48px;
  justify-content: stretch;
  border: var(--border-width-hairline) solid var(--border);
  border-radius: var(--radius-surface);
  background: var(--background-elevated);
  color: var(--foreground);
  overflow: hidden;
  padding: var(--space-2);
  text-align: left;
  white-space: normal;
}

.settingsThemeOptionPreview {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: var(--space-2);
  min-height: 116px;
}

/* Mini chat-surface mock rendered inside each theme tile. Hardcodes colors
 * per variant so the preview doesn't track the active theme — comparing
 * tiles is the whole point. */
.settingsThemePreview {
  width: 100%;
  max-height: 70px;
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-surface);
  overflow: hidden;
  border: var(--border-width-hairline) solid var(--border);
  display: flex;
  background: var(--foreground-5);
}

.settingsThemePreviewSplit > .settingsThemePreviewPane:first-child {
  border-right: var(--border-width-hairline) solid var(--border);
}

.settingsThemePreviewPane {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  min-width: 0;
}

.settingsThemePreviewPane[data-mode="light"] {
  /* PR-GRAY-CARD-LIFT-0: mirror the app shell after WAWQAQ's gray
     plate / white content surface direction. */
  background: oklch(1.000 0 0);
  color: oklch(0.18 0 0);
}

.settingsThemePreviewPane[data-mode="dark"] {
  background: oklch(0.21 0 0);
  color: oklch(0.92 0 0);
}

.settingsThemePreviewSidebar {
  height: 100%;
}

.settingsThemePreviewPane[data-mode="light"] .settingsThemePreviewSidebar {
  background: oklch(0.955 0 0);
  border-right: var(--border-width-hairline) solid oklch(0.88 0 0);
}

.settingsThemePreviewPane[data-mode="dark"] .settingsThemePreviewSidebar {
  background: oklch(0.13 0 0);
  border-right: var(--border-width-hairline) solid oklch(0.26 0 0);
}

.settingsThemePreviewChat {
  padding: var(--space-1-5) var(--space-2);
  display: grid;
  gap: var(--space-1);
  align-content: end;
  min-width: 0;
}

.settingsThemePreviewLine {
  height: 5px;
  border-radius: var(--radius-pill);
  width: 90%;
}

.settingsThemePreviewLine-short {
  width: 56%;
}

.settingsThemePreviewPane[data-mode="light"] .settingsThemePreviewLine-assistant {
  background: oklch(0.78 0 0);
}
.settingsThemePreviewPane[data-mode="dark"] .settingsThemePreviewLine-assistant {
  background: oklch(0.36 0 0);
}

.settingsThemePreviewBubble {
  align-self: end;
  justify-self: end;
  width: 60%;
  height: 12px;
  border-radius: var(--radius-surface);
  margin-top: var(--space-0-5);
}

.settingsThemePreviewPane[data-mode="light"] .settingsThemePreviewBubble {
  background: oklch(0.935 0 0);
}
.settingsThemePreviewPane[data-mode="dark"] .settingsThemePreviewBubble {
  background: oklch(0.30 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .settingsThemePreview { transition: none; }
}

.settingsThemeOption:hover {
  border-color: var(--border-strong);
  background: var(--state-hover-bg);
}

.settingsThemeOption[data-checked] {
  border-color: var(--border-strong);
  background: var(--state-selected-bg);
}

/* PR-THEME-PRODUCT-PALETTES-0: palette picker. Each option shows a
   round swatch whose color is the palette's accent token. The swatch
   colors are hard-coded here (not pulled from --accent) so a non-
   active palette still previews its real color. */
.settingsPaletteSwatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: var(--border-width-thick) solid var(--border);
  box-shadow: inset 0 0 0 2px oklch(1 0 0 / 0.25);
  /* Fallback in case a swatch name has no per-palette rule below
     (e.g. a new palette landed in `THEME_PALETTES` but its swatch
     color wasn't added yet) — show the active accent so the missing
     row at least previews something instead of going invisible. */
  background: var(--accent);
}

/* PR-PALETTE-SWATCH-VISIBLE-0 (WAWQAQ msg `d3ea9a33` 2026-06-26):
   each palette's swatch needs its own background-color or every
   `.settingsPaletteSwatch-*` falls through to no fill and reads as
   an empty grey circle on the Appearance page. The accent values are
   copied verbatim from the light-mode block of each `[data-maka-
   theme="…"]` rule in `maka-tokens.css` so the picker previews the
   palette's brand identity even when the current page is on a
   different palette. */
.settingsPaletteSwatch-default          { background: oklch(0.70 0.135 250); }
.settingsPaletteSwatch-onedark          { background: oklch(0.62 0.13 237); }
.settingsPaletteSwatch-catppuccin-mocha { background: oklch(0.65 0.18 330); }
.settingsPaletteSwatch-tokyo-night      { background: oklch(0.55 0.16 215); }
.settingsPaletteSwatch-nord             { background: oklch(0.62 0.12 215); }
.settingsPaletteSwatch-coral            { background: oklch(0.68 0.18 25); }
.settingsPaletteSwatch-azure            { background: oklch(0.55 0.12 195); }
.settingsPaletteSwatch-forest           { background: oklch(0.50 0.12 152); }
.settingsPaletteSwatch-dusk             { background: oklch(0.55 0.18 305); }
.settingsPaletteSwatch-sand             { background: oklch(0.62 0.14 55); }
.settingsPaletteSwatch-mono             { background: oklch(0.30 0 0); }

/* PR-PALETTE-PICKER-GROUPS-0: subgroup container that gathers a small
   heading (编辑器主题 / 产品色调) above its own grid. Spacing matches
   the existing settingsSubheading rhythm so the page reads as one
   continuous picker, just structured. */
.settingsPaletteGroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.settingsPaletteGroup + .settingsPaletteGroup {
  margin-top: var(--space-2);
}
.settingsPaletteGroupHeading {
  margin: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
  letter-spacing: var(--tracking-normal);
}

.settingsThemeLabel {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.settingsThemeLabel strong {
  min-width: 0;
  color: var(--foreground);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-semibold);
  /* #1362: palette names wrap instead of truncating — at the 480px window
     floor the single-column tiles are ~74px of label and the old nowrap +
     ellipsis cut "Catppuccin Mocha" to "Catppucc…" with no way to recover
     the name. Every label fits one line on the wide 3-column grid, so this
     only changes the squeezed state. */
  overflow-wrap: anywhere;
}

.settingsThemeLabel small {
  color: var(--foreground-secondary);
  font-size: var(--font-size-ui);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .settingsThemeOptions {
    grid-template-columns: 1fr;
  }
}