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#162018
  • activityBar.border#2A3B32
  • activityBar.foreground#8FB89F
  • activityBar.inactiveForeground#5C7A68
  • activityBarBadge.background#D49150
  • activityBarBadge.foreground#1E2A24
  • badge.background#D49150
  • badge.foreground#1E2A24
  • breadcrumb.activeSelectionForeground#E8DFD0
  • breadcrumb.background#1E2A24
  • breadcrumb.focusForeground#E8DFD0
  • breadcrumb.foreground#8A9A90
  • breadcrumbPicker.background#1A2420
  • button.background#5C8A6E
  • button.foreground#E8DFD0
  • button.hoverBackground#6B9A7E
  • button.secondaryBackground#3A4F42
  • button.secondaryForeground#E8DFD0
  • button.secondaryHoverBackground#4A5F52
  • diffEditor.insertedTextBackground#8FB89F22
  • diffEditor.removedTextBackground#C96B6B22
  • dropdown.background#243028
  • dropdown.border#3A4F42
  • dropdown.foreground#E8DFD0
  • editor.background#1E2A24
  • editor.findMatchBackground#D4915044
  • editor.findMatchBorder#D49150
  • editor.findMatchHighlightBackground#D4915033
  • editor.foreground#E8DFD0
  • editor.inactiveSelectionBackground#4A6B5A22
  • editor.lineHighlightBackground#2A3B32
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#4A6B5A55
  • editor.selectionHighlightBackground#4A6B5A33
  • editor.wordHighlightBackground#5C8A6E33
  • editor.wordHighlightStrongBackground#5C8A6E55
  • editorBracketMatch.background#D4915033
  • editorBracketMatch.border#D49150
  • editorCursor.background#1E2A24
  • editorCursor.foreground#F4A460
  • editorError.foreground#C96B6B
  • editorGroupHeader.tabsBackground#1A2420
  • editorGroupHeader.tabsBorder#2A3B32
  • editorHoverWidget.background#1A2420
  • editorHoverWidget.border#3A4F42
  • editorHoverWidget.foreground#E8DFD0
  • editorIndentGuide.activeBackground#5C8A6E
  • editorIndentGuide.background#3A4F42
  • editorInfo.foreground#6B9AC4
  • editorLineNumber.activeForeground#8FB89F
  • editorLineNumber.foreground#5C7A68
  • editorSuggestWidget.background#1A2420
  • editorSuggestWidget.border#3A4F42
  • editorSuggestWidget.foreground#E8DFD0
  • editorSuggestWidget.highlightForeground#D4A84B
  • editorSuggestWidget.selectedBackground#3A5545
  • editorWarning.foreground#D4A84B
  • editorWhitespace.foreground#3A4F4266
  • editorWidget.background#1A2420
  • editorWidget.border#3A4F42
  • editorWidget.foreground#E8DFD0
  • gitDecoration.addedResourceForeground#8FB89F
  • gitDecoration.conflictingResourceForeground#B88FB8
  • gitDecoration.deletedResourceForeground#C96B6B
  • gitDecoration.ignoredResourceForeground#5C7A68
  • gitDecoration.modifiedResourceForeground#D4A84B
  • gitDecoration.untrackedResourceForeground#6BC4B8
  • input.background#243028
  • input.border#3A4F42
  • input.foreground#E8DFD0
  • input.placeholderForeground#6A8A78
  • inputOption.activeBackground#4A6B5A
  • inputOption.activeForeground#E8DFD0
  • list.activeSelectionBackground#3A5545
  • list.activeSelectionForeground#E8DFD0
  • list.errorForeground#C96B6B
  • list.focusBackground#3A5545
  • list.highlightForeground#D4A84B
  • list.hoverBackground#2A3B32
  • list.hoverForeground#E8DFD0
  • list.inactiveSelectionBackground#2A3B32
  • list.inactiveSelectionForeground#C4B8A8
  • list.warningForeground#D4A84B
  • minimap.background#1A2420
  • minimap.findMatchHighlight#D4915088
  • minimap.selectionHighlight#4A6B5A88
  • notificationCenterHeader.background#1A2420
  • notifications.background#243028
  • notifications.border#3A4F42
  • notifications.foreground#E8DFD0
  • panel.background#1A2420
  • panel.border#2A3B32
  • panelTitle.activeBorder#8FB89F
  • panelTitle.activeForeground#E8DFD0
  • panelTitle.inactiveForeground#6A8A78
  • peekView.border#5C8A6E
  • peekViewEditor.background#1A2420
  • peekViewEditor.matchHighlightBackground#D4915044
  • peekViewResult.background#162018
  • peekViewResult.fileForeground#E8DFD0
  • peekViewResult.lineForeground#A8C4B0
  • peekViewResult.matchHighlightBackground#D4915044
  • peekViewResult.selectionBackground#3A5545
  • peekViewTitle.background#243028
  • peekViewTitleDescription.foreground#8A9A90
  • peekViewTitleLabel.foreground#E8DFD0
  • quickInput.background#1A2420
  • quickInput.foreground#E8DFD0
  • quickInputList.focusBackground#2A3B32
  • quickInputList.focusForeground#E8DFD0
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#5C8A6E88
  • scrollbarSlider.background#4A6B5A44
  • scrollbarSlider.hoverBackground#5C8A6E66
  • sideBar.background#1A2420
  • sideBar.border#2A3B32
  • sideBar.foreground#C4B8A8
  • sideBarSectionHeader.background#243028
  • sideBarSectionHeader.foreground#A8C4B0
  • sideBarTitle.foreground#E8DFD0
  • statusBar.background#162018
  • statusBar.border#2A3B32
  • statusBar.debuggingBackground#8B4D62
  • statusBar.debuggingForeground#E8DFD0
  • statusBar.foreground#A8C4B0
  • statusBar.noFolderBackground#3D4A44
  • statusBarItem.hoverBackground#2A3B32
  • statusBarItem.remoteBackground#5C8A6E
  • statusBarItem.remoteForeground#E8DFD0
  • tab.activeBackground#1E2A24
  • tab.activeBorder#00000000
  • tab.activeBorderTop#8FB89F
  • tab.activeForeground#E8DFD0
  • tab.border#2A3B32
  • tab.hoverBackground#243028
  • tab.inactiveBackground#1A2420
  • tab.inactiveForeground#8A9A90
  • terminal.ansiBlack#1E2A24
  • terminal.ansiBlue#6B9AC4
  • terminal.ansiBrightBlack#5C7A68
  • terminal.ansiBrightBlue#8AB8E0
  • terminal.ansiBrightCyan#8AE0D4
  • terminal.ansiBrightGreen#A8D4B8
  • terminal.ansiBrightMagenta#D4A8D4
  • terminal.ansiBrightRed#E08A8A
  • terminal.ansiBrightWhite#F4EBE0
  • terminal.ansiBrightYellow#E8C46B
  • terminal.ansiCyan#6BC4B8
  • terminal.ansiGreen#8FB89F
  • terminal.ansiMagenta#B88FB8
  • terminal.ansiRed#C96B6B
  • terminal.ansiWhite#E8DFD0
  • terminal.ansiYellow#D4A84B
  • terminal.background#1A2420
  • terminal.foreground#E8DFD0
  • terminalCursor.foreground#F4A460
  • titleBar.activeBackground#162018
  • titleBar.activeForeground#C4B8A8
  • titleBar.border#2A3B32
  • titleBar.inactiveBackground#162018
  • titleBar.inactiveForeground#6A7A70
  • tree.indentGuidesStroke#3A4F42

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A8A78italic
string, string.quoted#D4A84B—
constant.character.escape#E8C46B—
string.template, punctuation.definition.string.template#D4A84B—
punctuation.definition.template-expression#B88FB8—
constant.numeric#E08A8A—
constant.language#E08A8Aitalic
constant.other, variable.other.constant#D4A84B—
keyword, keyword.control#B88FB8—
keyword.operator#6BC4B8—
storage, storage.type#B88FB8—
storage.modifier#B88FB8italic
entity.name.function, meta.function-call, support.function#8FB89F—
variable.parameter, meta.parameter#E8C46Bitalic
entity.name.class, entity.name.type.class, support.class#6B9AC4—
entity.other.inherited-class#8AB8E0italic
entity.name.type, support.type, support.type.primitive#6BC4B8—
entity.name.type.interface#6BC4B8italic
variable, variable.other#E8DFD0—
variable.other.property, variable.other.object.property, meta.object-literal.key#A8D4B8—
variable.language.this, variable.language.self#E08A8Aitalic
entity.name.tag#C96B6B—
entity.other.attribute-name#D4A84Bitalic
support.class.component, entity.name.tag.js, entity.name.tag support.class.component#6B9AC4—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4A84B—
support.type.property-name.css#8FB89F—
support.constant.property-value.css#E8C46B—
keyword.other.unit.css#E08A8A—
entity.other.attribute-name.pseudo-class.css#B88FB8—
support.type.property-name.json#8FB89F—
string.quoted.double.json#D4A84B—
heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading#6B9AC4bold
markup.bold#E8C46Bbold
markup.italic#B88FB8italic
markup.underline.link#6BC4B8—
markup.inline.raw, markup.fenced_code#8FB89F—
markup.quote#6A8A78italic
punctuation#A8C4B0—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments#A8C4B0—
string.regexp#6BC4B8—
meta.decorator, meta.annotation#D4A84Bitalic
keyword.control.import, keyword.control.export, keyword.control.from#B88FB8—
invalid, invalid.illegal#C96B6Bunderline
invalid.deprecated#D49150strikethrough