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#161b14
  • activityBar.inactiveForeground#9ca184
  • activityBarBadge.background#8ccf58
  • activityBarBadge.foreground#131712
  • badge.background#2f3c25
  • button.background#8ccf58
  • button.foreground#131712
  • button.hoverBackground#9cd773
  • debugToolBar.background#1c2118
  • descriptionForeground#c6bfa4
  • dropdown.background#20271d
  • dropdown.border#2b3422
  • editor.background#131712
  • editor.findMatchBackground#d0b06f44
  • editor.findMatchHighlightBackground#d0b06f26
  • editor.foreground#f2eddc
  • editor.hoverHighlightBackground#32422644
  • editor.inactiveSelectionBackground#25301c88
  • editor.lineHighlightBackground#1c2118
  • editor.selectionBackground#2d3822
  • editor.selectionHighlightBackground#2d382288
  • editor.wordHighlightBackground#32422644
  • editor.wordHighlightStrongBackground#32422688
  • editorBracketMatch.background#1f2619
  • editorBracketMatch.border#c9d891
  • editorCursor.foreground#f2eddc
  • editorGutter.addedBackground#76b87a88
  • editorGutter.background#131712
  • editorGutter.deletedBackground#b9654c88
  • editorGutter.modifiedBackground#c9d89188
  • editorIndentGuide.activeBackground#2d3822
  • editorIndentGuide.background#1f251b
  • editorLineNumber.activeForeground#c9d891
  • editorLineNumber.foreground#7a8468
  • editorLink.activeForeground#8ccf58
  • editorWhitespace.foreground#1f251b
  • editorWidget.background#20271d
  • editorWidget.border#2b3422
  • focusBorder#c9d891
  • foreground#f2eddc
  • gitDecoration.addedResourceForeground#76b87a
  • gitDecoration.deletedResourceForeground#b9654c
  • gitDecoration.ignoredResourceForeground#43503a
  • gitDecoration.modifiedResourceForeground#c9d891
  • gitDecoration.untrackedResourceForeground#8dd68f
  • input.background#20271d
  • input.border#2b3422
  • input.placeholderForeground#9ca184
  • list.activeSelectionBackground#24321f
  • list.focusHighlightForeground#c9d891
  • list.highlightForeground#c9d891
  • list.hoverBackground#1f2a1b
  • list.inactiveSelectionBackground#1a2318
  • list.inactiveSelectionForeground#e5dbc2
  • notifications.background#20271d
  • panel.background#161b14
  • panel.border#2b3422
  • panelTitle.inactiveForeground#9ca184
  • peekView.border#c9d891
  • peekViewEditor.background#1c2118
  • peekViewEditor.matchHighlightBackground#d0b06f44
  • peekViewResult.background#161b14
  • peekViewResult.matchHighlightBackground#d0b06f44
  • quickInput.background#20271d
  • scrollbarSlider.activeBackground#c9d89166
  • scrollbarSlider.background#2f3c2588
  • scrollbarSlider.hoverBackground#2f3c25cc
  • selection.background#2d3822
  • sideBar.background#171d15
  • sideBar.foreground#e5dbc2
  • sideBarSectionHeader.background#20271d
  • statusBar.background#161b14
  • statusBar.debuggingBackground#76b87a
  • statusBar.debuggingForeground#131712
  • statusBar.noFolderBackground#161b14
  • statusBarItem.hoverBackground#2a371f
  • tab.activeBackground#25321f
  • tab.activeBorder#c9d891
  • tab.border#131712
  • tab.hoverBackground#20271d
  • tab.inactiveBackground#171d15
  • tab.inactiveForeground#9ca184
  • tab.unfocusedActiveForeground#e5dbc2
  • tab.unfocusedInactiveForeground#7f866f
  • terminal.ansiBlack#1a1f18
  • terminal.ansiBlue#4f7b69
  • terminal.ansiBrightBlack#2b3422
  • terminal.ansiBrightBlue#5f8f7a
  • terminal.ansiBrightCyan#87d8b1
  • terminal.ansiBrightGreen#8dd68f
  • terminal.ansiBrightMagenta#c9a285
  • terminal.ansiBrightRed#c9755c
  • terminal.ansiBrightWhite#faf5e8
  • terminal.ansiBrightYellow#dcd79e
  • terminal.ansiCyan#74c6a0
  • terminal.ansiGreen#76b87a
  • terminal.ansiMagenta#b28c78
  • terminal.ansiRed#b9654c
  • terminal.ansiYellow#c9d891
  • terminal.background#131712
  • titleBar.activeBackground#161b14
  • titleBar.inactiveBackground#21281d
  • titleBar.inactiveForeground#9ca184

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7c826f—
constant.numeric, constant.language, support.constant#d2aa5c—
entity.name.function, support.function#9ddc7a—
entity.name.tag, support.type.property-name#8bcf58—
entity.name.type, support.type, support.class#74c6a0—
entity.other.attribute-name, meta.tag.attribute-name, support.class.component#c7e3a6—
entity.other.attribute-name.class#74c6a0—
entity.other.attribute-name.id#d6b280—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#a9d68f—
invalid#ffffff—
keyword, storage.type, storage.modifier#8ccf58bold
markup.bold#9ddc7abold
markup.heading#c9d891bold
markup.italic#74c6a0italic
markup.link#8dd68f—
meta.brace#c1cbb4—
meta.property-name#b7dd8e—
punctuation#c1cbb4—
string, punctuation.definition.string#f0d6a4—
support.constant.property-value#d2aa5c—
variable.language#8ccf58—
variable.other.constant, constant.other#c9d891—