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.activeBackground#DFD3BE
  • activityBar.activeBorder#00000000
  • activityBar.background#EAE2D4
  • activityBar.border#E3D8C4
  • activityBar.foreground#B06A32
  • activityBar.inactiveForeground#A89C8A
  • activityBarBadge.background#B06A32
  • activityBarBadge.foreground#FEFBF6
  • activityBarTop.activeBackground#DFD3BE
  • activityBarTop.activeBorder#00000000
  • activityBarTop.background#EAE2D4
  • activityBarTop.dropBorder#B06A32
  • activityBarTop.foreground#B06A32
  • activityBarTop.inactiveForeground#A89C8A
  • badge.background#B06A32
  • badge.foreground#FEFBF6
  • breadcrumb.activeSelectionForeground#B06A32
  • breadcrumb.background#F5F0E8
  • breadcrumb.focusForeground#3A322E
  • breadcrumb.foreground#9A8C78
  • breadcrumbPicker.background#FBF8F2
  • button.background#B06A32
  • button.border#B06A32
  • button.foreground#FEFBF6
  • button.hoverBackground#C0793B
  • button.secondaryBackground#E9DFCE
  • button.secondaryBorder#DFD3BE
  • button.secondaryForeground#6B5D4A
  • button.secondaryHoverBackground#DFD3BE
  • chat.avatarBackground#B06A32
  • chat.avatarForeground#FEFBF6
  • chat.editedFileForeground#B06A32
  • chat.requestBackground#F3EDE1
  • chat.requestBorder#E3D8C4
  • chat.requestBubbleBackground#F3EDE1
  • chat.requestBubbleHoverBackground#E9DFCE
  • chat.slashCommandBackground#B06A3226
  • chat.slashCommandForeground#B06A32
  • commandCenter.activeBackground#EFE8DA
  • commandCenter.activeForeground#3A322E
  • commandCenter.background#FBF8F2
  • commandCenter.border#E3D8C4
  • commandCenter.foreground#85796B
  • commandCenter.inactiveForeground#9A8C78
  • debugToolBar.background#FBF8F2
  • debugToolBar.border#E3D8C4
  • descriptionForeground#85796B
  • dropdown.background#FDFBF7
  • dropdown.border#D5C7B0
  • dropdown.foreground#3A322E
  • editor.background#D6C5A5
  • editor.findMatchBackground#B06A3240
  • editor.findMatchHighlightBackground#B06A3226
  • editor.focusedStackFrameHighlightBackground#41854F26
  • editor.foreground#3A322E
  • editor.inactiveSelectionBackground#B06A321F
  • editor.lineHighlightBackground#EDE5D5
  • editor.lineHighlightBorder#EDE5D5
  • editor.rangeHighlightBackground#B06A321A
  • editor.selectionBackground#B06A3230
  • editor.selectionHighlightBackground#B06A3226
  • editor.stackFrameHighlightBackground#A96A1E26
  • editor.wordHighlightBackground#B06A3220
  • editor.wordHighlightStrongBackground#B06A3233
  • editorBracketHighlight.foreground1#B06A32
  • editorBracketHighlight.foreground2#2F7DA0
  • editorBracketHighlight.foreground3#A96A1E
  • editorBracketHighlight.foreground4#41854F
  • editorBracketHighlight.foreground5#3A322E
  • editorBracketHighlight.foreground6#85796B
  • editorBracketHighlight.unexpectedBracket.foreground#C14A3B
  • editorBracketMatch.background#B06A3226
  • editorBracketMatch.border#B06A32
  • editorCursor.foreground#B06A32
  • editorError.foreground#C14A3B
  • editorGhostText.border#E3D8C4
  • editorGhostText.foreground#B3A793
  • editorGroup.border#E3D8C4
  • editorGroupHeader.noTabsBackground#F5F0E8
  • editorGroupHeader.tabsBackground#EFE8DA
  • editorGutter.addedBackground#41854F
  • editorGutter.background#D6C5A5
  • editorGutter.deletedBackground#C14A3B
  • editorGutter.modifiedBackground#A96A1E
  • editorHint.foreground#41854F
  • editorHoverWidget.background#FBF8F2
  • editorHoverWidget.border#E3D8C4
  • editorIndentGuide.activeBackground1#D5C7B0
  • editorIndentGuide.background1#EDE5D5
  • editorInfo.foreground#2F7DA0
  • editorLineNumber.activeForeground#B06A32
  • editorLineNumber.foreground#B3A793
  • editorRuler.foreground#E3D8C4
  • editorSuggestWidget.background#FBF8F2
  • editorSuggestWidget.border#E3D8C4
  • editorSuggestWidget.foreground#3A322E
  • editorSuggestWidget.highlightForeground#B06A32
  • editorSuggestWidget.selectedBackground#B06A32
  • editorSuggestWidget.selectedForeground#FEFBF6
  • editorWarning.foreground#A96A1E
  • editorWhitespace.foreground#DDD2BF
  • editorWidget.background#FBF8F2
  • editorWidget.border#E3D8C4
  • errorForeground#C14A3B
  • extensionBadge.remoteBackground#B06A32
  • extensionBadge.remoteForeground#FEFBF6
  • extensionButton.prominentBackground#B06A32
  • extensionButton.prominentForeground#FEFBF6
  • extensionButton.prominentHoverBackground#C0793B
  • focusBorder#00000000
  • foreground#3A322E
  • gitDecoration.addedResourceForeground#41854F
  • gitDecoration.conflictingResourceForeground#C14A3B
  • gitDecoration.deletedResourceForeground#C14A3B
  • gitDecoration.ignoredResourceForeground#B3A793
  • gitDecoration.modifiedResourceForeground#A96A1E
  • gitDecoration.untrackedResourceForeground#41854F
  • icon.foreground#8A7A66
  • inlineChat.background#F3EDE1
  • inlineChat.border#B06A32
  • inlineChat.foreground#3A322E
  • inlineChat.shadow#3A322E1F
  • inlineChatInput.background#FDFBF7
  • inlineChatInput.border#B06A32
  • inlineChatInput.placeholderForeground#9A8C78
  • input.background#FDFBF7
  • input.border#D5C7B0
  • input.foreground#3A322E
  • input.placeholderForeground#9A8C78
  • inputOption.activeBackground#B06A32
  • inputOption.activeForeground#FEFBF6
  • inputValidation.errorBackground#C14A3B14
  • inputValidation.errorBorder#C14A3B
  • inputValidation.infoBackground#2F7DA014
  • inputValidation.infoBorder#2F7DA0
  • inputValidation.warningBackground#A96A1E14
  • inputValidation.warningBorder#A96A1E
  • list.activeSelectionBackground#CDBF9F
  • list.activeSelectionForeground#3A322E
  • list.errorForeground#C14A3B
  • list.focusForeground#3A322E
  • list.focusOutline#B06A32
  • list.highlightForeground#B06A32
  • list.hoverBackground#CDBF9F
  • list.hoverForeground#3A322E
  • list.inactiveSelectionBackground#CDBF9F
  • list.inactiveSelectionForeground#3A322E
  • list.warningForeground#A96A1E
  • menu.background#FBF8F2
  • menu.foreground#3A322E
  • menu.selectionBackground#B06A32
  • menu.selectionForeground#FEFBF6
  • menu.separatorBackground#E3D8C4
  • menubar.selectionBackground#E9DFCE
  • menubar.selectionForeground#B06A32
  • minimap.background#D6C5A5
  • minimap.errorHighlight#C14A3B
  • minimap.selectionHighlight#B06A3280
  • minimap.warningHighlight#A96A1E
  • minimapGutter.addedBackground#41854F
  • minimapGutter.deletedBackground#C14A3B
  • minimapGutter.modifiedBackground#A96A1E
  • notificationCenterHeader.background#F3EDE1
  • notificationCenterHeader.foreground#85796B
  • notificationLink.foreground#9C5E2A
  • notifications.background#FBF8F2
  • notifications.border#E3D8C4
  • notifications.foreground#3A322E
  • notificationsErrorIcon.foreground#C14A3B
  • notificationsInfoIcon.foreground#2F7DA0
  • notificationsWarningIcon.foreground#A96A1E
  • panel.background#F5F0E8
  • panel.border#E3D8C4
  • panelTitle.activeBorder#B06A32
  • panelTitle.activeForeground#3A322E
  • panelTitle.inactiveForeground#9A8C78
  • peekView.border#B06A32
  • peekViewEditor.background#FBF8F2
  • peekViewEditor.matchHighlightBackground#B06A3240
  • peekViewResult.background#F3EDE1
  • peekViewResult.fileForeground#3A322E
  • peekViewResult.lineForeground#85796B
  • peekViewResult.matchHighlightBackground#B06A3240
  • peekViewResult.selectionBackground#B06A32
  • peekViewResult.selectionForeground#FEFBF6
  • peekViewTitle.background#FBF8F2
  • peekViewTitleDescription.foreground#85796B
  • peekViewTitleLabel.foreground#3A322E
  • pickerGroup.border#E3D8C4
  • pickerGroup.foreground#B06A32
  • quickInput.background#FBF8F2
  • quickInput.foreground#3A322E
  • quickInputTitle.background#F3EDE1
  • scrollbar.shadow#3A322E1F
  • scrollbarSlider.activeBackground#B06A3259
  • scrollbarSlider.background#B3A79359
  • scrollbarSlider.hoverBackground#B3A79373
  • selection.background#B06A3240
  • settings.checkboxBackground#FDFBF7
  • settings.checkboxForeground#3A322E
  • settings.dropdownBackground#FDFBF7
  • settings.dropdownForeground#3A322E
  • settings.headerForeground#85796B
  • settings.modifiedItemIndicator#B06A32
  • settings.numberInputBackground#FDFBF7
  • settings.numberInputForeground#3A322E
  • settings.textInputBackground#FDFBF7
  • settings.textInputForeground#3A322E
  • sideBar.background#F3EDE1
  • sideBar.border#E7DCCA
  • sideBar.foreground#3A322E
  • sideBarSectionHeader.background#EFE8DA
  • sideBarSectionHeader.foreground#85796B
  • sideBarTitle.foreground#85796B
  • statusBar.background#E3D8C4
  • statusBar.border#D9CCB5
  • statusBar.debuggingBackground#B06A32
  • statusBar.debuggingForeground#FEFBF6
  • statusBar.foreground#4A4035
  • statusBar.noFolderBackground#E3D8C4
  • statusBarItem.activeBackground#B6A577
  • statusBarItem.errorBackground#E3D8C4
  • statusBarItem.errorForeground#C14A3B
  • statusBarItem.hoverBackground#B6A577
  • statusBarItem.hoverForeground#B06A32
  • statusBarItem.prominentBackground#DFD3BE
  • statusBarItem.prominentForeground#B06A32
  • statusBarItem.prominentHoverBackground#DFD3BE
  • statusBarItem.remoteBackground#D9CCB5
  • statusBarItem.remoteForeground#6B5D4A
  • statusBarItem.warningBackground#E3D8C4
  • statusBarItem.warningForeground#A96A1E
  • tab.activeBackground#FBF8F2
  • tab.activeBorder#B06A32
  • tab.activeBorderTop#B06A32
  • tab.activeForeground#3A322E
  • tab.border#E3D8C4
  • tab.hoverBackground#E9DFCE
  • tab.hoverForeground#3A322E
  • tab.inactiveBackground#EFE8DA
  • tab.inactiveForeground#85796B
  • tab.unfocusedActiveBackground#F3EDE1
  • tab.unfocusedActiveForeground#85796B
  • tab.unfocusedInactiveForeground#9A8C78
  • terminal.ansiBlack#4A3F34
  • terminal.ansiBlue#2F7DA0
  • terminal.ansiBrightBlack#85796B
  • terminal.ansiBrightBlue#2F7DA0
  • terminal.ansiBrightCyan#2F7DA0
  • terminal.ansiBrightGreen#41854F
  • terminal.ansiBrightMagenta#9250A6
  • terminal.ansiBrightRed#C14A3B
  • terminal.ansiBrightWhite#FFFDF8
  • terminal.ansiBrightYellow#A96A1E
  • terminal.ansiCyan#2F7DA0
  • terminal.ansiGreen#41854F
  • terminal.ansiMagenta#9250A6
  • terminal.ansiRed#C14A3B
  • terminal.ansiWhite#FDFBF7
  • terminal.ansiYellow#A96A1E
  • terminal.background#F5F0E8
  • terminal.border#E3D8C4
  • terminal.dropBackground#FBF8F2
  • terminal.dropBorder#B06A32
  • terminal.dropForeground#3A322E
  • terminal.findMatchHighlightBackground#B06A3240
  • terminal.findMatchHighlightBorder#B06A32
  • terminal.foreground#3A322E
  • terminal.inactiveSelectionBackground#B06A3230
  • terminal.selectionBackground#B06A3250
  • terminal.tab.activeBorder#B06A32
  • terminal.tab.activeForeground#3A322E
  • terminal.tab.hoverBackground#E9DFCE
  • terminal.tab.inactiveForeground#85796B
  • terminal.tab.unfocusedActiveBorder#85796B
  • terminal.tab.unfocusedActiveForeground#85796B
  • terminal.tab.unfocusedInactiveForeground#9A8C78
  • terminalCommandDecoration.defaultBackground#B06A32
  • terminalCommandDecoration.defaultForeground#FEFBF6
  • terminalCommandDecoration.errorBackground#C14A3B
  • terminalCommandDecoration.errorForeground#FEFBF6
  • terminalCommandDecoration.runningBackground#2F7DA0
  • terminalCommandDecoration.runningForeground#FEFBF6
  • terminalCommandDecoration.successBackground#41854F
  • terminalCommandDecoration.successForeground#FEFBF6
  • terminalCursor.background#F5F0E8
  • terminalCursor.foreground#B06A32
  • terminalOverviewRuler.border#E3D8C4
  • terminalOverviewRuler.cursorForeground#B06A32
  • textBlockQuote.background#F3EDE1
  • textBlockQuote.border#B06A32
  • textCodeBlock.background#FBF8F2
  • textLink.activeForeground#A15824
  • textLink.foreground#9C5E2A
  • textPreformat.foreground#7A4F28
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#3A322E
  • titleBar.border#E3D8C4
  • titleBar.inactiveBackground#F3EDE1
  • titleBar.inactiveForeground#9A8C78
  • walkThrough.embeddedEditorBackground#F3EDE1
  • welcomePage.background#F5F0E8
  • welcomePage.progress.background#E3D8C4
  • welcomePage.progress.foreground#B06A32
  • welcomePage.tileBackground#FBF8F2
  • welcomePage.tileBorder#E3D8C4
  • window.activeBorder#E3D8C4
  • window.inactiveBorder#E7DCCA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#3A322E—
comment, punctuation.definition.comment#8F7A55bold
punctuation, punctuation.definition, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.parameters, punctuation.definition.comment, punctuation.separator, punctuation.separator.continuation, punctuation.separator.inheritance, punctuation.separator.namespace, punctuation.separator.class, punctuation.separator.method, punctuation.separator.parameter, punctuation.separator.array, punctuation.separator.key-value, punctuation.section, punctuation.section.embedded, punctuation.accessor, punctuation.terminator, keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.type, keyword.operator.new, keyword.operator.expression, keyword.operator.spread, keyword.operator.optional, keyword.operator.ternary, keyword.operator.nullish, keyword.operator.pipe, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.void, keyword.operator.delete, keyword.operator.in, keyword.operator.of, keyword.operator.class, keyword.operator.rust, keyword.operator.arrow, keyword.operator.range, keyword.operator.channel, storage.type.function.arrow, meta.tag punctuation.definition.tag, meta.brace.round, meta.brace.square, meta.brace.curly#A05C6E—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#4C7A4E—
meta.tag.sgml, markup.deleted.git_gutter#90579A—
entity.name.tag#2F7DA3—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#7E5BAAitalic
source.sass keyword.control#2F7DA3—
entity.other.attribute-name.class#7E5BAA—
entity.other.attribute-name#7E5BAA—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#90579A—
support.type#7A4FA0italic
entity.name.type.class.java, entity.name.type.enum.java, entity.name.type.record.java, storage.type.generic.java, storage.type.generic.wildcard.java#7A4FA0italic
entity.name.type.cs, entity.name.type.alias.cs, entity.name.type.class.cs, entity.name.type.delegate.cs, entity.name.type.enum.cs, entity.name.type.interface.cs, entity.name.type.struct.cs, entity.name.type.union.cs#7A4FA0italic
entity.name.type.class.python#7A4FA0italic
entity.name.type.trait.php, entity.name.type.interface.php, entity.name.type.enum.php, entity.name.type.class.php#7A4FA0italic
entity.name.type.go, entity.name.type.any.go, entity.name.type.comparable.go#7A4FA0italic
entity.name.type.cpp, entity.name.type.class.cpp, entity.name.type.enum.cpp, entity.name.type.constructor.cpp, entity.name.type.destructor.cpp, entity.name.type.struct.parameter.cpp, entity.name.type.enum.parameter.cpp, entity.name.type.union.parameter.cpp, entity.name.type.class.parameter.cpp#7A4FA0italic
support.class.dart#7A4FA0italic
entity.name.type.rust, entity.name.type.primitive.rust, entity.name.type.numeric.rust, entity.name.type.option.rust, entity.name.type.result.rust#7A4FA0italic
variable, string constant.other.placeholder#3574A0—
meta.block variable.other#3574A0—
support.other.variable#3574A0—
string.other.link#2F7DA3—
constant.other.color#7E5BAA—
keyword, storage.type, storage.modifier, keyword.other#2E7E8C—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7A4FA0—
variable.language#B06A32italic
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#7A4FA0—
entity.name.method.js#527A44italic
meta.class-method.js entity.name.function.js, variable.function.constructor#3A322E—
constant.numeric, constant.language, support.constant, constant.character, constant.escape#3574A0—
variable.parameter#527A44—
keyword.other.unit#527A44—
keyword.other.unit.percentage#A05C6E—
tag.decorator.js entity.name.tag.js#7A4FA0italic
meta.decorator.ts#7A4FA0italic
meta.decorator.tsx#7A4FA0italic
entity.name.function.decorator.python#7A4FA0italic
storage.type.annotation.java#7A4FA0italic
support.attribute.php, support.attribute.builtin.php#7A4FA0italic
punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust#7A4FA0italic
entity.other.attribute#7A4FA0italic
storage.modifier.attribute.swift#7A4FA0italic
entity.name.type.annotation.kotlin, entity.name.type.annotation-site.kotlin#7A4FA0italic
storage.type.annotation.dart#7A4FA0italic
string.regexp#93568C—
constant.character.escape#A05C6E—
*url*, *link*, *uri*—underline
markup.inserted#2F7DA3—
markup.changed#7E5BAA—
markup.deleted#C14A3B—
invalid, invalid.illegal#C14A3B—
source.js constant.other.object.key.js string.unquoted.label.js#A05C6Eitalic
source.json meta.structure.dictionary.json support.type.property-name.json#2F7DA3—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7E5BAA—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#527A44—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#93568C—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A3923A—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6B625A—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8A542A—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B06A32—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C14A3B—
markup.heading.markdown punctuation.definition.heading.markdown#A05C6E—
markdown.heading, markup.heading | markup.heading entity.name#2F7DA3bold
markup.bold, markup.bold string#2F7DA3bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#B06A32bold
markup.italic#527A44italic
text.html.markdown, punctuation.definition.list_item.markdown#3A322E—
text.html.markdown markup.inline.raw.markdown#527A44—
markup.underline#A05C6Eunderline
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#A05C6E—
markup.quote punctuation.definition.blockquote.markdown#A05C6E—
markup.quote—italic
string.other.link.description.title.markdown#8A542A—
string.other.link.title.markdown#2F7DA3—
constant.other.reference.link.markdown#B06A32—
markup.raw.block#A05C6E—
markup.raw.block.fenced.markdown#A05C6E—
punctuation.definition.fenced.markdown#A05C6E—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#3A322E—
variable.language.fenced.markdown#3A322E—
meta.separator#A05C6Ebold
markup.table#3A322E—
support.type.property-name.css#6A4FB2—
support.function.name.css, support.function.css#4C7A4E—
constant.numeric.css, keyword.other.unit.css, constant.other.color.rgb-value.css, support.constant.property-value.css, string.quoted.single.css, string.quoted.double.css#4A4035—