Monaco Editors Visual Update Guide

This is a series of CSS updates to Monaco-based editors (VSCode, Cursor, etc.) that aims to modernise and improve UX, adding rounded curves, blurred backgrounds and the sort.

• Monaco Editors Visual Update Guide
  • Instructions
    • Before we start
    • styles.css
    • Install the Custom UI Style extension
    • Install a theme of your choice
    • Point to the styles.css location on the settings.json file
    • Add more options to settings.json
    • Customize the editor's color theme and visual elements by adding these settings
    • (Optional) Create keyboard shortcuts to speed iterations
  • Contributing

Instructions

Before we start

I highly recommend watching this video first to understand the general directions:

styles.css

Use the provided styles.css as a starting point and put it somewhere (I put on the IDE's settings location, but anywhere should work)

Install the Custom UI Style extension

On the the video Glenn uses another extension. This is fine, but Custom UI Style allows us to disable certain Electron features, such as the title bar, completely.

Install a theme of your choice

I use the Min Theme one, and you'll see that all my settings are configured to work with it. For your theme, you'll have to adapt the values accordingly.

Point to the styles.css location on the settings.json file

"custom-ui-style.external.imports": [
  "file://C:/Users/<user>/point/to/the/location/of/styles.css"
],

Tip

You'll have to use the protocol file:// to point to the file on the disk

Add more options to settings.json

/* Option to customise the UI's font (I use the Barlow font) */
"custom-ui-style.font.sansSerif": "Barlow",

/* These ones hide the title bar */
"window.titleBarStyle": "native",
"custom-ui-style.electron": { 
  "frame": false, 
  "titleBarStyle": "hidden" 
},

/* Custom UI Style extension specific to restart the IDE when changing configs */
"custom-ui-style.preferRestart": true,
"custom-ui-style.reloadWithoutPrompting": true,

Customize the editor's color theme and visual elements by adding these settings

"workbench.colorTheme": "Min Dark",
"workbench.colorCustomizations": {

  /* Both of these are of Cursor, use the corresponding one to VSCode */
  "editorCursor.background": "#000",
  "editorCursor.foreground": "#f18a62",
  "editor.linkedEditingBackground": "#00000000",
  "editor.wordHighlightBackground": "#00000000",
  "editor.wordHighlightTextBackground": "#00000000",

  /* Notice that all of these use my accent colour of choise (orange) and just adjust the opacity throught the last 2 digits */
  "editor.selectionBackground": "#f18a6224",
  "editor.selectionHighlightBackground": "#f18a6224",
  "settings.modifiedItemIndicator": "#f18a62",
  "editor.wordHighlightStrongBorder": "#00000000",
  "editor.wordHighlightStrongBackground": "#f18a6224",
  "editor.hoverHighlightBackground": "#f18a6224",
  "editor.foldBackground": "#f18a6224",
  "editor.findMatchBorder": "#f18a62",
  "editor.findMatchForeground": "#f18a62",
  "editor.findMatchHighlightForeground": "#f18a62",
  "editor.findMatchBackground": "#f18a6212",
  "editor.findMatchHighlightBackground": "#f18a6212",
  "editor.rangeHighlightBackground": "#f18a6212",
  "editor.findMatchHighlightBorder": "#f18a6224",
  "editor.rangeHighlightBorder": "#f18a6224",

  /* 
  These settings adjust some lists, I may have duplicated them in the CSS
  file. 
  */
  "editorIndentGuide.background1": "#1f1f1f",
  "editorIndentGuide.activeBackground1": "#545454",
  "editorActionList.focusBackground": "#bcbbbc",
  "list.focusBackground": "#bcbbbc",
  "list.focusForeground": "#000",
  "quickInputList.focusBackground": "#bcbbbc",
  "quickInputList.focusForeground": "#000",
  "settings.focusedRowBackground": "#bcbbbc",
}

Note

These settings are optimized for the Min Dark theme. If using a different theme, adjust the color values accordingly.

(Optional) Create keyboard shortcuts to speed iterations

I use a couple of hotkeys to speed my workflow when adjusting these settings. You can configure these both through the Preferences: Open Keyboard Shortcuts command or in the keybindings.json file through Preferences: Open Keyboard Shortcuts (JSON)

1. Reloading Custom UI Style: Ctrl+Alt+R

{
  "command": "custom-ui-style.reload",
  "key": "ctrl+alt+r"
},

2. Toggle Developer Tools: Ctrl+Alt+F12

{
  "key": "ctrl+alt+f12",
  "command": "workbench.action.toggleDevTools"
},

3. Open Settings JSON: Ctrl+Alt+,

{
  "command": "workbench.action.openSettingsJson",
  "key": "ctrl+alt+,"
},

Contributing

Feel free to open issues or pull requests with additional settings or improvements. When contributing:

• Keep settings organized by category
• Include comments explaining the purpose of each setting