home/docs/superpowers/plans/2026-05-18-terminal-theme-redesign.md

Terminal Theme Redesign Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Replace the green-on-black terminal theme with a Dracula-palette soft-modern style (purple accent, rounded cards, dot-matrix background).

Architecture: All changes are in style.css — update CSS variable overrides in the html[data-design-theme="terminal"] block, then update each component override section below it. No JS changes needed; the forced-dark logic and font chain stay unchanged.

Tech Stack: Vanilla CSS, Vite. No test suite — verification is visual via npm start.

Spec: docs/superpowers/specs/2026-05-18-terminal-theme-design.md

---

File Map

File	Action	What changes
style.css lines 51–80	Modify	CSS variables block for terminal theme
style.css lines 702–814	Modify	All terminal component overrides

---

Task 1: Update CSS variable tokens

Files:

• Modify: style.css:51-80

• Step 1: Replace the terminal theme variable block

Find this block (starts at line 51):

html[data-design-theme="terminal"] {
  color-scheme: dark;

  --accent: #33ff00;
  --accent-rgb: 51, 255, 0;
  --accent-2: #33ff00;
  --accent-3: #33ff00;
  --accent-secondary-rgb: 255, 176, 0;

  --page-gradient: #0a0a0a;
  --page-texture:
    repeating-linear-gradient(
      to bottom,
      rgba(var(--accent-rgb), 0.035) 0px,
      rgba(var(--accent-rgb), 0.035) 1px,
      transparent 2px,
      transparent 4px
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(var(--accent-rgb), 0.05) 0%,
      transparent 60%
    );
  --title-gradient: none;

  --control-bg: rgba(10, 10, 10, 0.85);
  --control-border: rgba(var(--accent-rgb), 0.35);
  --control-inset: transparent;
  --control-fg: var(--accent);
}

Replace it with:

html[data-design-theme="terminal"] {
  color-scheme: dark;

  --accent: #bd93f9;
  --accent-rgb: 189, 147, 249;
  --accent-2: #ff79c6;
  --accent-3: #8be9fd;
  --accent-secondary-rgb: 255, 121, 198;

  --page-gradient: #282a36;
  --page-texture: radial-gradient(
    circle,
    rgba(98, 114, 164, 0.55) 1px,
    transparent 1px
  );
  --title-gradient: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);

  --control-bg: rgba(40, 42, 54, 0.92);
  --control-border: #44475a;
  --control-inset: transparent;
  --control-fg: #f8f8f2;
}

• Step 2: Start dev server and verify background color changed

npm start

Open the app, switch design theme to Terminal. The page background should now be dark blue-purple (#282a36) with a faint dot grid, not pure black. The dot grid may be hard to see at first — look closely at a light source on a dark background.

---

Task 2: Fix dot-matrix background size + body text

Files:

• Modify: style.css — terminal body rule (~line 702) and add body::before size rule

• Step 1: Update the terminal body rule

Find:

html[data-design-theme="terminal"] body {
  font-family:
    ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas,
    "Liberation Mono", monospace;
  letter-spacing: 0.01em;
  color: var(--accent);
}

Replace with:

html[data-design-theme="terminal"] body {
  font-family:
    ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas,
    "Liberation Mono", monospace;
  letter-spacing: 0.01em;
  color: #f8f8f2;
}

• Step 2: Add body::before background-size rule immediately after

After the body rule above, insert:

html[data-design-theme="terminal"] body::before {
  background-size: 20px 20px;
}

• Step 3: Verify in browser

The dot matrix texture should now tile visibly at 20px intervals across the #282a36 background. Body text should be #f8f8f2 (off-white) instead of green.

---

Task 3: Update title styling

Files:

• Modify: style.css — terminal .title and .title::after rules (~lines 761–775)

• Step 1: Update the title rule

Find:

html[data-design-theme="terminal"] .title {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
  text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}

Replace with:

html[data-design-theme="terminal"] .title {
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}

• Step 2: Update the cursor rule to keep it visible

The ::after pseudo-element inherits -webkit-text-fill-color: transparent from the title, which would hide the cursor. Fix it explicitly.

Find:

html[data-design-theme="terminal"] .title::after {
  content: "\2588";
  margin-left: 8px;
  animation: terminal-cursor-blink 1s step-end infinite;
}

Replace with:

html[data-design-theme="terminal"] .title::after {
  content: "\2588";
  margin-left: 8px;
  animation: terminal-cursor-blink 1s step-end infinite;
  -webkit-text-fill-color: #bd93f9;
}

• Step 3: Verify in browser

The page title should now show a purple-to-pink gradient text (uppercase). The blinking █ cursor should be solid purple (#bd93f9), not transparent.

---

Task 4: Update card styling

Files:

• Modify: style.css — all terminal .card rules (~lines 777–814)

• Step 1: Update the base card rule

Find:

html[data-design-theme="terminal"] .card {
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

Replace with:

html[data-design-theme="terminal"] .card {
  border-radius: 10px;
  background: #313244;
  border: 1px solid #44475a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(0);
  transition: all 0.2s ease;
}

• Step 2: Add pin card variant

After the base card rule, add:

html[data-design-theme="terminal"] .card.pin {
  background: #383a4a;
}

• Step 3: Update card h2, p, and beian (split the combined rule)

Find:

html[data-design-theme="terminal"] .card h2,
html[data-design-theme="terminal"] .card p,
html[data-design-theme="terminal"] .beian a {
  color: var(--accent);
  text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.25);
}

Replace with:

html[data-design-theme="terminal"] .card h2 {
  color: #f8f8f2;
  text-shadow: none;
}

html[data-design-theme="terminal"] .card p {
  color: #6272a4;
  text-shadow: none;
}

• Step 4: Update card hover/focus

Find:

html[data-design-theme="terminal"] .card:hover,
html[data-design-theme="terminal"] .card:focus {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: var(--accent);
  box-shadow: none;
}

Replace with:

html[data-design-theme="terminal"] .card:hover,
html[data-design-theme="terminal"] .card:focus {
  background: #313244;
  border-color: #bd93f9;
  box-shadow:
    0 0 0 1px rgba(189, 147, 249, 0.25),
    0 8px 28px rgba(189, 147, 249, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

• Step 5: Update hover h2 color

Find:

html[data-design-theme="terminal"] .card:hover h2,
html[data-design-theme="terminal"] .card:focus h2 {
  color: var(--accent);
}

Replace with:

html[data-design-theme="terminal"] .card:hover h2,
html[data-design-theme="terminal"] .card:focus h2 {
  color: #bd93f9;
}

• Step 6: Add hover p color rule (currently missing)

Immediately after the hover h2 rule, add:

html[data-design-theme="terminal"] .card:hover p,
html[data-design-theme="terminal"] .card:focus p {
  color: #cdd6f4;
}

• Step 7: Verify in browser

Cards should now have rounded corners, a dark-purple surface (#313244), and lift with a purple glow on hover. Card titles should be off-white at rest and turn purple on hover. Card descriptions should be muted (#6272a4) at rest and lighten on hover.

---

Task 5: Update controls and dropdown

Files:

• Modify: style.css — terminal .design-theme-button, .theme-toggle, .design-theme-list rules (~lines 710–759)

• Step 1: Update the base button/toggle rule

Find:

html[data-design-theme="terminal"] .design-theme-button,
html[data-design-theme="terminal"] .theme-toggle {
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
}

Replace with:

html[data-design-theme="terminal"] .design-theme-button,
html[data-design-theme="terminal"] .theme-toggle {
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #44475a;
}

• Step 2: Update button/toggle hover

Find:

html[data-design-theme="terminal"] .design-theme-button:hover,
html[data-design-theme="terminal"] .theme-toggle:hover {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  transform: none;
}

Replace with:

html[data-design-theme="terminal"] .design-theme-button:hover,
html[data-design-theme="terminal"] .theme-toggle:hover {
  background: rgba(189, 147, 249, 0.08);
  color: #bd93f9;
  border-color: #bd93f9;
  transform: none;
}

• Step 3: Update dropdown list

Find:

html[data-design-theme="terminal"] .design-theme-list {
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(var(--accent-rgb), 0.55);
}

Replace with:

html[data-design-theme="terminal"] .design-theme-list {
  border-radius: 10px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(40, 42, 54, 0.96);
  border: 1px solid #44475a;
}

• Step 4: Update dropdown option hover/selected

Find:

html[data-design-theme="terminal"] .design-theme-list [role="option"]:hover,
html[data-design-theme="terminal"]
  .design-theme-list
  [role="option"][aria-selected="true"] {
  background: var(--accent);
  color: #0a0a0a;
}

Replace with:

html[data-design-theme="terminal"] .design-theme-list [role="option"]:hover,
html[data-design-theme="terminal"]
  .design-theme-list
  [role="option"][aria-selected="true"] {
  background: rgba(189, 147, 249, 0.15);
  color: #bd93f9;
}

• Step 5: Verify in browser

The theme selector button should have rounded corners and a dark surface. Hovering it should show a subtle purple tint (not green invert). Opening the dropdown should show a rounded dark panel; hovering or selecting an option highlights it in purple.

---

Task 6: Update beian footer

Files:

• Modify: style.css — terminal .beian a and .beian a:hover rules (~lines 791–814)

• Step 1: Add beian rest-state rule

The old combined rule (.card h2, .card p, .beian a) was split in Task 4, which removed the beian rest-state color. Insert a new rule immediately before the existing .beian a:hover rule:

html[data-design-theme="terminal"] .beian a {
  color: #6272a4;
  text-shadow: none;
}

• Step 2: Update beian hover

Find:

html[data-design-theme="terminal"] .beian a:hover {
  background: var(--accent);
  color: #0a0a0a;
  text-shadow: none;
}

Replace with:

html[data-design-theme="terminal"] .beian a:hover {
  color: #bd93f9;
  background: none;
  text-shadow: none;
}

• Step 3: Verify in browser

The footer ICP link should appear in muted purple-grey (#6272a4) at rest and turn accent purple (#bd93f9) on hover, with no background invert.

---

Task 7: Format, QA, and commit

Files:

• Modify: style.css (formatter pass)

• Step 1: Run Prettier

npm run fmt

Expected: style.css reformatted with no errors.

• Step 2: Full visual QA checklist

With npm start running, switch to the Terminal theme and check each item:

Element	Expected
Page background	#282a36 dark blue-purple with subtle 20px dot matrix
Title	Purple-to-pink gradient text, uppercase, blinking purple █ cursor
Cards at rest	#313244 rounded (10px), #44475a border, subtle shadow
Pin card	Slightly lighter surface #383a4a
Card h2 at rest	#f8f8f2 off-white
Card p at rest	#6272a4 muted purple-grey
Card on hover	Purple border glow, lifts 2px, h2 → #bd93f9, p → #cdd6f4
Theme selector button	Rounded 8px, dark surface, purple hover tint (no invert)
Dropdown panel	Rounded 10px, dark surface, purple option highlight
Dark toggle	Greyed out / cursor: not-allowed (unchanged)
Beian footer	#6272a4 at rest, #bd93f9 on hover, no bg invert
Other themes	Completely unaffected — spot-check Cyberpunk and Fluent

• Step 3: Commit

git add style.css
git commit -m "redesign: terminal theme — Dracula purple focus (soft modern cards, dot matrix bg)"