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#00bcc8
  • activityBar.border#00a4af
  • activityBar.foreground#06201f
  • activityBar.inactiveForeground#06201f99
  • activityBarBadge.background#d0ff00
  • activityBarBadge.foreground#0e1414
  • badge.background#d0ff00
  • badge.foreground#0e1414
  • button.background#d0ff00
  • button.foreground#0e1414
  • button.hoverBackground#b9e600
  • dropdown.background#16201f
  • dropdown.border#2a3d3a
  • editor.background#0e1414
  • editor.findMatchBackground#d0ff0066
  • editor.findMatchHighlightBackground#d0ff0033
  • editor.foreground#e4f7f5
  • editor.lineHighlightBackground#16201f
  • editor.selectionBackground#00bcc855
  • editor.selectionHighlightBackground#00bcc833
  • editorCursor.foreground#d0ff00
  • editorGroup.border#1a2624
  • editorGroupHeader.tabsBackground#0a0f0f
  • editorIndentGuide.activeBackground#2a3d3a
  • editorIndentGuide.background#1a2624
  • editorLineNumber.activeForeground#00bcc8
  • editorLineNumber.foreground#3d6b68
  • editorSuggestWidget.background#121b1a
  • editorSuggestWidget.highlightForeground#d0ff00
  • editorSuggestWidget.selectedBackground#1a2624
  • editorWhitespace.foreground#1f2d2b
  • editorWidget.background#121b1a
  • focusBorder#00bcc8
  • gitDecoration.addedResourceForeground#d0ff00
  • gitDecoration.deletedResourceForeground#ff5d62
  • gitDecoration.modifiedResourceForeground#ffe066
  • gitDecoration.untrackedResourceForeground#00bcc8
  • input.background#16201f
  • input.border#2a3d3a
  • input.foreground#e4f7f5
  • inputOption.activeBorder#00bcc8
  • list.activeSelectionBackground#1a2624
  • list.activeSelectionForeground#e4f7f5
  • list.hoverBackground#121b1a
  • list.inactiveSelectionBackground#121b1a
  • panel.background#0a0f0f
  • panel.border#1a2624
  • panelTitle.activeBorder#d0ff00
  • panelTitle.activeForeground#e4f7f5
  • panelTitle.inactiveForeground#3d6b68
  • peekViewEditor.background#0e1414
  • peekViewResult.background#0a0f0f
  • scrollbarSlider.activeBackground#00bcc8
  • scrollbarSlider.background#2a3d3a66
  • scrollbarSlider.hoverBackground#2a3d3aaa
  • sideBar.background#0e1414
  • sideBar.border#1a2624
  • sideBar.foreground#b6d6d3
  • sideBarSectionHeader.background#16201f
  • sideBarTitle.foreground#e4f7f5
  • statusBar.background#00bcc8
  • statusBar.debuggingBackground#d0ff00
  • statusBar.debuggingForeground#06201f
  • statusBar.foreground#06201f
  • statusBar.noFolderBackground#00a4af
  • statusBarItem.hoverBackground#00a4af
  • tab.activeBackground#0e1414
  • tab.activeBorderTop#d0ff00
  • tab.activeForeground#e4f7f5
  • tab.border#0a0f0f
  • tab.inactiveBackground#0a0f0f
  • tab.inactiveForeground#3d6b68
  • terminal.ansiBlue#00bcc8
  • terminal.ansiCyan#5fe6e0
  • terminal.ansiGreen#d0ff00
  • terminal.ansiMagenta#ff6ec7
  • terminal.ansiRed#ff5d62
  • terminal.ansiYellow#ffe066
  • terminal.background#0e1414
  • terminal.foreground#e4f7f5
  • titleBar.activeBackground#0e1414
  • titleBar.activeForeground#e4f7f5
  • titleBar.inactiveBackground#0e1414
  • titleBar.inactiveForeground#3d6b68
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4c7572italic
string, string.quoted#d0ff00
constant.numeric, constant.language, constant.character#ffb454
keyword, storage.type, storage.modifier#00bcc8italic
entity.name.function, support.function#5fe6e0
entity.name.class, entity.name.type, support.class#d0ff00bold
variable, variable.parameter#e4f7f5
variable.other.property, variable.other.object.property#b6d6d3
entity.other.attribute-name, entity.name.tag#ff6ec7
punctuation, meta.brace#6c9c98
markup.bold#d0ff00bold
markup.italic#00bcc8italic
markup.heading#00bcc8bold