johnpapa / vscode-peacock

Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

Peacock for Visual Studio Code

Subtly change the color of your Visual Studio Code workspace. Ideal when you have multiple VS Code instances, use VS Live Share, or use VS Code's Remote features, and you want to quickly identify your editor.

Read the extensive documentation here which includes a guide on how to use Peacock and a changelog

Install

1. Open Extensions sideBar panel in Visual Studio Code and choose the menu options for View → Extensions
2. Search for Peacock
3. Click Install
4. Click Reload, if required

Documentation

Read the extensive documentation here which includes a guide on how to use Peacock and a changelog

Quick Usage

Let's see Peacock in action!

1. Create/Open a VSCode Workspace (Peacock only works in a Workspace)
2. Press F1 to open the command palette
3. Type Peacock
4. Choose Peacock: Change to a favorite color
5. Choose one of the pre-defined colors and see how it changes your editor

Now enjoy exploring the rest of the features explained in the docs!

Resources

• Peacock docs are hosted on Azure -> Get a Free Azure Trial
• Get VS Code
• Create your first VS Code extension
• VS Code Extension API
• Learn how to add WebPack bundles to your favorite extensions

Credits

Inspiration comes in many forms. These folks and teams have contributed either through ideas, issues, pull requests, or guidance. Thank you!

• The VS Code team and their incredibly helpful guide for creating extensions

• Here are some great examples for extensions from the VS Code team

Code of Conduct

Code of Conduct.

Problems or Suggestions

Open an issue here

Contributors

Contribution guidelines are located here

Thanks goes to these wonderful people (emoji key):

James Newell ⚠️	Julian 🤔	Oleg Solomka 💻 ⚠️	Joseph Rex 🎨	Sam Julien 🤔	Shayne Boyer 💻	Burke Holland 🤔
Jonathan Carter 💻	Ricardo Souza 💻	Kushal Pandya 💻	Erich Gamma ⚠️	Christian Nwamba 🤔	Matt Bierner 💻	Raymond Camden 🤔
Aaron Powell 🤔	tanhakabir 💻	Nate Drake 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

vscode-peacock's Issues

I think P is way too fancy in the logo

It doesn't feel like it's part of the word and it looks more like an R than P..

(all that with my eyes.. I might be wrong)

New Setting for Saving Named Colors

I don't know if this is even possible, but it'd be cool to be able to add saved color names. So, if I have a color I want to reuse, I could save that and have it then pop up as a menu selection.

Peacock: Save New Color Name

• Select this option

Peacock: Enter Color Name

• My Saved Color

Peacock: Enter Color Value

• #aaaaaa

Then, the next time I want to use that, I can load the "My Saved Color" option right from Peacock.

If you need any clarifications, let me know. Hopefully I explained it clearly enough.

Allow choosing a color from another location

package.json?

editorconfig?

is this even desired?

Colorize status bar item hover background

The current colorization of the status bar includes the background and foreground. The status bar will contain several items that have hover states and most themes will set the statusBarItem.hoverBackground to something relatively close to the statusBar.background to display the interactivity of the hover state, but minimize the visual change that occurs. Currently Peacock does not set this color when the user has chosen to affect the status bar and it can result in some intense color changes on hover.

As an example, in my current Atom One Dark theme the status bar item hover background is a darker gray #2c313a. When using this in with the Angular Red coloring the difference is stark

Proposal

Leverage the tinycolor library to make either a slightly lighter or slightly darker hover state based on the color of the status bar background. When the user chooses to affect the status bar, the statusBarItem.hoverBackground would also be set to this color. With the same conditions as above that could look like:

Version Information

macOS 10.14
VS Code 1.31 stable
Peacock 0.7.0

Create CI/CD pipeline using azuredevops

dependent on testing #29

Save random colour to settings

Great extension, thanks @johnpapa 🙏

Say I generate a random colour and I really want to keep that as the new colour of the workbench, is there a way to extract what's currently selected and add that to the .vscode folder or replace any colours that are already there??

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#663399",
    "titleBar.inactiveBackground": "#663399c9"
  }
}

Proposal: Spread the Settings to make them visible in the settings panel

The settings panel could look like this:

If instead of an array, we had 3 separate configuration properties:

    "configuration": {
      "properties": {
        "peacock.affectTitleBar": {
          "type": "boolean",
          "default": true,
          "description": "Specifies whether Peacock should affect the title bar."
        },
        "peacock.affectActivityBar": {
          "type": "boolean",
          "default": false,
          "description": "Specifies whether Peacock should affect the activity bar."
        },
        "peacock.affectStatusBar": {
          "type": "boolean",
          "default": false,
          "description": "Specifies whether Peacock should affect the status bar."
        }
      }
    }

Add credits to readme

peacock name

peacock icon

Selecting a preferred color

Selecting a preferred color

• User selects Peacock: Change to a Preferred Color
• User is prompted with the list from peacock.savedColors

see #40 for second half of this

rename preference to favorite

Rename code and all commands and settings

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Remove darkForeground and lightForeground settings

The overrides for peacock.darkForeground and peacock.lightForeground seem as though they may not be useful relative to the expense of having the settings. Now that tinycolor is in use following #48, it may be better to remove the complexity/overhead of the settings and either use the values as defaults or calculate new ones based on the background luminance.

The option to keepForegroundColor as proposed in #27 is somewhat related here. As part of this effort I propose we add that flag to settings in place of these two as a means to override the default Peacock behavior. By using the keepForegroundColor the user takes matters into his or her own hands and Peacock should only adjust backgrounds.

Version Information

macOS 10.14
VS Code 1.31.1 Stable
Peacock 0.6.0

hitting ESC while entering input should not throw an error

Version Information

Version of Peacock
1.1.0

What You Expected to Happen

When selecting the "enter a color" and I hit ESC , it should not throw an error to the user

An in-range update of @types/node is breaking the build 🚨

The devDependency @types/node was updated from 11.10.6 to 11.11.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ VS Code Peacock Extension: #20190308.31 failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Add more unit tests

Goal is to make it easier to automate the tests for the release before I publish.

Customise VSCode icon per workspace

I know that this feature is very different to the ones provided by this extension, but a custom icon for each workspace would be helpful.

Does this seem even do-able?

Allow saving current color to a preferred color

save current color as a preferred color

New feature

Scenario

When you find a color you like, you can currently go to the workspace settings.json and copy the color's hex code, then create your own preferred color. This involves a few manual steps and arguably is not obvious at first.

I propose a feature to allow saving the currently set color as a preferred color, and as the user to name it.

Changes

[ ] - New command Save current color to preferred colors
[ ] - When selected, current background color is retrieved
[ ] - User is prompted to enter a name for the color
[ ] - A new preferred color is added to their user settings.json

To retrieve the color it could:

• store in memory for ease of use
• retrieve from workspace settings.json

Titlebar setting does not work

Strangely the 'titleBar' does not change colors for me. All other color options ('statusBar' and 'activityBar') work just OK. Vscode restarted (even MacOS restarted) after extension installation. Also settings.json saved for sure (can see changes when enabling 'statusBar' and 'activityBar')

setting.json:
"peacock.affectedElements": [
"titleBar",
"statusBar",
],

But only statusBar will change color with e.g. 'Peacock: color to random'.
The titlebar will stay in MacOS default color.

I tried disabling all other extersions (except Peacock) and reloading Vscode.
I tried with macOS dark and light modes.

MacOS Mojave 10.14.3
VSCode 1.31.1

Allow switching color per project in workspace

Thanks for a really great extension! It would be really nice if it could change color depending on the project you currently have a file open from.

Colors should be applied when settings are changed

When each setting changes, can we adjust Peacock to account for it? Many of these require knowing the last command executed. If we know that last command, we can adjust and re-run. Otherwise, we have to remove specific workspace settings and determine how to apply changes.

Example for reacting to config changes is here: https://github.com/Microsoft/vscode-extension-samples/blob/master/configuration-sample/src/extension.ts#L164-L185

cc @clarkio

Name Your Preferred Colors

A neat new feature would be to be able to name your preferred colors. That way you could pick "Gatsby Purple" from the list instead of the hex value.

not working - not sure what i'm doing wrong

This would be really useful to me, but I can't seem to get it to work.
I've installed the plugin and run the command to pick a random color but nothing changes.
I've tried setting it to Angular Red, Random, and some other stuff but nothing changes.
I checked my settings.json and there was no section for Peacock.
I added the following

    "peacock.affectedSettings": [
        "activityBar",
        "statusBar",
        "titleBar"
    ]

closed and re-opened. Tried again but still nothing.

What can I be doing wrong?
Is there a particular way to run the command and I'm doing it wrong?
I'm just picking it from the drop-down on the command pallet recently used list.

Platform:
Version: 1.31.1 (user setup)
Commit: 1b8e8302e405050205e69b59abb3559592bb9e60
Date: 2019-02-12T02:20:54.427Z
Electron: 3.1.2
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Windows_NT x64 10.0.17134

issues relative link throwing 404

Document where and when settings are stored or cleared.

In the readme

Preview the pre-selected color from the favorite colors pallette

How about the ability to dynamically preview the suggested favorite color from the Command Pallette?

So, as I scroll down the favorite colors, the pre-selected color is applied temporarily so that I can preview it.

On "Escape" the original color will be reverted.
On "Enter" the new one, would be applied.

That will help me differentiate between the available favorite colors. It's easy to tell apart , Blue, Yellow and Red, but not so easy on colors named Acapulco, East Bay or Quicksand.

The workflow now is to blindly apply the color, and then reopen Command Pallette to select and try a new one.

Thanks for an otherwise excellent extension!

Add tests to azure devops for it to analyze

Publish test results to devops

From https://twitter.com/divyavaishnavi/status/1104471777160290304

Tests are running in the pipeline, but I see that they aren't getting published to Azure Pipelines which provides excellent reporting capabilities that help you with easy analysis & troubleshooting for failed tests as well as Build-on-build trend/analytics.

Are these commands hard coded...

Hey @johnpapa

I remember these other commands from the early releases. Are these commands hard-coded internally, or do they come from a config in settings?

I am working on the CLI and am trying to achieve command parity

Unexpected mixed colors when user reconfigure their settings

To reproduce:

• Configure "peacock.affectedElements" with the three options (titleBar, activityBar, statusBar)
• Execute command "Peacock: Color to Random"
• Configure "peacock.affectedElements" with the two options (titleBar, activityBar)
• Execute command "Peacock: Color to Random"
  As you can see, status bar is not with default color.

Editor colours aren't reverted when uninstalling

I just applied a random colour to my editor, then uninstalled Peacock, but my editor has remained a fabulous shade of fuschia:

I tried reinstalling and calling Peacock's reset method, but that didn't work. Also, VS Code immediately restores the titleBar.* settings when deleted from my user settings, so I thought this was just my life now. Turns out I had to delete them from my workspace settings, then from my user settings.

Consider alternative name for "affectedSettings"

The "settings" are all page elements. The purpose of peacock is to change the color of workspace elements. The settings are simply the means by which peacock accomplishes this goal.

I propose that "affectedSettings" should be named "affectedElements".

// Elements that you can choose to color
"peacock.affectedElements": [
    "activityBar",
    "statusBar",
    "titleBar"
  ]

Fill out the readme

Keep original foreground colour

Could it be possible to keep the foreground colour (activity bar, titlebar and status bar) of the user theme by default?

I put background colour that doesn't fit with my theme (one dark pro) and the default white foreground colour is a bit jarring and I have to edit the config every time.

It could be an override of the default behaviour for the foreground color selection. Or change the default foreground if the contrast is too low.

Thanks

Peacock without a workspace: Allow option for colors to only affect one user and one instance

Currently the extension sets the colors in workspace settings. THis means whatever settings are in that file are then either gitignored or allowed, and then team members will also get your color. It may be desirable for many to only let the color affect one instance of vscode and for a specific user.

Allow entering known colors

1. enter a color
2. type red (or any color)
3. it dont work

hex regex needs to be updated

Refactor Tests to Reduce Complexity

Want to help make Peacock better?

I'm looking for folks to help add more test cases. Take a look at the ones I wrote and you can see how to do them.

Welcoming PRs!

Is there some way to have "Surprise me" run on VS Code startup?

Hi, great extension :)

Some option I miss is the ability to run Surprise me on whenever I start a new VS Code instance (maybe I missed it?).

So I downloaded Auto run command to run it on my own but couldn't find a way to call changeColorToRandomHandler().

Into what > "Peacock: Surprise me with a Random color" translated? peacock.changeColorToRandomHandler() doesn't work.

Thanks ahead,

Niv

Prepopulate preferred colors

The plugin is great. Preferred colors in setting is much helpful. Instead of adding color codes on my own, it would be great if pre-populate list of colors for most of the programming languages available to choose.

Since most of them are going to configure these colors on there own. Finding & adding colors manually is such a pain.

"peacock.favoriteColors": [
    { "name": "Angular", "value": "#c30e2e" },
    { "name": "Nodejs", "value": "#76ac64" },
    { "name": "React", "value": "#61dafa" },
   { "name": "Vue", "value": "#5caebf"}
  ]

Initialise peacock.affectedSettings to ['titleBar'] upon activation

As suggested by @accidentaldeveloper in #20 (comment)

I think it would be safe to initialise to

 "peacock.affectedSettings": [
    "titleBar"
  ]

within the activate function.

Adjust activity bar badge color based on background

The current colorization of the activity bar includes the background, foreground, and inactive background. The badge color that can appear over icons is still being maintained based on whatever the current theme is and is not reactive to the background color of the activity bar itself. This leads to potential usability/readability issues with the badge.

As an example, in my current Atom One Dark theme the badge color is a medium blue of #578afa. When using this in with the React Blue coloring the difference is subtle and difficult to see.

The problem gets even more noticeable if taking the extreme example where "Surprise Me" happened to land on the same color or even something close to it where the badge is effectively blended in.

Proposal

Leverage the tinycolor library to make intelligent color calculations to adjust the activity bar badge color to some form of a complementary color when the user has chosen to colorize the activity bar. The same images above with that type of logic might instead look like:

Version Information

macOS 10.14
VS Code 1.31 stable
Peacock 0.7.0

consider other colorizations

activity bar?
status bar?
none

add cli argument to open with a color

Must work across OS platforms

Must work for code and insiders versions

code --color random
code --color #ff00ff

Roadmap for v1.0.0 and removing preview label

Roadmap

• - Stabilize the menu names
• - Finalize list of affected elements
• - Add preferred colors list #44, #42
• - Ensure test scenarios are complete for most use cases
• - Fill in any gaps in the Readme/docs #1
• - Add the ability to retain your theme's foreground color #27
• - Colorize status bar item hover background #60
• - Adjust activity bar badge color based on background #58
• - Refactor tests to reduce compelixty #46
• - Add CI process on multiple OS platforms #30
• - Add guidelines for what Peacock should affect to the Readme #59
• - Remove "preview" label

Guidelines for what Peacock should affect

Peacock affects titlebar, activitybar, and statusbar background and foreground colors. When combined with themes this may have unintended consequences such as notied in #58

I think it is important to outline what Peacock is intended to affect and what it should not affect. I'm proposing a section tin the README.md that addresses this.

Proposal of What Peacock Should Affect

• only the elements for the titlebar, activitybar, and statusbar (aka peacock elements)
• anything regarding the readability of these elements
• background and foreground colors
• any elements that are displayed within these peacock elements (e.g. badges)

If there are further thoughts, please add them here. If someone wants to make a PR at the bottom of the README file for this , please do so.

Peacock commands have no effect on workspace

I'm trying out peacock but it does not work on my machine.

Running any peacock command adds the following line to my settings.json:

"workbench.colorCustomizations": {},

Version: 1.31.1 (user setup)
Commit: 1b8e8302e405050205e69b59abb3559592bb9e60
Date: 2019-02-12T02:20:54.427Z
Electron: 3.1.2
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Windows_NT x64 10.0.17763

Feature Request: Automatically assign random color to new instances

Hey John, first off, great extension :)

I know that you can already assign a default color per repo that gets stored in the .vscode/settings.json file, but that's not ideal for a few reasons:

• I have 30+ repos and don't want to have to try and assign them each a unique color.
• I typically prefer my theme's default color, and really only want a different color when I have more than one instance open.
• For shared repos, many people don't like committing the .vscode/settings.json file as it often contains personal settings that not all users agree upon.

Because of this, it would be great if the extension was able to automatically detect if it's the only instance open or not. If it's the only one, then it doesn't do anything, but for each subsequent instance that's opened it would auto-assign a different color to the window when it's opened. Picking a random color for each subsequent instance would probably be easiest, but bonus points if there was a setting to specify a list of preferred colors that it picked from. Even more bonus points if you were able to actually specify 2nd instance is always color X, 3rd window is always color Y, 4th window is always color Z, etc.

Add one or (some) peacock commands to modify the "affectedSettings"

I think we can add one or a few peacock commands to let the user specify which settings to affect.

Peacock: Affect Title Bar [Yes/No]
Peacock: Affect Status Bar [Yes/No]
Peacock: Affect Activity Bar [Yes/No]

Example:

then:

or maybe something like this?

create menu option to clear out the settings

Create and choose an icon

Color Palette

A new feature could be a setting where one could define an array of colors that go well with a theme. E.g. with my 🦄 Shades of Purple theme I'd use different shades of purple, yellow, and pink. Choosing that option would choose a color from that predefined array of colors.

Option: Random from the Color Palette

Setting:

"peacock.colorPalette": [
		"mediumpurple",
		"slateblue",
		"mediumslateblue",
		"#BADA55"
	],

Looking forward, peace! ✌️

Rename commands to be more easily findable

the names should be easier to find.

what should the commands say?