VS Code User Settings for Pop!_OS UI Theme

README.md

VS Code Pop!_UI Color Theme

Have you seen Pop!_OS by System76? It's gorgeous.

Electrifying teals and scintillating tangerines pop against dark chocolate-grey windows and menus. Adding these customizations to 'User Settings' will allows you to enjoy the Pop!_OS UI color theme, and still be able to swap in your favourite syntax highlighting theme for improved readability and visual lexing.

Installation

1. Open VS Code 'User Settings' File > Preferences > Settings.
2. Copy the contents of vscode-color-settings.json into "workbench.colorCustomizations".
3. Save your changes.

Enjoy!

vscode-color-settings.json

{
    "workbench.colorCustomizations": {
        "editor.background": "#4d4643",
        "editor.foreground": "#d4d4d4",
        "activityBar.background": "#272321",
        "activityBar.foreground": "#d4d4d4",
        "activityBarBadge.background": "#009688",
        "sideBarTitle.foreground": "#bbbbbb",
        "sideBar.background": "#443d3a",
        "sideBarSectionHeader.foreground": "#faa41a",
        "sideBarSectionHeader.background": "#272321",
        "diffEditor.insertedTextBackground": "#6072db",
        "list.hoverBackground": "#009688",
        "list.activeSelectionBackground": "#ffa41a44",
        "list.inactiveSelectionBackground": "#ffa31a1a",
        "list.focusBackground": "#009688",
        "statusBar.background": "#009688",
        "statusBar.foreground": "#ebffff",
        "statusBar.border": "#00000000",
        "button.background": "#009688",
        "statusBar.noFolderBackground": "#607D8B",
        "textLink.foreground": "#faa41a",
        "editorBracketMatch.background": "#362d29",
        "editorBracketMatch.border": "#009688",
        "editorCursor.foreground": "#faa41a",
        "editor.lineHighlightBorder": "#66666685",
        "editor.findMatchBackground": "#02b8a585",
        "editor.wordHighlightBackground": "#02b8a585",
        "editor.wordHighlightStrongBackground": "#02b8a585",
        "editor.selectionBackground": "#02b8a567",
        "editor.hoverHighlightBackground": "#faa41a7e",
        "editor.lineHighlightBackground": "#443d3a",
        "editor.selectionHighlightBackground": "#faa41a67",
        "inputOption.activeBorder": "#02b8a5",
        "editorGroupHeader.tabsBackground": "#443d3a",
        "editorGroup.background": "#443d3a",
        "editorGroup.border": "#443d3a",
        "editorGroupHeader.noTabsBackground": "#443d3a",
        "editorGroupHeader.tabsBorder": "#443d3a",
        "editorWidget.background": "#443d3a",
        "editorWidget.border": "#009688",
        "input.background": "#272321",
        "editorError.foreground": "#ec4f42",
        "editorWarning.foreground": "#8bc34a",
        "editorInfo.foreground": "#03a9f4",
        "editorHint.foreground": "#9c27b0",        
        "tab.border": "#00000000",
        "tab.activeBackground": "#574f4c",
        "tab.activeForeground": "#ffffff",
        "tab.activeBorder": "#009688",
        "tab.inactiveForeground": "#bebebe",
        "tab.inactiveBackground": "#443d3a",
        "panelTitle.activeForeground": "#ffa41a",
        "panelTitle.inactiveForeground": "#bebebe",
        "terminal.selectionBackground": "#00968833",
        "panel.background": "#4b4441",
        "editorLineNumber.foreground": "#bebebe",
        "dropdown.background": "#383737",
        "dropdown.foreground": "#bebebe",
        "focusBorder": "#00000000",
        "scrollbarSlider.activeBackground": "#009688",
        "scrollbarSlider.hoverBackground": "#00968880",
        "scrollbarSlider.background": "#00968840",
        "badge.background": "#faa41a",
        "badge.foreground": "#443d3a",
        "gitDecoration.modifiedResourceForeground": "#ffa41a",
    },