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#1c1c1c
  • activityBar.border#2c2e30
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#ffcc00
  • activityBarBadge.foreground#1b1d1f
  • dropdown.background#1c1c1c
  • dropdown.border#2c2e30
  • dropdown.foreground#e0e0e0
  • editor.background#1b1d1f
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#2a2c2e
  • editor.selectionBackground#3e3e3e50
  • editorBracketMatch.background#3e3e3e50
  • editorBracketMatch.border#ffcc00
  • editorCursor.foreground#ffcc00
  • editorGroupHeader.border#2c2e30
  • editorGroupHeader.noTabsBackground#1b1d1f
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorHoverWidget.background#1c1c1c
  • editorHoverWidget.border#2c2e30
  • editorIndentGuide.background#2c2e30
  • editorLineHighlightBorder#3e3e3e50
  • editorLineNumber.activeForeground#e0e0e0
  • editorLineNumber.foreground#757575
  • editorOverviewRuler.background#1b1d1f
  • editorOverviewRuler.border#2c2e30
  • editorOverviewRuler.currentContentForeground#ffcc00
  • editorOverviewRuler.incomingContentForeground#6a8759
  • editorOverviewRuler.modifiedForeground#ffc66d
  • editorSuggestWidget.background#1c1c1c
  • editorSuggestWidget.foreground#e0e0e0
  • editorSuggestWidget.highlightForeground#ffcc00
  • editorSuggestWidget.selectedBackground#3e3e3e50
  • editorWidget.background#1c1c1c
  • editorWidget.border#2c2e30
  • menu.background#1c1c1c
  • menu.foreground#e0e0e0
  • menu.selectionBackground#3e3e3e80
  • menu.selectionForeground#e0e0e0
  • menu.separatorBackground#3e3e3e50
  • minimap.background#1b1d1f
  • panel.background#1c1c1c
  • panel.border#2c2e30
  • panelTitle.activeBorder#ffcc00
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#757575
  • pickerGroup.border#3e3e3e50
  • pickerGroup.foreground#ffcc00
  • quickInput.background#1c1c1c
  • quickInput.foreground#e0e0e0
  • quickInputList.focusBackground#3e3e3e50
  • quickInputTitle.background#1b1d1f
  • scrollbarSlider.activeBackground#3e3e3eff
  • scrollbarSlider.background#3e3e3e80
  • scrollbarSlider.hoverBackground#3e3e3eaa
  • sideBar.background#1c1c1c
  • sideBar.border#2c2e30
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#1b1d1f
  • sideBarSectionHeader.foreground#ffcc00
  • sideBarTitle.foreground#ffcc00
  • statusBar.background#18191a
  • statusBar.debuggingBackground#2a2c2e
  • statusBar.debuggingForeground#e0e0e0
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#1c1c1c
  • tab.activeBackground#2a2c2e
  • tab.activeBorder#ffcc00
  • tab.activeForeground#e0e0e0
  • tab.border#2c2e30
  • tab.hoverBackground#2c2e30
  • tab.hoverForeground#e0e0e0
  • tab.inactiveBackground#1c1c1c
  • tab.inactiveForeground#757575
  • terminal.ansiBlack#1c1c1c
  • terminal.ansiBlue#6889ff
  • terminal.ansiBrightBlack#757575
  • terminal.ansiBrightBlue#83bfff
  • terminal.ansiBrightCyan#78dce8
  • terminal.ansiBrightGreen#98d986
  • terminal.ansiBrightMagenta#c58fff
  • terminal.ansiBrightRed#ff9e64
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd966
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#6a8759
  • terminal.ansiMagenta#9876aa
  • terminal.ansiRed#cc7832
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#ffcc00
  • terminal.background#1b1d1f
  • terminal.foreground#e0e0e0
  • terminalCursor.foreground#ffcc00
  • titleBar.activeBackground#1c1c1c
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#18191a
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7c7c7citalic
keyword, storage.type, storage.modifier, keyword.control#cc7832bold
variable#a9b7c6
string#6a8759
function, entity.name.function, meta.function-call, variable.function#ffc66d
class, support.class, support.type, entity.name.type#9876aa
constant.numeric, constant.language#ffcc00
operator, punctuation#e0e0e0
tag, entity.name.tag#cc7832
entity.other.attribute-name, support.type.property-name, attribute-name#56b6c2
meta.brace#e0e0e0
markup.bold, markup.italic, markup.underline, markup.quote#a9b7c6bold
invalid, invalid.illegal#cc7832
text#e0e0e0