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#051336
  • badge.background#0063a5
  • button.background#2B3C5D
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#051336
  • diffEditor.insertedTextBackground#31958A55
  • diffEditor.removedTextBackground#892F4688
  • dropdown.background#181f2f
  • editor.background#000c18
  • editor.findMatchHighlightBackground#eeeeee44
  • editor.foreground#6688cc
  • editor.lineHighlightBackground#082050
  • editor.selectionBackground#770811
  • editorCursor.foreground#ddbb88
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#1c1c2a
  • editorHoverWidget.background#000c38
  • editorHoverWidget.border#004c18
  • editorIndentGuide.activeBackground1#204972
  • editorIndentGuide.background1#002952
  • editorLineNumber.activeForeground#80a2c2
  • editorLineNumber.foreground#406385
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorWhitespace.foreground#103050
  • editorWidget.background#262641
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#5f8b3bbb
  • focusBorder#596F99
  • input.background#181f2f
  • inputOption.activeBorder#1D4A87
  • inputValidation.errorBackground#A22D44
  • inputValidation.errorBorder#AB395B
  • inputValidation.infoBackground#051336
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5B7E7A
  • inputValidation.warningBorder#5B7E7A
  • list.activeSelectionBackground#08286b
  • list.dropBackground#041D52
  • list.highlightForeground#0063a5
  • list.hoverBackground#061940
  • list.inactiveSelectionBackground#152037
  • minimap.selectionHighlight#7500007d
  • panel.border#2b2b4a
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#eeeeee33
  • peekViewResult.background#060621
  • peekViewResult.matchHighlightBackground#eeeeee44
  • peekViewTitle.background#10192c
  • pickerGroup.border#596F99
  • pickerGroup.foreground#596F99
  • ports.iconRunningProcessForeground#80a2c2
  • progressBar.background#0063a5
  • quickInputList.focusBackground#08286b
  • scrollbar.shadow#515E91AA
  • scrollbarSlider.activeBackground#3B3F5188
  • scrollbarSlider.background#1F2230AA
  • scrollbarSlider.hoverBackground#3B3F5188
  • sideBar.background#060621
  • sideBarSectionHeader.background#10192c
  • statusBar.background#10192c
  • statusBar.debuggingBackground#10192c
  • statusBar.noFolderBackground#10192c
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • statusBarItem.remoteBackground#0063a5
  • tab.border#2b2b4a
  • tab.inactiveBackground#10192c
  • tab.lastPinnedBorder#2b3c5d
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#bbdaff
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#80baff
  • terminal.ansiBrightCyan#78ffff
  • terminal.ansiBrightGreen#b8f171
  • terminal.ansiBrightMagenta#d778ff
  • terminal.ansiBrightRed#ff7882
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe580
  • terminal.ansiCyan#99ffff
  • terminal.ansiGreen#d1f1a9
  • terminal.ansiMagenta#ebbbff
  • terminal.ansiRed#ff9da4
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffeead
  • titleBar.activeBackground#10192c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#6688cc—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#6688cc—
comment#384887—
string#22aa44—
constant.numeric#f280d0—
constant.language#f280d0—
constant.character, constant.other#f280d0—
variable#6688CC
keyword.type#225588—
keyword.control.flow#225588—
keyword.control.conditional#225588—
keyword.operator#225588—
keyword.other#225588—
keyword.other.unit.hexadecimal#F280D0—
keyword.control.directive#9966b8—
meta.preprocessor#225588—
keyword.control.loop#225588—
keyword.control.flow.break#9966b8—
keyword.control.flow.continue#9966b8—
keyword.control.while#225588—
keyword.control.if#225588—
keyword.control.else#225588—
keyword.control.for#225588—
keyword.control.switch#225588—
keyword.control.case#225588—
keyword.control.return#225588—
keyword.control.break#9966b8—
keyword.control.goto#9966b8—
keyword.control.continue#9966b8—
keyword.cpp.unity#225588—
keyword.control.unity#225588—
constant.language.boolean.true#00b700—
constant.language.true#00b700—
constant.language.false#aa0000—
constant.language.boolean.false#aa0000—
storage.modifier#225588—
storage.type#225588italic
storage#225588
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#ffeebbunderline
entity.name.type.struct#ffeebbunderline
entity.other.inherited-class#ddbb88italic underline
entity.name.function#ddbb88
entity.name.function.preprocessor#225588
variable.parameter#2277ffitalic
entity.name.tag#225588
entity.other.attribute-name#ddbb88
support.function#ddbb88
support.constant#9966b8
support.type, support.class#9966b8italic
support.other.variable—
invalid#A22D44
invalid.deprecated#A22D44—
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186—
markup.quote#22aa44—
markup.bold, markup.italic#22aa44—
markup.bold—bold
markup.italic—italic
markup.strikethrough—strikethrough
markup.inline.raw#9966b8
markup.heading, markup.heading.setext#6688ccbold
keyword.control.assembly#225588—