(3/3)

On the color-picker branch (see #24), a new view called Colors was added. Right now, there is no way to access or apply the selection.

To make it useful, step three is to...

Create a command that copies the selection to clipboard

• (package.json) Add a new "command" copySelectedColor with fitting icon

• (package.json) Add a new "view/title" copySelectedColor, when view == codeui.views.color

• (src/extension.ts) Register command copySelectedColor --> colorProvider.copySelectedColor()

Probably could be improved by deleting more from the start:

1-word titles are all looking great though.

(1/3)

On the color-picker branch (see #24), a new view called Colors was added. Right now, there is no way to access or apply the selection.

To make it useful, step one is to...

Push updates from the color picker to the extension

• (media/main.js) Add a new constant vscode, set to acquireVscodeApi().

• (media/main.js) Add a new constant initialColor. Set it to any hex color string.

• (media/main.js) Add a new variable currentState. It should equal vscode.getState() if it exists, {color : initialColor } if not.

• (media/main.js) Add a new function updateSelectedColor. It should:

• Accept a message to send. (Will be a dict with format: {type:'updateSelectedColor', value:'#000000'})

• Use vscode.postMessage() to report the new selection to the extension.

• (media/main.js) Add a new function saveState. It should:

• Accept a state,

• Save it with vscode.setState(). This is for persistence across sessions.

• Update the currentState instance.

• Report the new color to the extension using the new updateSelectedColor function.

• (media/main.js) Change colorWheel so that it initializes with currentState's color.

• (media/main.js) Add to colorWheel.onChange: Use new saveState function to store and report the selection.

Thank you for being part of the Open VSX community by adding your extensions to the Open VSX Registry. Please note that the service was recently transferred to the Eclipse Foundation and urgent action on your part is needed so we can continue to list your extensions. To ensure uninterrupted service, please sign the Eclipse Publisher Agreement on or before January 8, 2021. If not signed by that date, your extensions will be delisted and will no longer appear on the site nor be available via the API. If you sign at a later date, your extensions will then be re-activated. The signing process is explained in the Wiki (steps 1 and 2).

Please also note that all extensions MUST have a license in order to be listed.

More details are in these recent blog posts:
https://blogs.eclipse.org/post/brian-king/open-vsx-registry-under-new-management
https://blogs.eclipse.org/post/brian-king/new-era-open-vsx-registry

Today, there’s growing momentum around open source tools and technologies that support Visual Studio (VS) Code extensions. Leading global organizations are adopting these tools and technologies. This momentum has spurred demand for a marketplace without restrictions and limitations. Thanks for joining us on this journey as we continue to build the Open VSX community. We look forward to continued innovation from you in 2021!

(2/3)

On the color-picker branch (see #24), a new view called Colors was added. Right now, there is no way to access or apply the selection.

To make it useful, step two is to...

Listen for and store updates from the color picker

• (src/color.ts) Add private property ColorProvider.selectedColor

• (src/color.ts) Add to colorProvider.onDidRecieveMessage: If message.type=="updateSelectedColor", set self.selectedColor to message.value.

• (src/color.ts) Add public function ColorProvider.copySelectedColor(). It should:

• Copy self.selectedColor to clipboard. See ElementProvider.copy() in src/elements.ts for reference.

• Use public function showNotification from src/extension.ts to show a popup, notifying the user.

I'd really appreciate a fresh take on the README.

The format hasn't changed much since release, and I think I'm too 'involved' to do it justice. Its a pretty extension, and it could really shine here... but I don't think it is right now.

Help!

The latest changes can be found on the color-picker branch. That incoming update is the main motivator for this. Thanks!

Activation time is almost the same as all of my installed extensions combined:

Using an external color picker is annoying and VS Code's built-in picker is restricted to text editing:

Priorities:

• Implement a color picker view
• Make every attempt to mirror VS Code's overall design and style.
• Respond to user activity (ex: color-picker updates to reflect the color of a selected element).
• Add CodeUI extension settings/commands where appropriate

Additional context

Use color-picker branch for work on this feature.

Updates

• (12/1/21): The color picker now updates to reflect selection in the Elements view. Thinking about a reversed, toggle-able, "paint" mode where you can apply the picker's colour to elements just by clicking on them.

• (12/10/2020) : New approach. Added a statusBarItem that updates according to the hex and hue of the selection. Triggers copy-to-clipboard command on click. Removes any need to clutter the view with more widgets. Also, looks pretty cool.

• (12/09/2020): Simple copy-to-clipboard functionality added. Not the minimum-viable-product we need, but a start. Very interested in help/feedback. Two rules, though! 1) no frumpy webview abuse and 2) keep it simple :)

• (11/27/2020) : A new view 'Color' with a picker has been added. No way to access the selection yet.

• Add grunt to the project
• Create a task that updates the extension version

1. Try to lighten Activity Bar background
2. Switch theme
3. 🐛 The color stayed

So, to iterate, instead of:

"workbench.colorCustomizations": {
    "activityBar.background": "#2f363c"
}

You do

"workbench.colorCustomizations": {
    "[Github]": {
        "activityBar.background": "#2f363c"
    }
}

Where Github is active theme that was modified by the extension.

1. Use light theme
2. Un-focus Tree View (or on hover)

In CodeUI, each element's info comes from from a data file: data/vscodeElementsArray.json.

Here is the data for "activityBar.foreground":

In Standard View, we use the groupedName to avoid redundancy. In Palette View, there isn't much context, so elements need their full name, or titleName.

As shown below, elements are currently showing their shorter, groupedName in Palette View. This is 👎. Without hovering over them, it's hard to tell what they are:

1. Toggle View to Palette View
2. #ccc & #cccccc is in 2 different groups

All 4 colors are the same:

• #fff
• #ffff
• #ffffff
• #ffffffff

EDIT(@ryanraposo):

Considerations

• For individual items, its important that CodeUI shows the hex value as it would appear in the theme file/settings.json.
• We might need to change group titles. An example: use the shortest, or most 'reduced' hex code possible for the group's color.

Hello

thank you very much for sharing your great work!

I am trying to start with CodeUI but stumble with three questions:

#1: It is not clear what exactly CodeUI can do

You sum it up like this: "Customize your color theme for VS Code."
But: What does it mean?

• Does CodeUI create a copy of a theme and then one can customize that copy?
• Or, what I suspect much more, can we customize a theme ad hoc and the customized values are stored in the (selectable) user or workspace settings? That would be awesome.

Suggestion: Please add one or two more sentences to README.md

It would be great if the README.md: features chapter explains with one or two sentences what CodeUI does.

#2: Can we adjust language syntax colors, too?

If we change the theme, the color in the displayed source code is changed, too.

Is it possible to e.g. change the color of a variable, too:

I was not able to find a Syntax / Variable element in CodeUI.

Thanks a lot, kind regards,
Thomas

• Add ability to save custom element groups (codeui.customGroups) using the interface
• Add presets like 'Borders (Workbench)'

Probably > 95% of the time people will use the Global settings file, so I would like a setting to skip the scope choosing Quick Pick. (An just write to the Global).

Generally, a great 'What's New' page would:

• Appear once on version updates.
• Provide useful information.
• Include an option to disable or throttle (major, minor, patch) to avoid being annoying.

Being early in development, and especially with the color picker update around the corner, priority is even higher!

We really want existing users who maybe haven't opened CodeUI in a while to notice :)

(Big thank you to @alefragnani! His beautiful 'What's New' page for the Bookmarks extension inspired the idea, and his extra work made this easy for all of us!)

Without a pre-existing entry for "workbench.colorCustomizations" in the user's settings.json file (VS Code settings), all customization functionality breaks:

This is a pretty serious bug, I'm not sure when it was introduced.

A temporary workaround is to add the empty entry ("workbench.colorCustomizations" : {}) manually, as pictured above.

However, keep in mind the different versions of settings.json. CodeUI has features for workspace-specific customization, and in that scenario you would have to add the entry to that particular settings.json file (.vscode/settings.json).

Responsive Color Picker

The color picker in the Color view should automatically resize to fit the view.

Relevant Code

The 'Color' view in CodeUI is a Webview, which is no different than an ordinary webpage.

The HTML comes from a template literal:

This is the JavaScript behind the view:

Currently, there is no CSS other than the stylesheet included with the color picker package:

Note: the package, reinvented-color-picker, is located in codeui/media alongside main.js (above). It is stored locally (not via npm) in the lib folder:

media
    └main.js
    └───lib
        └ reinvented-color-wheel.min.css
        └ reinvented-color-wheel.min.js

Solution

The solve for this issue could involve:

• CSS (./media/lib/reinvented-color-wheel.css or a new file, ex: ./media/style.css)
• Manipulation of the ReinventedColorWheel object and it's properties. See ./media/main.js:

• The VS Code Extension API. I can help with this side of things if you are only comfortable with the 'traditional web' stuff.

  An example is the onDidChangeVisibility event of the WebviewView. For the most part, we can work within the webview--but if we want to detect open/close/collapse events for the view container itself, we need to 'ask' VS Code.

Darken/Lighten with hard-coded 10% is not going to be enough for everyone.

Ideally having an input that you can put any value: 0.333333 or 50.

I mean, shortcuts are great and should stay:

• Darken (10%)
• Lighten (10%)
• Darken (Custom value)
• Lighten (Custom value)

Where picking custom value would bring another Quick Pick inviting to enter the number value.

It's usually a good idea to commit a lock file

https://stackoverflow.com/questions/44552348/should-i-commit-yarn-lock-and-package-lock-json-files