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#33644d
  • activityBar.background#cdd1c6
  • activityBar.border#b4b9ac
  • activityBar.foreground#393a34
  • activityBar.inactiveForeground#80857a
  • activityBarBadge.background#393a34
  • activityBarBadge.foreground#cdd1c6
  • badge.background#393a3490
  • badge.foreground#cdd1c6
  • breadcrumb.activeSelectionForeground#393a34
  • breadcrumb.background#c2c6bb
  • breadcrumb.focusForeground#393a34
  • breadcrumb.foreground#80857a
  • breadcrumbPicker.background#c5c9be
  • button.background#33644d
  • button.foreground#cdd1c6
  • button.hoverBackground#4d9375
  • checkbox.background#c2c6bb
  • checkbox.border#a7ada0
  • commandCenter.activeBackground#bcc1b6
  • commandCenter.activeForeground#393a34
  • commandCenter.background#c5c9be
  • commandCenter.border#a7ada0
  • commandCenter.foreground#393a34
  • debugToolBar.background#c2c6bb
  • descriptionForeground#393a3490
  • diffEditor.insertedTextBackground#33644d20
  • diffEditor.removedTextBackground#8b464620
  • dropdown.background#c2c6bb
  • dropdown.border#a7ada0
  • dropdown.foreground#393a34
  • dropdown.listBackground#cdd1c6
  • editor.background#cdd1c6
  • editor.findMatchBackground#33644d40
  • editor.findMatchHighlightBackground#33644d25
  • editor.focusedStackFrameHighlightBackground#33644d20
  • editor.foldBackground#393a3408
  • editor.foreground#393a34
  • editor.inactiveSelectionBackground#bcc1b680
  • editor.lineHighlightBackground#c5c9be
  • editor.selectionBackground#b4b9ac
  • editor.selectionHighlightBackground#b4b9ac60
  • editor.stackFrameHighlightBackground#7f503120
  • editor.wordHighlightBackground#bcc1b640
  • editor.wordHighlightStrongBackground#bcc1b660
  • editorBracketHighlight.foreground1#2a6361
  • editorBracketHighlight.foreground2#854b3f
  • editorBracketHighlight.foreground3#7f5031
  • editorBracketHighlight.foreground4#426338
  • editorBracketHighlight.foreground5#8b4646
  • editorBracketHighlight.foreground6#2e645d
  • editorBracketMatch.background#2a636120
  • editorBracketMatch.border#2a636140
  • editorError.foreground#a23333
  • editorGroup.border#a7ada0
  • editorGroupHeader.tabsBackground#c9cdc2
  • editorGroupHeader.tabsBorder#b4b9ac
  • editorGutter.addedBackground#33644d
  • editorGutter.commentRangeForeground#909488
  • editorGutter.deletedBackground#8b4646
  • editorGutter.foldingControlForeground#909488
  • editorGutter.modifiedBackground#35616d
  • editorHint.foreground#5f6a5f
  • editorHoverWidget.background#c5c9be
  • editorHoverWidget.border#a7ada0
  • editorHoverWidget.foreground#393a34
  • editorIndentGuide.activeBackground#909488
  • editorIndentGuide.background#b4b9ac
  • editorInfo.foreground#35616d
  • editorInlayHint.background#cdd1c600
  • editorInlayHint.foreground#80857a
  • editorLineNumber.activeForeground#393a34
  • editorLineNumber.foreground#909488
  • editorOverviewRuler.border#cdd1c6
  • editorRuler.foreground#c2c6bb
  • editorStickyScroll.background#c9cdc2
  • editorStickyScrollHover.background#c2c6bb
  • editorSuggestWidget.background#c5c9be
  • editorSuggestWidget.border#a7ada0
  • editorSuggestWidget.focusHighlightForeground#33644d
  • editorSuggestWidget.foreground#393a34
  • editorSuggestWidget.highlightForeground#33644d
  • editorSuggestWidget.selectedBackground#a7ada0
  • editorSuggestWidget.selectedForeground#393a34
  • editorWarning.foreground#bda437
  • editorWhitespace.foreground#b4b9ac
  • editorWidget.background#c5c9be
  • errorForeground#8b4646
  • focusBorder#00000000
  • foreground#393a34
  • gitDecoration.addedResourceForeground#33644d
  • gitDecoration.conflictingResourceForeground#7f5031
  • gitDecoration.deletedResourceForeground#8b4646
  • gitDecoration.ignoredResourceForeground#80857a
  • gitDecoration.modifiedResourceForeground#35616d
  • gitDecoration.submoduleResourceForeground#393a3490
  • gitDecoration.untrackedResourceForeground#2a6361
  • input.background#cdd1c6
  • input.border#a7ada0
  • input.foreground#393a34
  • input.placeholderForeground#393a3450
  • inputOption.activeBackground#393a3420
  • list.activeSelectionBackground#a7ada0
  • list.activeSelectionForeground#393a34
  • list.focusBackground#a7ada0
  • list.focusForeground#393a34
  • list.highlightForeground#33644d
  • list.hoverBackground#bcc1b6
  • list.hoverForeground#393a34
  • list.inactiveFocusBackground#bcc1b6
  • list.inactiveSelectionBackground#b4b9ac
  • list.inactiveSelectionForeground#393a34
  • menu.background#c5c9be
  • menu.border#a7ada0
  • menu.foreground#393a34
  • menu.selectionBackground#a7ada0
  • menu.selectionForeground#393a34
  • menu.separatorBackground#b4b9ac
  • menubar.selectionBackground#bcc1b6
  • menubar.selectionForeground#393a34
  • minimap.errorHighlight#a23333
  • minimap.findMatchHighlight#33644d60
  • minimap.selectionHighlight#b4b9ac
  • minimap.warningHighlight#bda437
  • notificationCenterHeader.background#c5c9be
  • notificationCenterHeader.foreground#393a34
  • notifications.background#c5c9be
  • notifications.border#a7ada0
  • notifications.foreground#393a34
  • notificationsErrorIcon.foreground#8b4646
  • notificationsInfoIcon.foreground#35616d
  • notificationsWarningIcon.foreground#bda437
  • panel.background#cdd1c6
  • panel.border#b4b9ac
  • panelInput.border#a7ada0
  • panelTitle.activeBorder#33644d
  • panelTitle.activeForeground#393a34
  • panelTitle.inactiveForeground#80857a
  • peekViewEditor.background#cdd1c6
  • peekViewEditor.matchHighlightBackground#bda43733
  • peekViewResult.background#c5c9be
  • peekViewResult.matchHighlightBackground#bda43733
  • peekViewResult.selectionBackground#a7ada0
  • peekViewResult.selectionForeground#393a34
  • pickerGroup.border#a7ada0
  • pickerGroup.foreground#393a34
  • problemsErrorIcon.foreground#a23333
  • problemsInfoIcon.foreground#35616d
  • problemsWarningIcon.foreground#bda437
  • progressBar.background#33644d
  • quickInput.background#c5c9be
  • quickInput.foreground#393a34
  • quickInputList.focusBackground#bcc1b6
  • quickInputList.focusForeground#393a34
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#393a3430
  • scrollbarSlider.background#393a3410
  • scrollbarSlider.hoverBackground#393a3430
  • settings.headerForeground#393a34
  • settings.modifiedItemIndicator#33644d
  • sideBar.background#c5c9be
  • sideBar.border#b4b9ac
  • sideBar.foreground#393a34
  • sideBarSectionHeader.background#c5c9be
  • sideBarSectionHeader.border#b4b9ac
  • sideBarSectionHeader.foreground#393a34
  • sideBarTitle.foreground#393a34
  • statusBar.background#c2c6bb
  • statusBar.border#b4b9ac
  • statusBar.debuggingBackground#c2c6bb
  • statusBar.debuggingForeground#854b3f
  • statusBar.foreground#393a34
  • statusBar.noFolderBackground#c2c6bb
  • statusBarItem.activeBackground#00000020
  • statusBarItem.hoverBackground#00000010
  • statusBarItem.prominentBackground#b4b9ac
  • statusBarItem.remoteBackground#33644d
  • statusBarItem.remoteForeground#cdd1c6
  • tab.activeBackground#cdd1c6
  • tab.activeBorder#b4b9ac
  • tab.activeBorderTop#393a3480
  • tab.activeForeground#393a34
  • tab.border#b4b9ac
  • tab.hoverBackground#bcc1b6
  • tab.hoverForeground#393a34
  • tab.inactiveBackground#c9cdc2
  • tab.inactiveForeground#80857a
  • tab.unfocusedActiveBorder#b4b9ac
  • tab.unfocusedActiveBorderTop#b4b9ac
  • tab.unfocusedHoverBackground#c2c6bb
  • tab.unfocusedHoverForeground#393a34
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#35616d
  • terminal.ansiBrightBlack#80857a
  • terminal.ansiBrightBlue#35616d
  • terminal.ansiBrightCyan#2a6361
  • terminal.ansiBrightGreen#33644d
  • terminal.ansiBrightMagenta#854b3f
  • terminal.ansiBrightRed#8b4646
  • terminal.ansiBrightWhite#393a34
  • terminal.ansiBrightYellow#bda437
  • terminal.ansiCyan#2a6361
  • terminal.ansiGreen#33644d
  • terminal.ansiMagenta#854b3f
  • terminal.ansiRed#8b4646
  • terminal.ansiWhite#cdd1c6
  • terminal.ansiYellow#bda437
  • terminal.foreground#393a34
  • terminal.selectionBackground#b4b9ac
  • textBlockQuote.background#cdd1c6
  • textBlockQuote.border#a7ada0
  • textCodeBlock.background#c2c6bb
  • textLink.activeForeground#33644d
  • textLink.foreground#33644d
  • textPreformat.foreground#393a34
  • titleBar.activeBackground#cdd1c6
  • titleBar.activeForeground#393a34
  • titleBar.border#b4b9ac
  • titleBar.inactiveBackground#cdd1c6
  • titleBar.inactiveForeground#80857a
  • tree.indentGuidesStroke#b4b9ac
  • welcomePage.buttonBackground#c2c6bb
  • welcomePage.buttonHoverBackground#b4b9ac

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#5f6a5f
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#5b5b54
punctuation.definition.string#854b3f88
punctuation.definition.template-expression, punctuation.section.embedded#6b6a62
keyword, storage.type.class.jsdoc#33644d
keyword.control.import, keyword.control.from, keyword.control.export, keyword.import, keyword.other.import#5f6a5f
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.trycatch#8b4646
keyword.operator, keyword.operator.assignment.compound, keyword.operator.rest, keyword.operator.spread, keyword.operator.ternary, keyword.other.unit#6b6a62
keyword.operator.relational, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, keyword.operator.type#6b6a62
storage, storage.type, storage.modifier#8b4646
storage.type.function, storage.type.class, storage.type.interface, storage.type.enum, storage.type.struct#33644d
string, string punctuation.section.embedded source, attribute.value#6b6a62
string.regexp, source.regexp#7f5031
string variable#854b3f
entity.name.function, support.function#426338
entity.name.function.macro, support.function.macro#8b4646
entity, entity.name#426338
entity.name.tag, tag.html#2a6361
entity.name.type, support.type, support.type.primitive, support.type.builtin#2a6361
entity.name.namespace, entity.name.module#2a6361
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#615c49
variable, identifier#615c49
variable.parameter, variable.parameter.function#5e5c23
variable.language#8b4646
variable.other.property, variable.other.member, variable.other.object.property, meta.object-literal.key#615c49
variable.other.enummember#2a6361
property, meta.property-name, support.type.property-name, entity.name.tag.yaml, attribute.name#5e5c23
punctuation.support.type.property-name#5e5c2388
support#5e5c23
constant, entity.name.constant, support.constant#7f5031
constant.numeric, number#2e645d
constant.character#854b3f
constant.character.escape#8b4646
constant.language#7f5031
constant.language.boolean#7f5031
constant.language.null, constant.language.undefined#8b4646
namespace#2a6361
meta.module-reference#33644d
entity.name.label#854b3f
markup.heading, markup.heading entity.name#426338bold
markup.bold#393a34bold
markup.italic#393a34italic
markup.strikethroughstrikethrough
markup.quote#2a6361
markup.raw#615c49
markup.underline.link.markdown, markup.underline.link.image.markdown#33644dunderline
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#854b3f
punctuation.definition.list.begin.markdown#8b4646
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#8b4646
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#33644d
markup.changed, punctuation.definition.changed#7f5031
markup.ignored, markup.untracked#b4b9ac
meta.diff.range#2a6361bold
meta.diff.header#35616d
keyword.operator.quantifier.regexp#6b6a62
string.regexp constant.character.escape#8b4646
invalid.broken#a23333italic
invalid.deprecated#a23333italic
invalid.illegal#a23333italic
invalid.unimplemented#a23333italic
message.error#a23333
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#393a34
invalid.illegal.unrecognized-tag.htmlnormal