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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#666e65
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#7a352788
punctuation.definition.template-expression, punctuation.section.embedded#645c52
keyword, storage.type.class.jsdoc#33644d
keyword.control.import, keyword.control.from, keyword.control.export, keyword.import, keyword.other.import#666e65
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#645c52
keyword.operator.relational, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, keyword.operator.type#5b5b54
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#7a3527
string.regexp, source.regexp#7f5031
string variable#7a3527
entity.name.function, support.function#2f5418
entity.name.function.macro, support.function.macro#8b4646
entity, entity.name#2f5418
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#6e5831
variable, identifier#574d3a
variable.parameter, variable.parameter.function#5e5c23
variable.language#8b4646
variable.other.property, variable.other.member, variable.other.object.property, meta.object-literal.key#574d3a
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#7a3527
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#7a3527
markup.heading, markup.heading entity.name#2f5418bold
markup.bold#393a34bold
markup.italic#393a34italic
markup.strikethroughstrikethrough
markup.quote#2a6361
markup.raw#6e5831
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#7a3527
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#c2bdad
meta.diff.range#2a6361bold
meta.diff.header#35616d
keyword.operator.quantifier.regexp#2e645d
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