Add color swatches to the Main color setting - #24
Open
WalnutDerwin wants to merge 2 commits into
Open
Conversation
Replace the native select with a custom settings picker so every candidate shows a fixed 500-shade swatch. The swatches identify each hue only; bullets, references, and lines keep their independent shade settings. Preserve the existing color values and settings update path.
There was a problem hiding this comment.
Pull request overview
This PR replaces the “Main color” native select with a custom React-based picker so each color option can display a swatch (using Tailwind’s 500 shade), while keeping the persisted setting values compatible with existing user configs.
Changes:
- Introduces
MainColorPickerandinternals.colorOptions, and wires the “Main color” setting to areactComponent. - Adds
getColorPreviewHex()for stable swatch rendering based on a fixed500shade. - Moves static picker presentation styles into a new
extension.cssand tags dynamic style elements so they can be selectively reset.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| extension.js | Adds the custom React main-color picker, fixed swatch color mapping, and dynamic-style tagging/removal logic. |
| extension.css | Adds static CSS needed for picker layout and swatch sizing/styling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Keep removing dynamic styles created before the marker was introduced without allowing the cleanup to remove the static picker stylesheet. Use native buttons and a named group rather than advertising listbox or menu keyboard behavior that the picker does not implement.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
The Main color setting currently lists color names without an in-product visual cue. Users need to remember the Tailwind palette or consult the external palette reference before choosing a hue.
Reproduction
Settings → Extension Settings → Reference Path.Main colorcontrol.Actual behavior
The control displays only text labels, so users cannot visually identify a candidate color before selecting it.
Expected behavior
Each candidate should include a small color indicator so users can quickly recognize the main hue before choosing it.
Root cause
The existing control is a native select. Its browser-controlled option popup cannot reliably render custom HTML/CSS content, so it cannot show a swatch for every option.
Improvement
500shade for all swatches. This is deliberately a stable hue identifier, not a preview of the independently configured bullet, reference, or line shades.extension.cssand keep only settings-dependent reference-path styles dynamic.Verification
git diff --check.500mapping for all 22 color candidates.Screenshot