Sync src/palette.ts with the Bootstrap 6 colors

Open
  • Is something wrong?
#23 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Active
Tech stack
typescript, vscode
Domain
design, frontend

Research direction

Start with src/palette.ts and compare its color steps with Bootstrap’s scss/_colors.scss; the issue also points to src/color-p3.ts and README claims that may need review. First resolve the open questions about gamut mapping, palette coverage, Display P3 values, and build-time generation. Done means the agreed palette matches Bootstrap 6 and the related contrast values and documentation are updated; no tests or specific test files are mentioned.

Written by the indexing model from the issue text.

Description

enhancement

src/palette.ts matches Bootstrap's palette as it was in mid-December 2025. Bootstrap's colors have changed twice on main since then, so the theme's blue and every shade from 600 down no longer match what Bootstrap 6 ships.

What the palette matches today

Each hue uses Bootstrap's OKLCH base from scss/_colors.scss, clipped to sRGB, with the steps mixed in Lab: 90/80/60/40/20% white for 050 to 400, and 16/32/48/64/76% black for 600 to 950. Rebuilt that way, every step Bootstrap also has lands within 0.006 ΔE OK of the file, which is under a visible difference. Blue only fits with its old base, oklch(60% 0.24 258).

What changed in Bootstrap since

  1. Blue moved from hue 258 to 240 on 2025-12-27, in twbs/bootstrap#41978 ("Update blue to be less indigo"). The theme's last color commit (ec21a6e, 2026-02-14) kept the old one.
  2. On 2026-08-28, twbs/bootstrap#42875 changed the steps. They now mix in OKLCH instead of Lab, and the darkest shades went from 76% and 88% black to 70% and 76% (950 and 975).

Bootstrap's 500s still match for the other 14 hues. The steps around them drift, and the drift grows toward the dark end: about 0.02 ΔE OK at 600 and up to 0.1 at 900, on every hue. Some examples, using a plain sRGB clip for Bootstrap's values:

Step Theme Bootstrap 6
blue 400 #6a8eff #00a3ff
blue 500 #0075ff #0087fe
blue 600 #1b61d2 #006ac9
gray 900 #2c2f32 #171a1d
red 900 #501a1d #360309
teal 300 #8ed9d3 #2edbd3

The pale tints of the hues that don't fit in sRGB (teal, cyan, green, blue) change too: mixing in OKLCH keeps more chroma than Lab did.

What a sync would touch

  • The 11 steps of the 15 hues in src/palette.ts. The gray steps Bootstrap doesn't have (020 to 080, and 920 to 1040, used for the backgrounds) would stay as they are.
  • The contrast numbers in #19, #20 and #21 would need measuring again. With the synced values, the role split proposed in #21 still passes 4.5:1 in both modes. Blue 600 links in Light drop from 5.70 to 5.38, blue 400 links in Dark go from 6.46 to 7.16. The Light button hover would land at 4.497:1, just under 4.5, so its mix would need a small change. Light strings go from 4.00 to 4.34 (#19, still under 4.5), and Dark comments go from 3.66 to 3.35 (#20, worse).
  • The README says each color has "13 variants (from 025 to 975)" and lists 16 hues with pewter. The file has 11 steps (050 to 950) and 15 hues, with no pewter.

Open questions

  • Out-of-gamut values: keep the plain sRGB clip the 500s use today, or follow the CSS Color 4 gamut mapping (it reduces chroma instead)? It changes blue 500 from about #0087fe to about #0089d7.
  • Should the palette add 025, 975 and pewter so it covers all of Bootstrap's tokens, or keep the steps the theme uses?
  • The Vibrant themes boost the saturation of the sRGB colors in src/color-p3.ts. Should they use Bootstrap's own OKLCH values in Display P3 instead?
  • Should the hex values be generated from Bootstrap's _colors.scss in the build, so the next change upstream doesn't drift again?

🤖 Generated with Claude Code

Dominant language
TypeScript
Stars
7
Forks
2
Avg merge
1h 16m
Merged PRs (30d)
18

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from twbs/bootstrap-vscode-theme

All issues in twbs/bootstrap-vscode-theme

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.