Collection of custom tweaks

lonix1 commented 2 years ago

Is there a collection / gist / awesome list / whatever of people's customisations using this extension?

I'm sure many of us are customising vscode in the same way, so would be useful to pool such tweaks in a common place. Does such a collection exist?

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 15 days.

cloorc commented 1 year ago

Let's start a new gist about this: https://gist.github.com/cloorc/d2882523def38ce1ca3752b09e4e8fb2

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 15 days.

trusktr commented 1 year ago

This thread will be great for some notes. I also made a CSS Themes thread where we can paste our themes.

## Tabs

Styling tabs is rather annoying. After I installed Monokai Pro theme, here's what my tabs look like: ![Screen_Recording_2023-02-24_at_7_32_10_PM_AdobeExpress](https://user-images.githubusercontent.com/297678/221334079-c6355a46-1760-402e-955e-4135455c31f6.gif) With this CSS: ```css /** TABS */ /* Make hovered non-active tabs' backgrounds get slightly lighter on hover. */ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover, .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover { background-color: rgba(255, 255, 255, 0.04) !important; } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab { border-top-left-radius: 10px; border-top-right-radius: 10px; } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:first-child { border-top-left-radius: 0; } /* Actually make the selected tab's background different than others. */ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active { background-color: rgba(255, 255, 255, 0.06) !important; } /* Make hovered active tab's background get slightly lighter on hover. */ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover, .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* Ensure that a selected Tab's bottom-border stays the same color when we hover * on it (it was going from yellow accent color to gray, super ugly). */ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container { /** We added "!important" (And we needed !important everywhere else too, what the heck) */ background-color: var(--tab-border-bottom-color) !important; } ```

## Cursor

The cursor can be found in a div with class `cursors-layer`, and the cursor itself has class `cursor`: Screenshot 2023-02-24 at 7 35 13 PM

```css .monaco-editor .cursors-layer .cursor { background-color: deeppink; border-color: deeppink; } ``` If you're using VS Code Vim, you can style its fake cursors (f.e. the one used in VISUAL selection mode) like so: Screenshot 2023-02-24 at 7 36 49 PM

```css /** This highlights the fake cursors (f.e. on visual select) as well as the momentary highlight of yanked text. */ [class*="ced-1-TextEditorDecorationType"] { background-color: deeppink; border-color: deeppink; } ``` VS Code uses a lot of `!important`. To override some things like color, you'll need to use a specific-enough selector, and `!important` as well: ```css .vs-dark.monaco-editor [class*="ced-1-TextEditorDecorationType"] { color: white !important; } ```