Skip to content

fix(deepl): retarget theme to redesign design tokens - #2304

Closed
FPierre wants to merge 1 commit into
catppuccin:mainfrom
FPierre:fix/deepl-redesign-theme
Closed

fix(deepl): retarget theme to redesign design tokens#2304
FPierre wants to merge 1 commit into
catppuccin:mainfrom
FPierre:fix/deepl-redesign-theme

Conversation

@FPierre

@FPierre FPierre commented Aug 3, 2026

Copy link
Copy Markdown

🗒 Checklist 🗒

🔧 What does this fix? 🔧

DeepL's translator UI was redesigned: hashed CSS-module class names (*-module--*--hash) are gone, and the page now relies on design tokens (--dui-color-*, --color-*) plus stable utilities (bg-surface, text-default, text-redesign-*, …) that use light-dark().

The previous userstyle still forced Catppuccin text colors onto elements while almost none of the background selectors matched, which produced unreadable light text on white backgrounds (see #2004, #1638).

This rewrite:

  • Remaps DeepL's palette + semantic tokens (--dui-color-background-*, --dui-color-text-*, --dui-color-border-*, shadcn-style --background / --foreground, …)
  • Overrides the stable utility classes used by the redesign
  • Keeps loose [class*="…"] fallbacks for remaining chrome (header, glossary, modals, logos)
  • Broadens @-moz-document to deepl.com / www.deepl.com so other product pages get coverage
  • Bumps the userstyle version to 2026.08.03

🔍 Reproduction Steps 🔍

  1. Install the updated DeepL userstyle (Stylus)
  2. Open https://www.deepl.com/translator with OS dark mode (mocha) or light mode (latte)
  3. Confirm page background, translator panes, header, sidebar, language selectors, and primary buttons use Catppuccin colors with readable contrast
  4. Type some text and confirm the editor caret/text remain visible

Closes #2004
Closes #1638

DeepL replaced hashed CSS-module classes with dui/color tokens and
light-dark utilities, so the old selectors left text themed on white
backgrounds. Remap the token palette and stable utility classes instead.
@FPierre
FPierre requested a review from watatomo as a code owner August 3, 2026 10:05
@github-actions github-actions Bot added the deepl DeepL label Aug 3, 2026
@FPierre

FPierre commented Aug 3, 2026

Copy link
Copy Markdown
Author

Closing — opened without being asked.

@FPierre FPierre closed this Aug 3, 2026
@FPierre
FPierre deleted the fix/deepl-redesign-theme branch August 3, 2026 10:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

deepl DeepL

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Deepl Userstyle broken DeepL: Multiple elements have poor contrast and unthemed

1 participant