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#262a34
  • activityBar.border#181a1f
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4b76cc
  • activityBarBadge.foreground#ffffff
  • badge.background#4b76cc
  • badge.foreground#ffffff
  • button.background#528bff
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#262a34
  • editor.findMatchBackground#00ffff4b
  • editor.findMatchHighlightBackground#00ffff26
  • editor.lineHighlightBackground#28303e
  • editor.selectionBackground#323e56
  • editorBracketMatch.background#435656
  • editorBracketMatch.border#435656
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.border#181a1f
  • editorGroup.emptyBackground#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.background#323740
  • editorLineNumber.activeForeground#9ea3ad
  • editorLineNumber.foreground#636d83
  • editorRuler.foreground#3c4049
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3c4049
  • editorWidget.background#21252b
  • gitDecoration.ignoredResourceForeground#777777
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.filterMatchBackground#2d3d58
  • list.filterMatchBorder#4f75c2
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • listFilterWidget.background#4b76cc
  • listFilterWidget.noMatchesOutline#ef4038
  • menu.background#262a34
  • menu.foreground#bbbbbb
  • menu.selectionBackground#2f3440
  • menu.selectionForeground#cccccc
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#9da5b4
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#20232b
  • sideBar.border#181a1f
  • sideBar.foreground#bbbbbb
  • sideBarSectionHeader.background#2f3440
  • sideBarSectionHeader.foreground#bbbbbb
  • statusBar.background#21252b
  • statusBar.debuggingBackground#21252b
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2f3440
  • tab.activeBorder#1880b3
  • tab.activeForeground#bbbbbb
  • tab.border#181a1f
  • tab.inactiveBackground#24272f
  • tab.inactiveForeground#75797d
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#676f7ditalic
string#8BB36E
punctuation.definition.template-expression#56B6C2
meta.template.expression#bbb
constant.numeric#FF9B84
constant.language#ea7599
constant.character, constant.other#56b6c2
variable#bbb
variable.language#ea7599
storage, storage.type, storage.modifier#56b6c2
entity.name.class, entity.name.module, entity.name.type#bbb
entity.name.function, support.function#E5BD73
variable.parameter#d19a66italic
function.support.builtin, function.support.core#E5BD73
entity.name.tag, entity.name.tag.class#e06c75
entity.other.attribute-name#9489c3
support.constant#56b6c2
support.type, support.variable#56b6c2
support.type.property-name.json#ea7599
entity.name.tag.css, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#E5BD73
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379
variable.css, variable.scss, variable.less, variable.sass#56b6c2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#56b6c2
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#696969
markup.bold.markdownbold
punctuation.definition.bold.markdown#696969
markup.heading.markdown#e06c75bold
punctuation.definition.heading.markdown#696969
markup.quote.markdown#98c379
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold
string.detected-link, variable.parameter.url, markup.underline.link.markdown#649cca
support.variable, variable.other.property#9489c3
meta.object-literal.key#9489c3
variable.other.constant#D19A66
keyword#ea7599
keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type.annotation#bbb