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#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