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#061521
  • activityBar.border#0d3d4d
  • activityBar.foreground#5eeaff
  • activityBar.inactiveForeground#447d8d
  • activityBarBadge.background#ff4b23
  • activityBarBadge.foreground#fff1e8
  • badge.background#ff4b23
  • badge.foreground#fff5ef
  • button.background#0aaed0
  • button.foreground#031016
  • button.hoverBackground#27dfff
  • button.secondaryBackground#163240
  • button.secondaryForeground#c8f7ff
  • button.secondaryHoverBackground#214657
  • descriptionForeground#74b8c8
  • dropdown.background#071923
  • dropdown.border#145367
  • dropdown.foreground#c8f7ff
  • editor.background#061018
  • editor.findMatchBackground#ff5a2a66
  • editor.findMatchHighlightBackground#0dd7ff44
  • editor.findRangeHighlightBackground#0dd7ff20
  • editor.foreground#c8f7ff
  • editor.hoverHighlightBackground#123f4f66
  • editor.lineHighlightBackground#0b2230
  • editor.lineHighlightBorder#0dd7ff14
  • editor.selectionBackground#0e6f8755
  • editor.selectionHighlightBackground#ff5a2a2a
  • editor.wordHighlightBackground#0dd7ff22
  • editor.wordHighlightStrongBackground#ff4b2333
  • editorCursor.foreground#ff5a2a
  • editorGroup.border#0c3445
  • editorGroupHeader.tabsBackground#06131d
  • editorGroupHeader.tabsBorder#0d3442
  • editorGutter.addedBackground#65ffb8
  • editorGutter.background#061018
  • editorGutter.deletedBackground#ff4b23
  • editorGutter.modifiedBackground#27dfff
  • editorIndentGuide.activeBackground1#2bdcf1
  • editorIndentGuide.background1#123241
  • editorInlayHint.background#0b2c38
  • editorInlayHint.foreground#6fb6c4
  • editorLineNumber.activeForeground#63eaff
  • editorLineNumber.foreground#245667
  • editorLink.activeForeground#ff724b
  • editorOverviewRuler.border#061018
  • editorOverviewRuler.errorForeground#ff3f2f
  • editorOverviewRuler.findMatchForeground#ff5a2aaa
  • editorOverviewRuler.infoForeground#27dfff
  • editorOverviewRuler.warningForeground#ffb25a
  • editorWhitespace.foreground#1d4957
  • errorForeground#ff3f2f
  • focusBorder#ff5a2a
  • foreground#c8f7ff
  • gitDecoration.addedResourceForeground#65ffb8
  • gitDecoration.conflictingResourceForeground#ffb25a
  • gitDecoration.deletedResourceForeground#ff4b23
  • gitDecoration.ignoredResourceForeground#3d6874
  • gitDecoration.modifiedResourceForeground#27dfff
  • gitDecoration.renamedResourceForeground#d970ff
  • gitDecoration.untrackedResourceForeground#8dffd0
  • icon.foreground#46dfff
  • input.background#071923
  • input.border#145367
  • input.foreground#d1f8ff
  • input.placeholderForeground#4f8796
  • list.activeSelectionBackground#113d4d
  • list.activeSelectionForeground#e8fdff
  • list.errorForeground#ff5b45
  • list.focusBackground#123846
  • list.highlightForeground#ff7040
  • list.hoverBackground#102b39
  • list.inactiveSelectionBackground#0d2e3c
  • list.warningForeground#ffb25a
  • minimap.background#061018
  • panel.background#06131d
  • panel.border#0d3442
  • panelTitle.activeBorder#ff5a2a
  • panelTitle.activeForeground#5eeaff
  • panelTitle.inactiveForeground#6797a5
  • peekView.border#ff5a2a
  • peekViewEditor.background#071923
  • peekViewResult.background#06131d
  • peekViewResult.selectionBackground#113d4d
  • peekViewTitle.background#0a2230
  • peekViewTitleDescription.foreground#74b8c8
  • peekViewTitleLabel.foreground#5eeaff
  • progressBar.background#ff5a2a
  • sash.hoverBorder#ff5a2a
  • scrollbarSlider.activeBackground#35dfff88
  • scrollbarSlider.background#1b526455
  • scrollbarSlider.hoverBackground#26758a77
  • sideBar.background#071923
  • sideBar.border#0b3443
  • sideBar.foreground#b9edf6
  • sideBarSectionHeader.background#0a2230
  • sideBarSectionHeader.border#103d4f
  • sideBarSectionHeader.foreground#7cefff
  • sideBarTitle.foreground#54e6ff
  • statusBar.background#071923
  • statusBar.border#0d3d4d
  • statusBar.debuggingBackground#ff4b23
  • statusBar.debuggingForeground#fff5ef
  • statusBar.foreground#9fecff
  • statusBar.noFolderBackground#0b2836
  • statusBarItem.hoverBackground#123846
  • statusBarItem.remoteBackground#0aaed0
  • statusBarItem.remoteForeground#041018
  • tab.activeBackground#071923
  • tab.activeBorderTop#ff5a2a
  • tab.activeForeground#d9fbff
  • tab.border#0c3445
  • tab.hoverBackground#0a2430
  • tab.inactiveBackground#06131d
  • tab.inactiveForeground#6797a5
  • terminal.ansiBlack#061018
  • terminal.ansiBlue#28a9ff
  • terminal.ansiBrightBlack#2e6372
  • terminal.ansiBrightBlue#64c8ff
  • terminal.ansiBrightCyan#77f4ff
  • terminal.ansiBrightGreen#8dffd0
  • terminal.ansiBrightMagenta#eba0ff
  • terminal.ansiBrightRed#ff7656
  • terminal.ansiBrightWhite#effeff
  • terminal.ansiBrightYellow#ffd184
  • terminal.ansiCyan#27dfff
  • terminal.ansiGreen#65ffb8
  • terminal.ansiMagenta#d970ff
  • terminal.ansiRed#ff4b23
  • terminal.ansiWhite#c8f7ff
  • terminal.ansiYellow#ffb25a
  • terminal.background#050d14
  • terminal.foreground#bff5ff
  • titleBar.activeBackground#06131d
  • titleBar.activeForeground#c8f7ff
  • titleBar.border#0d3442
  • titleBar.inactiveBackground#050d14
  • titleBar.inactiveForeground#5c8793
  • window.activeBorder#0dd7ff66
  • window.inactiveBorder#092433

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8f6659italic
string, constant.other.symbol#ffd184
constant.numeric, constant.language, support.constant, variable.other.constant#77f4ff
keyword, storage.type, storage.modifier#ff6a32bold
keyword.operator, punctuation, meta.brace#ffb08a
entity.name.function, support.function, meta.function-call, variable.function#ff9a61
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs#27dfff
variable, variable.other, variable.parameter, meta.object-literal.key, support.variable.property#ffe2d2
variable.other.property, meta.property-name, support.type.property-name, entity.other.attribute-name#ffc3a4
entity.name.tag, punctuation.definition.tag#27dfff
invalid, invalid.illegal#fff7f2
markup.heading, entity.name.section#ff8a4cbold
markup.underline.link, string.other.link#27dfff
comment, punctuation.definition.comment#8f6659italic
string, constant.other.symbol#ffd184
constant.numeric, constant.language, support.constant, variable.other.constant#77f4ff
keyword, storage.type, storage.modifier#ff6a32bold
keyword.operator, punctuation, meta.brace#ffb08a
entity.name.function, support.function, meta.function-call, variable.function#ff9a61
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs#27dfff
variable, variable.other, variable.parameter, meta.object-literal.key, support.variable.property#ffe2d2
variable.other.property, meta.property-name, support.type.property-name, entity.other.attribute-name#ffc3a4
entity.name.tag, punctuation.definition.tag#27dfff
invalid, invalid.illegal#fff7f2
markup.heading, entity.name.section#ff8a4cbold
markup.underline.link, string.other.link#27dfff
comment, punctuation.definition.comment#5b8792italic
string, constant.other.symbol#8dffd0
constant.numeric, constant.language, support.constant, variable.other.constant#ffb25a
keyword, storage.type, storage.modifier#ff5a2abold
keyword.operator, punctuation, meta.brace#5eeaff
entity.name.function, support.function, meta.function-call, variable.function#27dfff
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs#64c8ff
variable, variable.other, variable.parameter, meta.object-literal.key, support.variable.property#c8f7ff
variable.other.property, meta.property-name, support.type.property-name, entity.other.attribute-name#7cefff
entity.name.tag, punctuation.definition.tag#ff7040
invalid, invalid.illegal#fff5ef
markup.heading, entity.name.section#27dfffbold
markup.underline.link, string.other.link#ff7040