CODEWITHSUNDEEP
cssvisual-studio-codeatom-editorvscode-extensions
Maxime Lefebvre
Maxime Lefebvre

Reputation: 35

Visual Studio Code(vscode): Change command palette to look like Atom's one?

I was wondering if there's something in the extension's API of vscode that can make the command palette looks like the one from Atom ?

I like the way Atom open it in the middle of the screen and the style of it.

Can we apply a custom CSS sheet in an extension or do something to achieve that?

Upvotes: 3

Views: 1960

Answers (3)

vincent
vincent

Reputation: 46

screenshot

I am immensely grateful for the discussions surrounding iocave.customize-ui. In the end, I created a small tool that aligns with my personal expectations, and it's still working with vscode 1.83.0. The visual style is as shown in the screenshot. Here is my gist link.

Upvotes: 0

Tomasch
Tomasch

Reputation: 131

I've had this question, too.

I've tried VS Code a number of times, but I really didn't like how the Command Palette looks. It's all squished up with no padding and… ugh!

So, I spent some time looking into this, and I finally found a way to hack the VS Code command palette to look more like Atom.

Here is how my command palette looks now: Hacked Together VS Code Command Palette to look (more) like Atom.

These are the steps I took:

  1. Install Monkey Patch
  2. Install Customize UI
  3. Add the following declarations to your settings.json (customize as you see fit):

    "customizeUI.stylesheet": {
        ".quick-input-widget": "width: 650px; margin-left: -325px;important;top:50px !important; padding:15px !important;background-color:rgb(41 46 53)!important;border-radius:10px!important;",
        ".quick-input-widget .quick-input-header": "padding:0px!important;margin-bottom:10px;",
        ".quick-input-widget .monaco-inputbox": "padding:10px !important;border-radius:5px!important;",
        ".quick-input-widget .monaco-list-rows": "top: 0 !important;max-height:670px;min-height:300px;",
        ".quick-input-widget .monaco-list-row": "position:static!important;border-bottom: 1px solid #333942;padding:5px!important;height:auto!important;",
        ".quick-input-widget .quick-input-list-entry": "position:relative;padding:0 5px 0px 15px;",
        ".quick-input-widget .quick-input-list-entry .codicon[class*=codicon-]": "font-size:12px;",
        ".quick-input-widget .quick-input-list-entry .monaco-action-bar": "position:absolute;left:0;",
        // ".quick-input-widget .quick-input-list-entry .quick-input-list-label": "max-width: 80%;",
        ".quick-input-widget .quick-input-list .quick-input-list-entry.quick-input-list-separator-border": "border-top-width:0px!important;"
    },

It doesn't match Atom exactly:

  • The main problem with this method is keyboard scrolling is wonky. The "end" of the command palette list ends up beyond the overflow limit of the containing div. As such, when you arrow down, you have to keep arrowing-down PAST the end of the visible div in order to get the list to move. I can live with this. Someone else smarter at hacking VS Code might be able to figure this out.

  • Atom dims the rest of the screen when you invoke the command palette. I don't see a way to do this right now. It might be possible using Money Patch to add some custom javascript (adding a class or a pseudo element) which would allow this to happen but I'm not going to try.

There might be other problems, but for now — this seems to work well enough!

Edit: text for clarity.

Upvotes: 7

Benjamin Pasero
Benjamin Pasero

Reputation: 123744

This is currently neither possible, nor planned, neither from an extension nor from within configuration settings.

I suggest to open issues on the command palette VS Code has to improve it if needed (https://github.com/Microsoft/vscode/).

Upvotes: 0

Related Questions