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.

  • //===== Base / Editor =====
  • //10===== Popups / Misc =====
  • //2===== Gutter / Overview =====
  • //3===== Workbench chrome =====
  • //4===== Tabs =====
  • //5===== Status bar =====
  • //6===== Inputs / Dropdowns =====
  • //7===== Scrollbar =====
  • //8===== Panels / Terminal =====
  • //9===== Diff / Git =====
  • activityBar.activeBorder#cfe05a
  • activityBar.background#0e1410
  • activityBar.border#23311f
  • activityBar.foreground#cfe05a
  • activityBar.inactiveForeground#5a685a
  • activityBarBadge.background#57c98a
  • activityBarBadge.foreground#0e1410
  • badge.background#4fd6c0
  • badge.foreground#0e1410
  • breadcrumb.activeSelectionForeground#cfe05a
  • breadcrumb.focusForeground#cfe05a
  • breadcrumb.foreground#7a8878
  • button.background#57c98a
  • button.foreground#0e1410
  • button.hoverBackground#6fdb9e
  • button.secondaryBackground#1f2e23
  • button.secondaryForeground#c6d2c2
  • descriptionForeground#8a988a
  • diffEditor.insertedTextBackground#57c98a22
  • diffEditor.removedTextBackground#e0664d22
  • dropdown.background#16201a
  • dropdown.border#2c3a2e
  • dropdown.foreground#c6d2c2
  • editor.background#121a15
  • editor.findMatchBackground#57c98a66
  • editor.findMatchHighlightBackground#cfe05a44
  • editor.foreground#c6d2c2
  • editor.inactiveSelectionBackground#22382c66
  • editor.lineHighlightBackground#19241b
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#2a4a3899
  • editor.selectionHighlightBackground#2a4a3855
  • editor.wordHighlightBackground#4fd6c033
  • editor.wordHighlightStrongBackground#4fd6c04d
  • editorBracketMatch.background#4fd6c033
  • editorBracketMatch.border#4fd6c0
  • editorCursor.foreground#57c98a
  • editorError.foreground#e0664d
  • editorGroup.border#23311f
  • editorGroupHeader.tabsBackground#0e1410
  • editorGroupHeader.tabsBorder#23311f
  • editorGutter.addedBackground#57c98a
  • editorGutter.deletedBackground#e0664d
  • editorGutter.modifiedBackground#cfe05a
  • editorHoverWidget.background#16201a
  • editorHoverWidget.border#2c3a2e
  • editorIndentGuide.activeBackground1#4a584a
  • editorIndentGuide.background1#23311f
  • editorInfo.foreground#4fd6c0
  • editorLineNumber.activeForeground#cfe05a
  • editorLineNumber.foreground#4a584a
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#23311f
  • editorSuggestWidget.background#16201a
  • editorSuggestWidget.border#2c3a2e
  • editorSuggestWidget.highlightForeground#4fd6c0
  • editorSuggestWidget.selectedBackground#1f2e23
  • editorWarning.foreground#e3d24a
  • editorWhitespace.foreground#2c3a2e
  • editorWidget.background#16201a
  • editorWidget.border#2c3a2e
  • errorForeground#e0664d
  • focusBorder#57c98a66
  • foreground#bcc8b8
  • gitDecoration.conflictingResourceForeground#e3d24a
  • gitDecoration.deletedResourceForeground#e0664d
  • gitDecoration.ignoredResourceForeground#5a685a
  • gitDecoration.modifiedResourceForeground#cfe05a
  • gitDecoration.untrackedResourceForeground#57c98a
  • input.background#16201a
  • input.border#2c3a2e
  • input.foreground#c6d2c2
  • input.placeholderForeground#6a786a
  • inputOption.activeBackground#57c98a33
  • inputOption.activeBorder#57c98a
  • inputValidation.errorBackground#3a1a14
  • inputValidation.errorBorder#e0664d
  • list.activeSelectionBackground#1f2e23
  • list.activeSelectionForeground#cfe05a
  • list.errorForeground#e0664d
  • list.focusBackground#1f2e23
  • list.highlightForeground#4fd6c0
  • list.hoverBackground#19241b
  • list.hoverForeground#cfe05a
  • list.inactiveSelectionBackground#19241b
  • list.inactiveSelectionForeground#c6d2c2
  • list.warningForeground#e3d24a
  • menu.background#16201a
  • menu.border#2c3a2e
  • menu.foreground#c6d2c2
  • menu.selectionBackground#1f2e23
  • menu.selectionForeground#cfe05a
  • minimap.findMatchHighlight#57c98a
  • minimap.selectionHighlight#2a4a38
  • notificationCenterHeader.background#0e1410
  • notifications.background#16201a
  • notifications.border#2c3a2e
  • panel.background#101712
  • panel.border#23311f
  • panelTitle.activeBorder#57c98a
  • panelTitle.activeForeground#cfe05a
  • panelTitle.inactiveForeground#7a8878
  • peekView.border#57c98a
  • peekViewEditor.background#101712
  • peekViewResult.background#0e1410
  • peekViewResult.selectionBackground#1f2e23
  • pickerGroup.border#2c3a2e
  • pickerGroup.foreground#cfe05a
  • progressBar.background#57c98a
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#57c98a88
  • scrollbarSlider.background#4a584a66
  • scrollbarSlider.hoverBackground#4a584a99
  • selection.background#2a4a38aa
  • sideBar.background#101712
  • sideBar.border#23311f
  • sideBar.foreground#abb8a7
  • sideBarSectionHeader.background#16201a
  • sideBarSectionHeader.border#23311f
  • sideBarSectionHeader.foreground#c6d2c2
  • sideBarTitle.foreground#8a988a
  • statusBar.background#0e1410
  • statusBar.border#23311f
  • statusBar.debuggingBackground#57c98a
  • statusBar.debuggingForeground#0e1410
  • statusBar.foreground#abb8a7
  • statusBar.noFolderBackground#0e1410
  • statusBarItem.hoverBackground#1f2e23
  • statusBarItem.prominentBackground#cfe05a
  • statusBarItem.prominentForeground#0e1410
  • statusBarItem.remoteBackground#4fd6c0
  • statusBarItem.remoteForeground#0e1410
  • tab.activeBackground#121a15
  • tab.activeBorder#121a15
  • tab.activeBorderTop#57c98a
  • tab.activeForeground#cfe05a
  • tab.border#23311f
  • tab.hoverForeground#cfe05a
  • tab.inactiveBackground#0e1410
  • tab.inactiveForeground#7a8878
  • tab.unfocusedActiveForeground#abb8a7
  • terminal.ansiBlack#0e1410
  • terminal.ansiBlue#4fd6c0
  • terminal.ansiBrightBlack#5a685a
  • terminal.ansiBrightBlue#74e3d4
  • terminal.ansiBrightCyan#74e3d4
  • terminal.ansiBrightGreen#6fdb9e
  • terminal.ansiBrightMagenta#bfe35a
  • terminal.ansiBrightRed#f07a62
  • terminal.ansiBrightWhite#e6efe2
  • terminal.ansiBrightYellow#cfe05a
  • terminal.ansiCyan#4fd6c0
  • terminal.ansiGreen#57c98a
  • terminal.ansiMagenta#9bd35a
  • terminal.ansiRed#e0664d
  • terminal.ansiWhite#c6d2c2
  • terminal.ansiYellow#e3d24a
  • terminal.background#101712
  • terminal.foreground#c6d2c2
  • terminalCursor.foreground#57c98a
  • textLink.activeForeground#74e3d4
  • textLink.foreground#4fd6c0
  • titleBar.activeBackground#0e1410
  • titleBar.activeForeground#c6d2c2
  • titleBar.border#23311f
  • titleBar.inactiveBackground#0e1410
  • titleBar.inactiveForeground#7a8878
  • tree.indentGuidesStroke#2c3a2e
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5f7560italic
string, string.quoted, punctuation.definition.string#9bd35a
constant.character.escape, string.template, punctuation.definition.template-expression#4fd6c0
constant.numeric, constant.language, constant.other#e3d24a
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, storage.type, storage.modifier#57c98a
keyword.operator, punctuation, punctuation.separator, punctuation.terminator#8a9a86
entity.name.function, support.function, meta.function-call, variable.function#4fd6c0
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.namespace#cfe05a
variable, variable.other.readwrite, meta.definition.variable#c6d2c2
variable.parameter#aebfa6italic
variable.language, support.variable, variable.other.constant#e3d24a
variable.other.property, meta.object-literal.key, support.type.property-name#8fdccb
entity.name.tag, punctuation.definition.tag#57c98a
entity.other.attribute-name#cfe05aitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#cfe05a
support.type.property-name.css, support.type.property-name.scss#8fdccb
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#57c98abold
markup.bold#cfe05abold
markup.italic#9bd35aitalic
markup.underline.link, string.other.link#4fd6c0underline
markup.inline.raw, markup.fenced_code, markup.quote#8fdccb
meta.decorator, punctuation.decorator, storage.type.annotation#e3d24a
invalid, invalid.illegal#e0664d
markup.inserted#57c98a
markup.deleted#e0664d