Skip to content

fix(duckduckgo): re-theme the redesigned homepage, search, and Duck.ai surfaces#2254

Open
ELHart05 wants to merge 4 commits into
catppuccin:mainfrom
ELHart05:fix/duckduckgo-redesign
Open

fix(duckduckgo): re-theme the redesigned homepage, search, and Duck.ai surfaces#2254
ELHart05 wants to merge 4 commits into
catppuccin:mainfrom
ELHart05:fix/duckduckgo-redesign

Conversation

@ELHart05

@ELHart05 ELHart05 commented Jun 9, 2026

Copy link
Copy Markdown

🗒 Checklist 🗒

  • I used AI (or AI-assistance) for this change (used for the overall content reformulating only no code contribution and for the comments added in the changes I made + reformulate the PR description content).

🔧 What does this fix? 🔧

Resolves #2252.

Why

DuckDuckGo rolled out a redesign of the homepage, the search box, the new
Search / Duck.ai mode toggle, the Customize Homepage dialog, and the
/compare-privacy page. Every one of those surfaces moved to new CSS-module
class names and a new design-token layer, so the existing style no longer
reached them.

The damage was worst on Latte, where the unthemed defaults left washed-out
text, white-on-white buttons, grey-on-grey icons, and an off-palette navy hero
band. The three dark flavors fared a little better but still leaked
DuckDuckGo's brand blue and a lot of plain greys.

How

The redesigned homepage builds every --theme-* variable on top of a small set
of --ds-* design-system tokens. Instead of chasing each component one by one,
the style overrides those --ds-* tokens once at the .theme-light /
.theme-dark anchor, so the palette cascades down to everything built on them.
From there it only has to patch the handful of places that hardcode a color,
ship a raster/SVG asset, or invert their text for a "selected" state.

A few things to know when reading the diff:

  • The new class names are build hashes (name_part__hash), so selectors use
    [class*="name_part"] to survive DuckDuckGo's hash churn.
  • Where two components share a prefix (e.g. feedbackRadio vs
    feedbackRadioGroup), the selector pins the exact one with a __ suffix or a
    :not().
  • The Search and Duck.ai glyphs are inline SVGs whose clip-path names the icon
    (ai-chat, ai-chat-color), so those are the hooks used to tell the mono and
    filled variants apart.

What changed

Design tokens. Overrode the --ds-* surface / text / icon / accent / status
tokens at the theme anchor so the whole --theme-* chain inherits the palette.

Homepage. Page and search-box backgrounds, the Search / Duck.ai toggle
(track, selected pill, labels), the below-the-fold cards, the scroll pull-tab,
and the recolored DuckDuckGo logo. The "Protection. Privacy. Peace of mind."
pill is a secondary link-button whose label shipped grey — it now uses the text
color. Cards regained their hover lift, which the flat fill had hidden.

Search & autocomplete. Input, dropdown, hovered/selected rows, the submit
glyph (accent at rest, filled accent on focus/hover), and the "Ask Duck.ai"
footer row whose suffix and Alt+Enter shortcut shipped DuckDuckGo greys.

Duck.ai mode toggle icon. The mono (unselected) glyph keeps a mauve spark.
The selected option swaps in DuckDuckGo's larger filled "color" glyph, so the
style drops its solid bubble to leave just the outline, tints the spark mauve,
and scales it down so the diamond stays the same size whether or not the option
is selected.

Customize Homepage dialog. Dialog surface, the selected/unselected option
cards (the unselected one shipped a near-invisible tint and no edge), and the
feedback thumbs, which shipped mismatched colors (one brand blue, one grey).

/compare-privacy. The hero shipped a brand navy band — swapped for a @crust
band that stays distinct from the page in both flavors without the off-palette
blue. The page logo is a bare <img> (no class), so the logo rule was broadened
to recolor it there too; its wordmark now follows the text color and reads on
the light band. Also covered the comparison table's zebra rows, tooltips/feature
popovers, the extension CTA, checkboxes, and the side-menu close glyph.

Latte hairline borders. Latte is low-contrast, so its surfaces (search box,
cards, dialogs, toggle) get a @surface2 hairline so they stay legible against
the pale page. This is kept in its own commit.

Testing

Each surface was checked against a live render of the current DuckDuckGo markup
in both light (Latte) and dark themes (Mocha, Frappe, Macchiato), homepage, autocomplete, the Search /
Duck.ai toggle, the Customize dialog, and /compare-privacy. deno fmt and
deno task lint duckduckgo both pass, and the style compiles for all four
flavors.

🔍 Reproduction Steps 🔍

Homepage — Latte

Before After
home-before-latte home-after-latte

/compare-privacy — Latte

Before After
compare-before-latte compare-after-latte

Dark (Mocha)

Homepage /compare-privacy
home-after-mocha compare-after-mocha

Details

Search / Duck.ai toggle Customize dialog "Ask Duck.ai" row Compare logo
search-toggle-mocha customize-modal-latte autocomplete-latte compare-logo-latte

@ELHart05 ELHart05 requested a review from GenShibe as a code owner June 9, 2026 09:56
@github-actions github-actions Bot added the duckduckgo DuckDuckGo label Jun 9, 2026
@uncenter

uncenter commented Jun 9, 2026

Copy link
Copy Markdown
Member

Thanks for the contribution! It looks like you weren't able to fill out our userstyles update pull request template, which requires you to acknowledge among other things that you have read the contributing guidelines and have disclosed AI usage. Could you modify your comment above to fit in our template at https://github.com/catppuccin/userstyles/blob/main/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md? Thanks again.

@WalkQuackBack WalkQuackBack added 0.kind: bug Bug (i.e. unthemed components) 5.needs: staff-review A review by a staff member is required/needed labels Jun 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

0.kind: bug Bug (i.e. unthemed components) 5.needs: staff-review A review by a staff member is required/needed duckduckgo DuckDuckGo

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Minor issues with DDG's styling.

3 participants