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.background#221E19
  • activityBar.border#221E19
  • activityBar.foreground#B8AA9A
  • activityBar.inactiveForeground#8D8072
  • badge.background#D0A067
  • badge.foreground#1A1713
  • button.background#D0A067
  • button.foreground#1A1713
  • button.hoverBackground#DBAF78
  • descriptionForeground#B8AA9A
  • diffEditor.insertedTextBackground#9AAF6422
  • diffEditor.removedTextBackground#FF927222
  • dropdown.background#2A2520
  • dropdown.border#352E27
  • dropdown.foreground#F0E7DA
  • dropdown.listBackground#2A2520
  • editor.background#1A1713
  • editor.foreground#F0E7DA
  • editor.hover.background#2A2520
  • editor.hover.border#352E27
  • editor.hover.foreground#F0E7DA
  • editor.hover.statusBarBackground#221E19
  • editor.lineHighlightBackground#221E19
  • editor.selectionBackground#D0A06733
  • editor.selectionHighlightBackground#9AAF6422
  • editor.wordHighlightBackground#D0A06722
  • editor.wordHighlightStrongBackground#D0A06733
  • editorBracketHighlight.foreground1#E07870
  • editorBracketHighlight.foreground2#78B0E0
  • editorBracketHighlight.foreground3#E0C074
  • editorBracketHighlight.foreground4#ACD07C
  • editorBracketHighlight.foreground5#D8A070
  • editorBracketHighlight.foreground6#58C0B8
  • editorBracketMatch.background#D0A06722
  • editorBracketMatch.border#D0A067
  • editorCursor.foreground#D0A067
  • editorGroupHeader.tabsBackground#221E19
  • editorGroupHeader.tabsBorder#221E1900
  • editorGutter.addedBackground#9AAF64
  • editorGutter.deletedBackground#FF9272
  • editorGutter.modifiedBackground#D0A067
  • editorHoverWidget.background#2A2520
  • editorHoverWidget.border#352E27
  • editorHoverWidget.foreground#F0E7DA
  • editorHoverWidget.statusBarBackground#221E19
  • editorIndentGuide.activeBackground#4A4138
  • editorIndentGuide.background#352E27
  • editorWhitespace.foreground#352E27
  • editorWidget.background#2A2520
  • editorWidget.border#352E27
  • errorForeground#FF9272
  • focusBorder#D0A06780
  • foreground#F0E7DA
  • gitDecoration.conflictingResourceForeground#FF9272
  • gitDecoration.ignoredResourceForeground#8D8072
  • gitDecoration.modifiedResourceForeground#D0A067
  • gitDecoration.untrackedResourceForeground#9AAF64
  • icon.foreground#B8AA9A
  • input.background#2A2520
  • input.border#2A252000
  • input.foreground#F0E7DA
  • input.placeholderForeground#8D8072
  • inputOption.activeBackground#D0A06722
  • list.activeSelectionBackground#D0A0671A
  • list.activeSelectionForeground#F0E7DA
  • list.focusBackground#D0A0671A
  • list.hoverBackground#D0A06710
  • list.inactiveSelectionBackground#D0A0671A
  • menu.background#2A2520
  • menu.foreground#F0E7DA
  • menu.selectionBackground#D0A06722
  • menu.separatorBackground#352E27
  • menubar.selectionBackground#352E27
  • notificationCenter.background#2A2520
  • notificationCenter.border#352E27
  • notificationCenterHeader.background#221E19
  • notificationCenterHeader.foreground#F0E7DA
  • notificationLink.foreground#E0B27A
  • notifications.background#2A2520
  • notifications.foreground#F0E7DA
  • notificationsErrorIcon.foreground#FF9272
  • notificationsInfoIcon.foreground#D0A067
  • notificationsWarningIcon.foreground#E4B472
  • notificationToast.background#2A2520
  • notificationToast.border#352E27
  • panel.background#221E19
  • panel.border#221E19
  • panelTitle.activeForeground#F0E7DA
  • panelTitle.inactiveForeground#B8AA9A
  • peekView.border#D0A067
  • peekViewEditor.background#1A1713
  • peekViewResult.background#221E19
  • peekViewResult.selectionBackground#D0A06722
  • peekViewTitle.background#221E19
  • peekViewTitleDescription.foreground#B8AA9A
  • peekViewTitleLabel.foreground#F0E7DA
  • pickerGroup.border#221E19
  • pickerGroup.foreground#8D8072
  • quickInput.background#2A2520
  • quickInput.foreground#F0E7DA
  • quickInputList.focusBackground#D0A06722
  • quickInputList.focusForeground#F0E7DA
  • quickInputTitle.background#221E19
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#7C6F62
  • scrollbarSlider.background#584C4080
  • scrollbarSlider.hoverBackground#6A5D51B0
  • selection.background#D0A06733
  • sideBar.background#221E19
  • sideBar.border#221E19
  • sideBar.foreground#B8AA9A
  • sideBarSectionHeader.background#221E19
  • sideBarSectionHeader.border#221E19
  • sideBarSectionHeader.foreground#F0E7DA
  • statusBar.background#221E19
  • statusBar.border#221E19
  • statusBar.foreground#B8AA9A
  • tab.activeBackground#1A1713
  • tab.activeBorder#D0A067
  • tab.activeForeground#F0E7DA
  • tab.border#221E1900
  • tab.inactiveBackground#221E19
  • tab.inactiveForeground#8D8072
  • tab.unfocusedActiveBorder#D0A06780
  • terminal.ansiBlack#13100D
  • terminal.ansiBlue#E0B27A
  • terminal.ansiCyan#73C2BC
  • terminal.ansiGreen#9AAF64
  • terminal.ansiMagenta#C09EF2
  • terminal.ansiRed#FF9272
  • terminal.ansiWhite#F0E7DA
  • terminal.ansiYellow#E4B472
  • terminal.background#1A1713
  • terminal.foreground#F0E7DA
  • terminal.selectionBackground#D0A06733
  • textCodeBlock.background#2A2520
  • textLink.foreground#E0B27A
  • textSeparator.foreground#352E27
  • titleBar.activeBackground#221E19
  • titleBar.activeForeground#F0E7DA
  • titleBar.border#221E19
  • titleBar.inactiveBackground#221E19
  • titleBar.inactiveForeground#8D8072
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C6058italic
string, punctuation.definition.string#ACD07C
constant.numeric, constant.language, constant.character, constant.other#D8A070
keyword, storage.type, storage.modifier#E07870
keyword.operator#8A8078
entity.name.function, support.function, meta.function-call#78B0E0
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#E0C074
variable, meta.definition.variable, support.variable, entity.name.variable#C8C0B4
variable.parameter#C8C0B4italic
variable.other.property, support.type.property-name#58C0B8
punctuation#8A8078
meta.object-literal.key#58C0B8
entity.name.tag, punctuation.definition.tag#E07870
entity.other.attribute-name#E0C074
string.regexp#D8A070
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#E07870
support.type.property-name.css#58C0B8
support.constant.property-value.css, keyword.other.unit.css#D8A070
entity.other.attribute-name.html.vue#E07870
support.class.component.html.vue#E0C074
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#D8A070
markup.heading.markdown#78B0E0
markup.underline.link.markdown, string.other.link.title.markdown#ACD07C
markup.bold.markdownbold
markup.italic.markdownitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#8A8078
invalid#FF9272
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#ACD07C
support.function.builtin.python#78B0E0italic
support.function.magic.python#78B0E0italic
support.type.python#E0C074
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#E07870italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#D8A070
support.variable.magic.python#58C0B8
support.class.exception.python#E0C074
meta.fstring.python variable, constant.character.format.placeholder.other.python#C8C0B4