Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#161b22
  • activityBar.border#21262d
  • activityBar.foreground#c9d1d9
  • activityBarBadge.background#58a6ff
  • activityBarBadge.foreground#0d1117
  • dropdown.background#161b22
  • dropdown.border#21262d
  • dropdown.foreground#c9d1d9
  • editor.background#0d1117
  • editor.foreground#c9d1d9
  • editor.lineHighlightBackground#161b22
  • editor.selectionBackground#30363d50
  • editor.selectionHighlightBackground#30363d50
  • editorBracketMatch.background#30363d50
  • editorBracketMatch.border#58a6ff
  • editorCursor.foreground#58a6ff
  • editorGroupHeader.border#21262d
  • editorGroupHeader.noTabsBackground#0d1117
  • editorGroupHeader.tabsBackground#161b22
  • editorHoverWidget.background#161b22
  • editorHoverWidget.border#21262d
  • editorLineNumber.activeForeground#c9d1d9
  • editorLineNumber.foreground#8b949e
  • editorSuggestWidget.background#161b22
  • editorSuggestWidget.foreground#c9d1d9
  • editorSuggestWidget.highlightForeground#58a6ff
  • editorSuggestWidget.selectedBackground#30363d50
  • editorWidget.background#161b22
  • editorWidget.border#21262d
  • menu.background#161b22
  • menu.foreground#c9d1d9
  • menu.selectionBackground#30363d80
  • menu.selectionForeground#c9d1d9
  • menu.separatorBackground#30363d50
  • minimap.background#0d1117
  • panel.background#161b22
  • panel.border#21262d
  • panelTitle.activeBorder#58a6ff
  • panelTitle.activeForeground#c9d1d9
  • panelTitle.inactiveForeground#8b949e
  • pickerGroup.border#30363d50
  • pickerGroup.foreground#58a6ff
  • quickInput.background#161b22
  • quickInput.foreground#c9d1d9
  • quickInputList.focusBackground#30363d50
  • quickInputTitle.background#0d1117
  • scrollbarSlider.activeBackground#30363dff
  • scrollbarSlider.background#30363d80
  • scrollbarSlider.hoverBackground#30363daa
  • sideBar.background#161b22
  • sideBar.border#21262d
  • sideBar.foreground#c9d1d9
  • sideBarSectionHeader.background#0d1117
  • sideBarTitle.foreground#58a6ff
  • statusBar.background#161b22
  • statusBar.debuggingBackground#30363d
  • statusBar.debuggingForeground#c9d1d9
  • statusBar.foreground#c9d1d9
  • statusBar.noFolderBackground#0d1117
  • tab.activeBackground#0d1117
  • tab.activeBorder#58a6ff
  • tab.activeForeground#c9d1d9
  • tab.border#21262d
  • tab.hoverBackground#161b22
  • tab.hoverForeground#c9d1d9
  • tab.inactiveBackground#161b22
  • tab.inactiveForeground#8b949e
  • terminal.ansiBlack#161b22
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#8b949e
  • terminal.ansiBrightBlue#58a6ff
  • terminal.ansiBrightCyan#39c5cf
  • terminal.ansiBrightGreen#3fb950
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ff7b72
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#d2a8ff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#c9d1d9
  • terminal.ansiYellow#e3b341
  • terminal.background#0d1117
  • terminal.foreground#c9d1d9
  • terminalCursor.foreground#58a6ff
  • titleBar.activeBackground#161b22
  • titleBar.activeForeground#c9d1d9
  • titleBar.inactiveBackground#0d1117
  • titleBar.inactiveForeground#8b949e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8b949eitalic
keyword, storage.type, storage.modifier, keyword.control#ff7b72bold
variable#adbac7
string#a5d6ff
function, entity.name.function, meta.function-call, variable.function#79c0ff
class, support.class, support.type, entity.name.type#d2a8ff
constant.numeric, constant.language#e3b341
operator, punctuation#58a6ff
tag, entity.name.tag#f85149
entity.other.attribute-name, support.type.property-name, attribute-name#79c0ff
meta.brace#58a6ff
markup.bold, markup.italic, markup.underline, markup.quote#adbac7bold
invalid, invalid.illegal#ff7b72
text#c9d1d9