Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@slashclone

Two theme brand colors

@slashclone/two-theme-brand-colors

Find brand colors that work in both light and dark mode: for each hue, the shade with the best WCAG contrast against all your light and dark backgrounds at once, so a logo or accent can keep one color in both themes. Prints a table and saves the results as JSON.

SkillContentv0.1.0 (latest)
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1---
  2. 2name: two-theme-brand-colors
  3. 3description: Find a brand or logo color that keeps enough contrast in both light and dark mode, so the brand does not change color with the theme. Use when choosing an accent or logo color for a site with light and dark themes, or when a brand color fails contrast in one of them.
  4. 4---
  5. 5
  6. 6# Two-theme brand colors
  7. 7
  8. 8Goal: one color for the logo (or a key accent) that reads on every background the product uses, light and dark, instead of a different color per theme.
  9. 9
  10. 10## Steps
  11. 11
  12. 121. **Collect the backgrounds.** Ask for, or read from the design tokens, every light background (page, cards) and every dark one. Use hex values like `#F0EAE1`.
  13. 132. **Pick the hues to try.** Start from `examples/hues.csv` (twelve greens) or write a `data/hues.csv` with `name,hue,saturation` rows for the brand's color family. Hue is 0 to 360; saturation is 0 to 1.
  14. 143. **Choose the target.** Logos and icons need 3 to 1 against their background (WCAG non-text contrast). Text needs 4.5 to 1. A single color rarely reaches 4.5 on both very light and very dark grounds, so this is usually for marks, not text.
  15. 154. **Run it:**
  16. 16 `node scripts/two-theme-colors.mjs --light "#F0EAE1,#FBF8F3" --dark "#181512,#211D19" --hues examples/hues.csv --min 3`
  17. 17 For each hue it tries every lightness and keeps the shade whose worst contrast across all the backgrounds is highest.
  18. 185. **Read the result.** The table lists pass or fail, the hex, and the worst contrast. `out/brand-colors.json` has every pair. Show the passing colors on both backgrounds side by side so the person can choose by eye.
  19. 196. **Keep text colors separate.** If the chosen color is for the logo, leave link and button text on their own tested colors per theme.
  20. 20
  21. 21## Rules
  22. 22
  23. 23- Never claim a color passes without running the script on the real backgrounds.
  24. 24- Report the worst-case number, not the best one.
  25. 25- If nothing passes, say so and suggest either a lower target for non-text use or a separate color per theme.
Sign in to comment on a line