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#3e7a5e
  • activityBar.background#f5f2ed
  • activityBar.border#d5d2cb
  • activityBar.foreground#393a34
  • activityBar.inactiveForeground#999999
  • activityBarBadge.background#393a34
  • activityBarBadge.foreground#f5f2ed
  • badge.background#393a3490
  • badge.foreground#f5f2ed
  • breadcrumb.activeSelectionForeground#393a34
  • breadcrumb.background#eae7e0
  • breadcrumb.focusForeground#393a34
  • breadcrumb.foreground#999999
  • breadcrumbPicker.background#f5f2ed
  • button.background#3e7a5e
  • button.foreground#f5f2ed
  • button.hoverBackground#4d9375
  • checkbox.background#eae7e0
  • checkbox.border#c8c5be
  • commandCenter.activeBackground#e0ddd6
  • commandCenter.activeForeground#393a34
  • commandCenter.background#f5f2ed
  • commandCenter.border#c8c5be
  • commandCenter.foreground#393a34
  • debugToolBar.background#eae7e0
  • descriptionForeground#393a3490
  • diffEditor.insertedTextBackground#3e7a5e20
  • diffEditor.removedTextBackground#a4535320
  • dropdown.background#eae7e0
  • dropdown.border#c8c5be
  • dropdown.foreground#393a34
  • dropdown.listBackground#f5f2ed
  • editor.background#f5f2ed
  • editor.findMatchBackground#3e7a5e40
  • editor.findMatchHighlightBackground#3e7a5e25
  • editor.focusedStackFrameHighlightBackground#3e7a5e20
  • editor.foldBackground#393a3408
  • editor.foreground#393a34
  • editor.inactiveSelectionBackground#d5d2cb80
  • editor.lineHighlightBackground#eae7e0
  • editor.selectionBackground#d5d2cb
  • editor.selectionHighlightBackground#d5d2cb60
  • editor.stackFrameHighlightBackground#955e3a20
  • editor.wordHighlightBackground#d5d2cb40
  • editor.wordHighlightStrongBackground#d5d2cb60
  • editorBracketHighlight.foreground1#337675
  • editorBracketHighlight.foreground2#8e4232
  • editorBracketHighlight.foreground3#955e3a
  • editorBracketHighlight.foreground4#3a661a
  • editorBracketHighlight.foreground5#a45353
  • editorBracketHighlight.foreground6#36756d
  • editorBracketMatch.background#33767520
  • editorBracketMatch.border#33767540
  • editorError.foreground#bf3c3c
  • editorGroup.border#c8c5be
  • editorGroupHeader.tabsBackground#f0ede6
  • editorGroupHeader.tabsBorder#d5d2cb
  • editorGutter.addedBackground#3e7a5e
  • editorGutter.commentRangeForeground#b0ada6
  • editorGutter.deletedBackground#a45353
  • editorGutter.foldingControlForeground#b0ada6
  • editorGutter.modifiedBackground#3f7381
  • editorHint.foreground#5e7052
  • editorHoverWidget.background#f5f2ed
  • editorHoverWidget.border#c8c5be
  • editorHoverWidget.foreground#393a34
  • editorIndentGuide.activeBackground#b0ada6
  • editorIndentGuide.background#d5d2cb
  • editorInfo.foreground#3f7381
  • editorInlayHint.background#eae7e000
  • editorInlayHint.foreground#999999
  • editorLineNumber.activeForeground#393a34
  • editorLineNumber.foreground#b0ada6
  • editorOverviewRuler.border#f5f2ed
  • editorRuler.foreground#eae7e0
  • editorStickyScroll.background#f0ede6
  • editorStickyScrollHover.background#eae7e0
  • editorSuggestWidget.background#f5f2ed
  • editorSuggestWidget.border#c8c5be
  • editorSuggestWidget.focusHighlightForeground#3e7a5e
  • editorSuggestWidget.foreground#393a34
  • editorSuggestWidget.highlightForeground#3e7a5e
  • editorSuggestWidget.selectedBackground#c8c5be
  • editorSuggestWidget.selectedForeground#393a34
  • editorWarning.foreground#bda437
  • editorWhitespace.foreground#d5d2cb
  • editorWidget.background#f5f2ed
  • errorForeground#a45353
  • focusBorder#00000000
  • foreground#393a34
  • gitDecoration.addedResourceForeground#3e7a5e
  • gitDecoration.conflictingResourceForeground#955e3a
  • gitDecoration.deletedResourceForeground#a45353
  • gitDecoration.ignoredResourceForeground#999999
  • gitDecoration.modifiedResourceForeground#3f7381
  • gitDecoration.submoduleResourceForeground#393a3490
  • gitDecoration.untrackedResourceForeground#337675
  • input.background#f5f2ed
  • input.border#c8c5be
  • input.foreground#393a34
  • input.placeholderForeground#393a3450
  • inputOption.activeBackground#393a3420
  • list.activeSelectionBackground#c8c5be
  • list.activeSelectionForeground#393a34
  • list.focusBackground#c8c5be
  • list.focusForeground#393a34
  • list.highlightForeground#3e7a5e
  • list.hoverBackground#e0ddd6
  • list.hoverForeground#393a34
  • list.inactiveFocusBackground#e0ddd6
  • list.inactiveSelectionBackground#d5d2cb
  • list.inactiveSelectionForeground#393a34
  • menu.background#f5f2ed
  • menu.border#c8c5be
  • menu.foreground#393a34
  • menu.selectionBackground#c8c5be
  • menu.selectionForeground#393a34
  • menu.separatorBackground#d5d2cb
  • menubar.selectionBackground#e0ddd6
  • menubar.selectionForeground#393a34
  • minimap.errorHighlight#bf3c3c
  • minimap.findMatchHighlight#3e7a5e60
  • minimap.selectionHighlight#d5d2cb
  • minimap.warningHighlight#bda437
  • notificationCenterHeader.background#f5f2ed
  • notificationCenterHeader.foreground#393a34
  • notifications.background#f5f2ed
  • notifications.border#c8c5be
  • notifications.foreground#393a34
  • notificationsErrorIcon.foreground#a45353
  • notificationsInfoIcon.foreground#3f7381
  • notificationsWarningIcon.foreground#bda437
  • panel.background#f5f2ed
  • panel.border#d5d2cb
  • panelInput.border#c8c5be
  • panelTitle.activeBorder#3e7a5e
  • panelTitle.activeForeground#393a34
  • panelTitle.inactiveForeground#999999
  • peekViewEditor.background#f5f2ed
  • peekViewEditor.matchHighlightBackground#bda43733
  • peekViewResult.background#f5f2ed
  • peekViewResult.matchHighlightBackground#bda43733
  • peekViewResult.selectionBackground#c8c5be
  • peekViewResult.selectionForeground#393a34
  • pickerGroup.border#c8c5be
  • pickerGroup.foreground#393a34
  • problemsErrorIcon.foreground#bf3c3c
  • problemsInfoIcon.foreground#3f7381
  • problemsWarningIcon.foreground#bda437
  • progressBar.background#3e7a5e
  • quickInput.background#f5f2ed
  • quickInput.foreground#393a34
  • quickInputList.focusBackground#e0ddd6
  • quickInputList.focusForeground#393a34
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#393a3430
  • scrollbarSlider.background#393a3410
  • scrollbarSlider.hoverBackground#393a3430
  • settings.headerForeground#393a34
  • settings.modifiedItemIndicator#3e7a5e
  • sideBar.background#f5f2ed
  • sideBar.border#d5d2cb
  • sideBar.foreground#393a34
  • sideBarSectionHeader.background#f5f2ed
  • sideBarSectionHeader.border#d5d2cb
  • sideBarSectionHeader.foreground#393a34
  • sideBarTitle.foreground#393a34
  • statusBar.background#eae7e0
  • statusBar.border#d5d2cb
  • statusBar.debuggingBackground#eae7e0
  • statusBar.debuggingForeground#8e4232
  • statusBar.foreground#393a34
  • statusBar.noFolderBackground#eae7e0
  • statusBarItem.activeBackground#00000020
  • statusBarItem.hoverBackground#00000010
  • statusBarItem.prominentBackground#d5d2cb
  • statusBarItem.remoteBackground#3e7a5e
  • statusBarItem.remoteForeground#f5f2ed
  • tab.activeBackground#f5f2ed
  • tab.activeBorder#d5d2cb
  • tab.activeBorderTop#393a3480
  • tab.activeForeground#393a34
  • tab.border#d5d2cb
  • tab.hoverBackground#e0ddd6
  • tab.hoverForeground#393a34
  • tab.inactiveBackground#f0ede6
  • tab.inactiveForeground#999999
  • tab.unfocusedActiveBorder#d5d2cb
  • tab.unfocusedActiveBorderTop#d5d2cb
  • tab.unfocusedHoverBackground#eae7e0
  • tab.unfocusedHoverForeground#393a34
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#3f7381
  • terminal.ansiBrightBlack#999999
  • terminal.ansiBrightBlue#3f7381
  • terminal.ansiBrightCyan#337675
  • terminal.ansiBrightGreen#3e7a5e
  • terminal.ansiBrightMagenta#9d594b
  • terminal.ansiBrightRed#a45353
  • terminal.ansiBrightWhite#393a34
  • terminal.ansiBrightYellow#bda437
  • terminal.ansiCyan#337675
  • terminal.ansiGreen#3e7a5e
  • terminal.ansiMagenta#9d594b
  • terminal.ansiRed#a45353
  • terminal.ansiWhite#f5f2ed
  • terminal.ansiYellow#bda437
  • terminal.foreground#393a34
  • terminal.selectionBackground#d5d2cb
  • textBlockQuote.background#f5f2ed
  • textBlockQuote.border#e0ddd6
  • textCodeBlock.background#eae7e0
  • textLink.activeForeground#3e7a5e
  • textLink.foreground#3e7a5e
  • textPreformat.foreground#393a34
  • titleBar.activeBackground#f5f2ed
  • titleBar.activeForeground#393a34
  • titleBar.border#d5d2cb
  • titleBar.inactiveBackground#f5f2ed
  • titleBar.inactiveForeground#999999
  • tree.indentGuidesStroke#d5d2cb
  • welcomePage.buttonBackground#eae7e0
  • welcomePage.buttonHoverBackground#d5d2cb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#767e75
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#6c6c6c
punctuation.definition.string#8e423288
punctuation.definition.template-expression, punctuation.section.embedded#736d66
keyword, storage.type.class.jsdoc#3e7a5e
keyword.control.import, keyword.control.from, keyword.control.export, keyword.import, keyword.other.import#767e75
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.trycatch#a45353
keyword.operator, keyword.operator.assignment.compound, keyword.operator.rest, keyword.operator.spread, keyword.operator.ternary, keyword.other.unit#736d66
keyword.operator.relational, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, keyword.operator.type#6c6c6c
storage, storage.type, storage.modifier#a45353
storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.struct#3e7a5e
string, string punctuation.section.embedded source, attribute.value#8e4232
string.regexp, source.regexp#955e3a
string variable#8e4232
entity.name.function, support.function#3a661a
entity.name.function.macro, support.function.macro#a45353
entity, entity.name#3a661a
entity.name.tag, tag.html#337675
entity.name.type, support.type, support.type.primitive, support.type.builtin#337675
entity.name.namespace, entity.name.module#337675
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#81673a
variable, identifier#6a5f44
variable.parameter, variable.parameter.function#706f2a
variable.language#a45353
variable.other.property, variable.other.member, variable.other.object.property, meta.object-literal.key#6a5f44
variable.other.enummember#337675
property, meta.property-name, support.type.property-name, entity.name.tag.yaml, attribute.name#706f2a
punctuation.support.type.property-name#706f2a88
support#706f2a
constant, entity.name.constant, support.constant#955e3a
constant.numeric, number#36756d
constant.character#8e4232
constant.character.escape#a45353
constant.language#955e3a
constant.language.boolean#955e3a
constant.language.null, constant.language.undefined#a45353
namespace#337675
meta.module-reference#3e7a5e
entity.name.label#8e4232
markup.heading, markup.heading entity.name#3a661abold
markup.bold#393a34bold
markup.italic#393a34italic
markup.strikethroughstrikethrough
markup.quote#337675
markup.raw#81673a
markup.underline.link.markdown, markup.underline.link.image.markdown#3e7a5eunderline
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#8e4232
punctuation.definition.list.begin.markdown#a45353
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#a45353
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#3e7a5e
markup.changed, punctuation.definition.changed#955e3a
markup.ignored, markup.untracked#d5d2cb
meta.diff.range#337675bold
meta.diff.header#3f7381
keyword.operator.quantifier.regexp#36756d
string.regexp constant.character.escape#a45353
invalid.broken#bf3c3citalic
invalid.deprecated#bf3c3citalic
invalid.illegal#bf3c3citalic
invalid.unimplemented#bf3c3citalic
message.error#bf3c3c
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#393a34
invalid.illegal.unrecognized-tag.htmlnormal