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.activeBorder#5ba886
  • activityBar.background#20231f
  • activityBar.border#383b33
  • activityBar.foreground#c8c4b8
  • activityBar.inactiveForeground#4d5047
  • activityBarBadge.background#c8c4b8
  • activityBarBadge.foreground#20231f
  • badge.background#c8c4b890
  • badge.foreground#20231f
  • breadcrumb.activeSelectionForeground#c8c4b8
  • breadcrumb.background#282b25
  • breadcrumb.focusForeground#c8c4b8
  • breadcrumb.foreground#51544a
  • breadcrumbPicker.background#282b25
  • button.background#5ba886
  • button.foreground#20231f
  • button.hoverBackground#62af92
  • checkbox.background#282b25
  • checkbox.border#3a3d35
  • commandCenter.activeBackground#312f2c
  • commandCenter.activeForeground#c8c4b8
  • commandCenter.background#282b25
  • commandCenter.border#3a3d35
  • commandCenter.foreground#c8c4b8
  • debugToolBar.background#282b25
  • descriptionForeground#c8c4b890
  • diffEditor.insertedTextBackground#5ba88630
  • diffEditor.removedTextBackground#c0787830
  • dropdown.background#282b25
  • dropdown.border#3a3d35
  • dropdown.foreground#c8c4b8
  • dropdown.listBackground#282b25
  • editor.background#20231f
  • editor.findMatchBackground#5ba88660
  • editor.findMatchBorder#5ba88680
  • editor.findMatchHighlightBackground#5ba88635
  • editor.focusedStackFrameHighlightBackground#5ba88620
  • editor.foldBackground#c8c4b808
  • editor.foreground#c8c4b8
  • editor.inactiveSelectionBackground#383b3390
  • editor.lineHighlightBackground#282b25
  • editor.selectionBackground#42453c
  • editor.selectionHighlightBackground#42453c70
  • editor.stackFrameHighlightBackground#af8d6220
  • editor.wordHighlightBackground#42453c50
  • editor.wordHighlightStrongBackground#42453c70
  • editorBracketHighlight.foreground1#63a8a6
  • editorBracketHighlight.foreground2#c08a7d
  • editorBracketHighlight.foreground3#af8d62
  • editorBracketHighlight.foreground4#93b072
  • editorBracketHighlight.foreground5#c07878
  • editorBracketHighlight.foreground6#54998f
  • editorBracketMatch.background#63a8a620
  • editorBracketMatch.border#63a8a640
  • editorError.foreground#d05060
  • editorGroup.border#3a3d35
  • editorGroupHeader.tabsBackground#242721
  • editorGroupHeader.tabsBorder#383b33
  • editorGutter.addedBackground#5ba886
  • editorGutter.commentRangeForeground#51544a
  • editorGutter.deletedBackground#c07878
  • editorGutter.foldingControlForeground#51544a
  • editorGutter.modifiedBackground#65a8b5
  • editorHint.foreground#7d867a
  • editorHoverWidget.background#282b25
  • editorHoverWidget.border#3a3d35
  • editorHoverWidget.foreground#c8c4b8
  • editorIndentGuide.activeBackground#42453c
  • editorIndentGuide.background#383b33
  • editorInfo.foreground#65a8b5
  • editorInlayHint.background#282b2500
  • editorInlayHint.foreground#585b51
  • editorLineNumber.activeForeground#c8c4b8
  • editorLineNumber.foreground#51544a
  • editorOverviewRuler.border#20231f
  • editorRuler.foreground#282b25
  • editorStickyScroll.background#242721
  • editorStickyScrollHover.background#282b25
  • editorSuggestWidget.background#282b25
  • editorSuggestWidget.border#3a3d35
  • editorSuggestWidget.focusHighlightForeground#5ba886
  • editorSuggestWidget.foreground#c8c4b8
  • editorSuggestWidget.highlightForeground#5ba886
  • editorSuggestWidget.selectedBackground#3f4239
  • editorSuggestWidget.selectedForeground#c8c4b8
  • editorWarning.foreground#d4bf6e
  • editorWhitespace.foreground#383b33
  • editorWidget.background#282b25
  • errorForeground#c07878
  • focusBorder#00000000
  • foreground#c8c4b8
  • gitDecoration.addedResourceForeground#5ba886
  • gitDecoration.conflictingResourceForeground#af8d62
  • gitDecoration.deletedResourceForeground#c07878
  • gitDecoration.ignoredResourceForeground#4d5047
  • gitDecoration.modifiedResourceForeground#65a8b5
  • gitDecoration.submoduleResourceForeground#c8c4b890
  • gitDecoration.untrackedResourceForeground#63a8a6
  • input.background#282b25
  • input.border#3a3d35
  • input.foreground#c8c4b8
  • input.placeholderForeground#c8c4b850
  • inputOption.activeBackground#c8c4b820
  • list.activeSelectionBackground#3f4239
  • list.activeSelectionForeground#c8c4b8
  • list.focusBackground#3f4239
  • list.focusForeground#c8c4b8
  • list.highlightForeground#5ba886
  • list.hoverBackground#312f2c
  • list.hoverForeground#c8c4b8
  • list.inactiveFocusBackground#312f2c
  • list.inactiveSelectionBackground#383b33
  • list.inactiveSelectionForeground#c8c4b8
  • menu.background#282b25
  • menu.border#3a3d35
  • menu.foreground#c8c4b8
  • menu.selectionBackground#3f4239
  • menu.selectionForeground#c8c4b8
  • menu.separatorBackground#383b33
  • menubar.selectionBackground#312f2c
  • menubar.selectionForeground#c8c4b8
  • minimap.errorHighlight#d05060
  • minimap.findMatchHighlight#5ba88660
  • minimap.selectionHighlight#33362e
  • minimap.warningHighlight#d4bf6e
  • notificationCenterHeader.background#282b25
  • notificationCenterHeader.foreground#c8c4b8
  • notifications.background#282b25
  • notifications.border#3a3d35
  • notifications.foreground#c8c4b8
  • notificationsErrorIcon.foreground#c07878
  • notificationsInfoIcon.foreground#65a8b5
  • notificationsWarningIcon.foreground#d4bf6e
  • panel.background#20231f
  • panel.border#383b33
  • panelInput.border#3a3d35
  • panelTitle.activeBorder#5ba886
  • panelTitle.activeForeground#c8c4b8
  • panelTitle.inactiveForeground#4d5047
  • peekViewEditor.background#20231f
  • peekViewEditor.matchHighlightBackground#d4bf6e33
  • peekViewResult.background#20231f
  • peekViewResult.matchHighlightBackground#d4bf6e33
  • peekViewResult.selectionBackground#3f4239
  • peekViewResult.selectionForeground#c8c4b8
  • pickerGroup.border#3a3d35
  • pickerGroup.foreground#c8c4b8
  • problemsErrorIcon.foreground#d05060
  • problemsInfoIcon.foreground#65a8b5
  • problemsWarningIcon.foreground#d4bf6e
  • progressBar.background#5ba886
  • quickInput.background#282b25
  • quickInput.foreground#c8c4b8
  • quickInputList.focusBackground#383b33
  • quickInputList.focusForeground#c8c4b8
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#c8c4b830
  • scrollbarSlider.background#c8c4b810
  • scrollbarSlider.hoverBackground#c8c4b830
  • settings.headerForeground#c8c4b8
  • settings.modifiedItemIndicator#5ba886
  • sideBar.background#20231f
  • sideBar.border#383b33
  • sideBar.foreground#c8c4b8
  • sideBarSectionHeader.background#20231f
  • sideBarSectionHeader.border#383b33
  • sideBarSectionHeader.foreground#c8c4b8
  • sideBarTitle.foreground#c8c4b8
  • statusBar.background#282b25
  • statusBar.border#383b33
  • statusBar.debuggingBackground#282b25
  • statusBar.debuggingForeground#c08a7d
  • statusBar.foreground#c8c4b8
  • statusBar.noFolderBackground#282b25
  • statusBarItem.activeBackground#ffffff20
  • statusBarItem.hoverBackground#ffffff10
  • statusBarItem.prominentBackground#383b33
  • statusBarItem.remoteBackground#5ba886
  • statusBarItem.remoteForeground#20231f
  • tab.activeBackground#282b25
  • tab.activeBorder#383b33
  • tab.activeBorderTop#c8c4b880
  • tab.activeForeground#c8c4b8
  • tab.border#383b33
  • tab.hoverBackground#312f2c
  • tab.hoverForeground#c8c4b8
  • tab.inactiveBackground#242721
  • tab.inactiveForeground#4d5047
  • tab.unfocusedActiveBorder#383b33
  • tab.unfocusedActiveBorderTop#383b33
  • tab.unfocusedHoverBackground#2b2e27
  • tab.unfocusedHoverForeground#c8c4b8
  • terminal.ansiBlack#383b33
  • terminal.ansiBlue#65a8b5
  • terminal.ansiBrightBlack#51544a
  • terminal.ansiBrightBlue#65a8b5
  • terminal.ansiBrightCyan#63a8a6
  • terminal.ansiBrightGreen#5ba886
  • terminal.ansiBrightMagenta#c08a7d
  • terminal.ansiBrightRed#c07878
  • terminal.ansiBrightWhite#c8c4b8
  • terminal.ansiBrightYellow#d4bf6e
  • terminal.ansiCyan#63a8a6
  • terminal.ansiGreen#5ba886
  • terminal.ansiMagenta#c08a7d
  • terminal.ansiRed#c07878
  • terminal.ansiWhite#c8c4b8
  • terminal.ansiYellow#d4bf6e
  • terminal.foreground#c8c4b8
  • terminal.selectionBackground#33362e
  • textBlockQuote.background#20231f
  • textBlockQuote.border#3a3d35
  • textCodeBlock.background#282b25
  • textLink.activeForeground#5ba886
  • textLink.foreground#5ba886
  • textPreformat.foreground#c8c4b8
  • titleBar.activeBackground#20231f
  • titleBar.activeForeground#c8c4b8
  • titleBar.border#383b33
  • titleBar.inactiveBackground#20231f
  • titleBar.inactiveForeground#4d5047
  • tree.indentGuidesStroke#383b33
  • welcomePage.buttonBackground#282b25
  • welcomePage.buttonHoverBackground#383b33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#7d867a
punctuation, delimiter, delimiter.bracket, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, storage.type.function.arrow, meta.objectliteral.ts#7f7f79
punctuation.definition.string#c48b7688
punctuation.definition.template-expression, punctuation.section.embedded#908d85
keyword, storage.type.class.jsdoc#5ba886
keyword.control.import, keyword.control.from, keyword.control.export, keyword.import, keyword.other.import#7d867a
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.trycatch#c07878
keyword.operator, keyword.operator.assignment.compound, keyword.operator.rest, keyword.operator.spread, keyword.operator.ternary, keyword.other.unit#908d85
keyword.operator.relational, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, keyword.operator.type#7f7f79
storage, storage.type, storage.modifier#c07878
storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.struct#5ba886
string, string punctuation.section.embedded source, attribute.value#c48b76
string.regexp, source.regexp#b88068
string variable#c48b76
entity.name.function, support.function#93b072
entity.name.function.macro, support.function.macro#c07878
entity, entity.name#93b072
entity.name.tag, tag.html#63a8a6
entity.name.type, support.type, support.type.primitive, support.type.builtin#63a8a6
entity.name.namespace, entity.name.module#63a8a6
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#af8d62
variable, identifier#b3a489
variable.parameter, variable.parameter.function#ad9e5e
variable.language#c07878
variable.other.property, variable.other.member, variable.other.object.property, meta.object-literal.key#b3a489
variable.other.enummember#63a8a6
property, meta.property-name, support.type.property-name, entity.name.tag.yaml, attribute.name#ad9e5e
punctuation.support.type.property-name#ad9e5e88
support#ad9e5e
constant, entity.name.constant, support.constant#b88068
constant.numeric, number#54998f
constant.character#c48b76
constant.character.escape#c07878
constant.language#b88068
constant.language.boolean#b88068
constant.language.null, constant.language.undefined#c07878
namespace#63a8a6
meta.module-reference#5ba886
entity.name.label#c48b76
markup.heading, markup.heading entity.name#93b072bold
markup.bold#c8c4b8bold
markup.italic#c8c4b8italic
markup.strikethroughstrikethrough
markup.quote#63a8a6
markup.raw#af8d62
markup.underline.link.markdown, markup.underline.link.image.markdown#5ba886underline
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#c48b76
punctuation.definition.list.begin.markdown#c07878
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#c07878
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#5ba886
markup.changed, punctuation.definition.changed#af8d62
markup.ignored, markup.untracked#383b33
meta.diff.range#63a8a6bold
meta.diff.header#65a8b5
keyword.operator.quantifier.regexp#54998f
string.regexp constant.character.escape#c07878
invalid.broken#d05060italic
invalid.deprecated#d05060italic
invalid.illegal#d05060italic
invalid.unimplemented#d05060italic
message.error#d05060
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#c8c4b8
invalid.illegal.unrecognized-tag.htmlnormal
Patina by Luis C. Markmann - VS Code Theme