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#031518
  • activityBar.border#0b2b26
  • activityBar.foreground#8eb69b
  • activityBar.inactiveForeground#163832
  • activityBarBadge.background#8eb69b
  • activityBarBadge.foreground#051f20
  • badge.background#235347
  • badge.foreground#daf1de
  • breadcrumb.activeSelectionForeground#daf1de
  • breadcrumb.focusForeground#8eb69b
  • breadcrumb.foreground#2a5048
  • breadcrumbPicker.background#072428
  • button.background#235347
  • button.foreground#daf1de
  • button.hoverBackground#2e6858
  • button.secondaryBackground#163832
  • button.secondaryForeground#8eb69b
  • descriptionForeground#3a7860
  • dropdown.background#072428
  • dropdown.border#163832
  • dropdown.foreground#daf1de
  • editor.background#051f20
  • editor.findMatchBackground#2a6050
  • editor.findMatchHighlightBackground#1a4038
  • editor.foreground#daf1de
  • editor.inactiveSelectionBackground#102c28
  • editor.lineHighlightBackground#0b2b26
  • editor.rangeHighlightBackground#0b2b26
  • editor.selectionBackground#235347
  • editor.selectionHighlightBackground#163832
  • editor.wordHighlightBackground#1a3e38
  • editor.wordHighlightStrongBackground#235347
  • editorBracketMatch.background#235347
  • editorBracketMatch.border#8eb69b
  • editorCursor.foreground#8eb69b
  • editorGroupHeader.tabsBackground#041820
  • editorGroupHeader.tabsBorder#0b2b26
  • editorGutter.addedBackground#2a6848
  • editorGutter.background#051f20
  • editorGutter.deletedBackground#5a3838
  • editorGutter.modifiedBackground#4a8860
  • editorIndentGuide.activeBackground1#2e5048
  • editorIndentGuide.background1#1e3c38
  • editorLineNumber.activeForeground#5a9878
  • editorLineNumber.foreground#2e6050
  • editorWhitespace.foreground#0f3030
  • focusBorder#8eb69b
  • gitDecoration.addedResourceForeground#6ab888
  • gitDecoration.conflictingResourceForeground#8a98b8
  • gitDecoration.deletedResourceForeground#7a4040
  • gitDecoration.ignoredResourceForeground#183830
  • gitDecoration.modifiedResourceForeground#8eb69b
  • gitDecoration.untrackedResourceForeground#8ad8a8
  • input.background#072428
  • input.border#163832
  • input.foreground#daf1de
  • input.placeholderForeground#163832
  • inputOption.activeBackground#163832
  • inputOption.activeBorder#8eb69b
  • list.activeSelectionBackground#163832
  • list.activeSelectionForeground#daf1de
  • list.focusBackground#163832
  • list.highlightForeground#8eb69b
  • list.hoverBackground#0b2b26
  • list.hoverForeground#daf1de
  • list.inactiveSelectionBackground#0b2b26
  • list.inactiveSelectionForeground#5a9878
  • notificationLink.foreground#8eb69b
  • notifications.background#072428
  • notifications.border#163832
  • notifications.foreground#daf1de
  • panel.background#041a1c
  • panel.border#0b2b26
  • panelTitle.activeBorder#8eb69b
  • panelTitle.activeForeground#8eb69b
  • panelTitle.inactiveForeground#163832
  • peekView.border#8eb69b
  • peekViewEditor.background#041c1e
  • peekViewEditor.matchHighlightBackground#235347
  • peekViewResult.background#041a1c
  • peekViewResult.fileForeground#8eb69b
  • peekViewResult.lineForeground#5a9878
  • peekViewResult.matchHighlightBackground#235347
  • peekViewResult.selectionBackground#163832
  • peekViewResult.selectionForeground#daf1de
  • peekViewTitle.background#072428
  • peekViewTitleDescription.foreground#3a7860
  • peekViewTitleLabel.foreground#daf1de
  • progressBar.background#8eb69b
  • scrollbarSlider.activeBackground#235347ee
  • scrollbarSlider.background#163832aa
  • scrollbarSlider.hoverBackground#1e4840cc
  • selection.background#235347
  • sideBar.background#041a1c
  • sideBar.border#0b2b26
  • sideBar.foreground#5a9878
  • sideBarSectionHeader.background#072428
  • sideBarSectionHeader.border#0f3030
  • sideBarSectionHeader.foreground#70a888
  • sideBarTitle.foreground#8eb69b
  • statusBar.background#031518
  • statusBar.border#0b2b26
  • statusBar.debuggingBackground#1a4838
  • statusBar.foreground#8eb69b
  • statusBar.noFolderBackground#0b2b26
  • statusBarItem.activeBackground#163832
  • statusBarItem.hoverBackground#0b2b26
  • statusBarItem.remoteBackground#8eb69b
  • statusBarItem.remoteForeground#051f20
  • tab.activeBackground#051f20
  • tab.activeBorder#8eb69b
  • tab.activeForeground#daf1de
  • tab.border#0b2b26
  • tab.hoverBackground#082428
  • tab.inactiveBackground#041a1c
  • tab.inactiveForeground#2a5048
  • terminal.ansiBlack#0b2b26
  • terminal.ansiBlue#3a7888
  • terminal.ansiBrightBlack#183830
  • terminal.ansiBrightBlue#5a98a8
  • terminal.ansiBrightCyan#5ab8a8
  • terminal.ansiBrightGreen#6ab888
  • terminal.ansiBrightMagenta#8a98b8
  • terminal.ansiBrightRed#a05858
  • terminal.ansiBrightWhite#daf1de
  • terminal.ansiBrightYellow#aab858
  • terminal.ansiCyan#3a9888
  • terminal.ansiGreen#4a9868
  • terminal.ansiMagenta#6a7898
  • terminal.ansiRed#7a4040
  • terminal.ansiWhite#8eb69b
  • terminal.ansiYellow#8a9848
  • terminal.background#041a1c
  • terminal.foreground#daf1de
  • terminalCursor.foreground#8eb69b
  • textLink.activeForeground#daf1de
  • textLink.foreground#8eb69b
  • titleBar.activeBackground#031518
  • titleBar.activeForeground#8eb69b
  • titleBar.border#0b2b26
  • titleBar.inactiveBackground#041a1c
  • titleBar.inactiveForeground#163832
  • widget.shadow#020c0ccc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3a7060italic
string, string.quoted#8eb69b
constant.character.escape, string.regexp#daf1de
constant.numeric#70a888
constant.language#4a9868bold
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier#6ab888bold
keyword.operator#457870
entity.name.function, meta.function-call entity.name.function, support.function#8eb69b
entity.name.class, entity.name.type, support.class, entity.other.inherited-class#5a98a8bold
variable, variable.other#daf1de
variable.language#8eb69bitalic
variable.parameter#b8d8c0
variable.other.property, support.variable.property, meta.object-literal.key#70a888
entity.name.tag, meta.tag#6ab888
entity.other.attribute-name#4a8870
entity.other.attribute-name.class, entity.other.attribute-name.id#8eb69b
support.type.property-name#8eb69b
support.constant.property-value#8eb69b
keyword.control.import, keyword.control.from#6ab888bold
punctuation.separator, punctuation.terminator, punctuation.accessor#2a5048
punctuation.definition.parameters, punctuation.definition.block, meta.brace#3a7860
markup.heading, entity.name.section#daf1debold
markup.bold#8eb69bbold
markup.italic#70a888italic
markup.inline.raw, markup.fenced_code#8eb69b
markup.underline.link#8eb69b
invalid#a05858underline
invalid.deprecated#3a4848strikethrough