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#101824
  • activityBar.foreground#9aa6c2
  • activityBar.inactiveForeground#6c7a92CC
  • activityBarBadge.background#89d900
  • activityBarBadge.foreground#101824
  • badge.background#e63636
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#89d900
  • breadcrumb.background#161f2d
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#9aa6c2
  • button.background#89d900
  • button.foreground#101824
  • button.hoverBackground#9ee01d
  • charts.blue#0039cc
  • charts.foreground#9aa6c2
  • charts.lines#9aa6c2
  • charts.red#e63636
  • checkbox.background#161f2d
  • checkbox.border#2b3749
  • checkbox.foreground#89d900
  • debugIcon.breakpointCurrentStackframeForeground#e6b14c
  • debugIcon.breakpointStackframeForeground#0039cc99
  • debugIcon.continueForeground#89d900
  • debugIcon.disconnectForeground#e63636
  • debugIcon.pauseForeground#89d900
  • debugToolBar.background#161f2d
  • debugToolBar.border#2b3749
  • dropdown.background#161f2d
  • dropdown.foreground#9aa6c2
  • dropdown.listBackground#101824
  • editor.background#101824
  • editor.foreground#9aa6c2
  • editor.lineHighlightBackground#161f2d40
  • editor.lineHighlightBorder#2b3749
  • editor.selectionBackground#6c7a928C
  • editor.selectionForeground#ffffff
  • editorGroupHeader.border#2b3749
  • editorGroupHeader.tabsBackground#101824
  • editorGutter.addedBackground#89d900
  • editorGutter.deletedBackground#e63636
  • editorHoverWidget.background#161f2d
  • editorHoverWidget.border#2b3749
  • editorHoverWidget.foreground#9aa6c2
  • editorLineNumber.activeForeground#89d900
  • editorLineNumber.foreground#2b3749
  • editorWidget.background#161f2d
  • editorWidget.border#2b3749
  • errorForeground#e63636
  • focusBorder#89d900
  • icon.foreground#9aa6c2
  • input.background#101824
  • input.border#2b3749
  • input.foreground#ffffff
  • input.placeholderForeground#9aa6c2
  • inputOption.activeBackground#2b3749
  • inputOption.activeForeground#9aa6c2
  • inputValidation.errorBackground#e63636AA
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#0039ccAA
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#e39d00AA
  • inputValidation.warningForeground#ffffff
  • list.activeSelectionBackground#6c7a928C
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#2b3749
  • list.inactiveSelectionBackground#161f2d55
  • menu.background#161f2d
  • menu.foreground#9aa6c2
  • menu.selectionBackground#6c7a928C
  • menu.selectionForeground#ffffff
  • minimapSlider.background#2b374977
  • minimapSlider.hoverBackground#6c7a928C
  • panel.background#161f2d
  • panel.border#2b3749
  • peekView.border#161f2d
  • peekViewEditor.background#101824
  • peekViewResult.background#161f2d
  • peekViewResult.matchHighlightBackground#6c7a96AA
  • scrollbarSlider.activeBackground#9aa6c2AA
  • scrollbarSlider.background#2b374977
  • scrollbarSlider.hoverBackground#6c7a92CC
  • sideBar.background#101824
  • sideBar.border#2b3749
  • statusBar.background#0e1621
  • statusBar.foreground#9aa6c2
  • statusBarItem.activeBackground#6c7a92
  • statusBarItem.hoverBackground#2b3749
  • tab.activeBackground#101824
  • tab.activeForeground#9aa6c2
  • tab.border#2b3749
  • tab.inactiveBackground#161f2d
  • tab.inactiveForeground#6c7a92
  • terminal.ansiBlack#101824
  • terminal.ansiBlue#5CB2FF
  • terminal.ansiBrightBlack#2b3749
  • terminal.ansiBrightBlue#6FC9FF
  • terminal.ansiBrightCyan#5CECC6
  • terminal.ansiBrightGreen#9EE01D
  • terminal.ansiBrightMagenta#CF8DFB
  • terminal.ansiBrightRed#FF8484
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCC5C
  • terminal.ansiCyan#5CECC6
  • terminal.ansiGreen#89d900
  • terminal.ansiMagenta#CF8DFB
  • terminal.ansiRed#e63636
  • terminal.ansiWhite#9aa6c2
  • terminal.ansiYellow#e39d00
  • terminal.background#101824
  • terminal.foreground#9aa6c2
  • terminal.selectionBackground#6c7a928C
  • terminalCursor.background#101824
  • terminalCursor.foreground#89d900
  • titleBar.activeBackground#0e1621
  • titleBar.activeForeground#9aa6c2
  • titleBar.inactiveBackground#101824
  • titleBar.inactiveForeground#6c7a92CC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#D7E4FF46italic
variable, string constant.other.placeholder#A4B1CDitalic
string constant.other.placeholder#C5D1EBitalic
constant.other.color#FFFFFFbold
invalid, invalid.illegal#FF8484bold
keyword, storage.type, storage.modifier#FF8484bold
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#5CECC6italic
keyword.control#CF8DFBbold
entity.name.tag, meta.tag.sgml#FF8484bold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFCC5Citalic
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#5CB2FFitalic
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#C5F467italic
variable.language#FF8484italic
entity.name.method.js#5CB2FFitalic
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCC5Citalic
markup.bold, markup.bold string#ff009dbold
markup.italic#FF8484italic
markup.underline#FF8484underline
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#FF8484bold italic
markup.quote punctuation.definition.blockquote.markdown#1A2332italic
string.other.link.title.markdown#5CB2FFitalic
string.other.link.description.title.markdown#CF8DFBitalic
constant.other.reference.link.markdown#5CB2FFitalic
markup.raw.block#CF8DFBitalic
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#A4B1CD
variable.language.fenced.markdown#313F55
meta.separator#313F55bold
markup.table#A4B1CD
string.quoted.double.json, string.quoted.single.json, meta.structure.dictionary.json#5CB2FF
token.info-token#5CB2FF
token.warn-token#FFCC5C
token.error-token#FF8484
token.debug-token#CF8DFB