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#1C1A17
  • activityBar.border#2A2622
  • activityBar.foreground#E0A458
  • activityBar.inactiveForeground#6B5F52
  • activityBarBadge.background#E36414
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E36414
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#F4A261
  • breadcrumb.background#1C1A17
  • breadcrumb.focusForeground#E0A458
  • breadcrumb.foreground#6B5F52
  • breadcrumbPicker.background#2A2622
  • button.background#E36414
  • button.foreground#FFFFFF
  • button.hoverBackground#F4742A
  • button.secondaryBackground#4A3F35
  • button.secondaryForeground#CFCFCF
  • descriptionForeground#A0978A
  • diffEditor.insertedLineBackground#A3B18A10
  • diffEditor.insertedTextBackground#A3B18A18
  • diffEditor.removedLineBackground#E3641410
  • diffEditor.removedTextBackground#E3641418
  • dropdown.background#2A2622
  • dropdown.border#4A3F35
  • dropdown.foreground#CFCFCF
  • editor.background#1C1A17
  • editor.foreground#CFCFCF
  • editor.inactiveSelectionBackground#3B2F2F55
  • editor.selectionBackground#3B2F2F99
  • editor.selectionHighlightBackground#3B2F2F55
  • editor.wordHighlightBackground#4A3F3555
  • editor.wordHighlightStrongBackground#4A3F3580
  • editorBracketMatch.background#E0A45830
  • editorBracketMatch.border#E0A458
  • editorCursor.foreground#E0A458
  • editorError.foreground#E36414
  • editorGroupHeader.tabsBackground#1C1A17
  • editorGroupHeader.tabsBorder#1C1A17
  • editorGutter.addedBackground#588157
  • editorGutter.background#1C1A17
  • editorGutter.deletedBackground#E36414
  • editorGutter.modifiedBackground#E0A458
  • editorHint.foreground#588157
  • editorHoverWidget.background#2A2622
  • editorHoverWidget.border#4A3F35
  • editorHoverWidget.foreground#CFCFCF
  • editorHoverWidget.highlightForeground#E0A458
  • editorIndentGuide.activeBackground1#4A3F35
  • editorIndentGuide.background1#2F2922
  • editorInfo.foreground#3A5A74
  • editorLineNumber.activeForeground#E0A458
  • editorLineNumber.foreground#5C4F40
  • editorSuggestWidget.background#2A2622
  • editorSuggestWidget.border#4A3F35
  • editorSuggestWidget.foreground#CFCFCF
  • editorSuggestWidget.highlightForeground#E0A458
  • editorSuggestWidget.selectedBackground#3B2F2F
  • editorSuggestWidget.selectedForeground#E0A458
  • editorWarning.foreground#F4A261
  • editorWhitespace.foreground#3A332A
  • errorForeground#E36414
  • focusBorder#E0A45880
  • foreground#CFCFCF
  • gitDecoration.addedResourceForeground#A3B18A
  • gitDecoration.conflictingResourceForeground#E5989B
  • gitDecoration.deletedResourceForeground#E36414
  • gitDecoration.ignoredResourceForeground#5C4F40
  • gitDecoration.modifiedResourceForeground#E0A458
  • gitDecoration.submoduleResourceForeground#3A5A74
  • gitDecoration.untrackedResourceForeground#588157
  • icon.foreground#E0A458
  • input.background#2A2622
  • input.border#4A3F35
  • input.foreground#CFCFCF
  • input.placeholderForeground#6B5F52
  • inputOption.activeBackground#E0A45825
  • inputOption.activeBorder#E0A458
  • list.activeSelectionBackground#3B2F2F
  • list.activeSelectionForeground#E0A458
  • list.focusBackground#3B2F2F
  • list.focusForeground#E0A458
  • list.highlightForeground#F4A261
  • list.hoverBackground#2F2922
  • list.hoverForeground#CFCFCF
  • list.inactiveSelectionBackground#2A2622
  • list.inactiveSelectionForeground#BFBFBF
  • listFilterWidget.background#2A2622
  • listFilterWidget.outline#E0A458
  • menu.background#2A2622
  • menu.foreground#CFCFCF
  • menu.selectionBackground#3B2F2F
  • menu.selectionForeground#E0A458
  • menu.separatorBackground#4A3F35
  • menubar.selectionBackground#3B2F2F
  • menubar.selectionForeground#E0A458
  • minimap.background#1C1A17
  • minimap.errorHighlight#E36414
  • minimap.selectionHighlight#E0A45860
  • minimap.warningHighlight#F4A261
  • minimapSlider.activeBackground#E0A45830
  • minimapSlider.background#4A3F3530
  • minimapSlider.hoverBackground#4A3F3550
  • notificationCenterHeader.background#1C1A17
  • notificationLink.foreground#F4A261
  • notifications.background#2A2622
  • notifications.foreground#CFCFCF
  • panel.background#1C1A17
  • panel.border#3B2F2F
  • panelTitle.activeBorder#E0A458
  • panelTitle.activeForeground#E0A458
  • panelTitle.inactiveForeground#6B5F52
  • peekView.border#E0A458
  • peekViewEditor.background#1C1A17
  • peekViewEditorGutter.background#1C1A17
  • peekViewResult.background#2A2622
  • peekViewResult.fileForeground#E0A458
  • peekViewResult.lineForeground#CFCFCF
  • peekViewResult.matchHighlightBackground#E0A45840
  • peekViewResult.selectionBackground#3B2F2F
  • peekViewResult.selectionForeground#E0A458
  • peekViewTitle.background#2A2622
  • peekViewTitleDescription.foreground#A3B18A
  • peekViewTitleLabel.foreground#E0A458
  • progressBar.background#E0A458
  • scrollbar.shadow#0000004D
  • scrollbarSlider.activeBackground#E0A45840
  • scrollbarSlider.background#4A3F3540
  • scrollbarSlider.hoverBackground#4A3F3570
  • selection.background#E0A45830
  • sideBar.background#2A2622
  • sideBar.border#1C1A17
  • sideBar.foreground#BFBFBF
  • sideBarSectionHeader.background#1C1A17
  • sideBarSectionHeader.border#3B2F2F
  • sideBarSectionHeader.foreground#E0A458
  • sideBarTitle.foreground#E0A458
  • statusBar.background#3B2010
  • statusBar.border#1C1A17
  • statusBar.debuggingBackground#E36414
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#F0D9BC
  • statusBar.noFolderBackground#2A2622
  • statusBarItem.hoverBackground#4A3F3560
  • statusBarItem.remoteBackground#E0A458
  • statusBarItem.remoteForeground#1C1A17
  • tab.activeBackground#2A2622
  • tab.activeBorder#E0A458
  • tab.activeForeground#E0A458
  • tab.border#1C1A17
  • tab.hoverBackground#2A2622
  • tab.hoverForeground#CFCFCF
  • tab.inactiveBackground#1C1A17
  • tab.inactiveForeground#6B5F52
  • tab.unfocusedActiveBackground#2A2622
  • tab.unfocusedActiveForeground#BFBFBF
  • terminal.ansiBlack#1C1A17
  • terminal.ansiBlue#3A5A74
  • terminal.ansiBrightBlack#4A3F35
  • terminal.ansiBrightBlue#5D8AA8
  • terminal.ansiBrightCyan#A0CEC8
  • terminal.ansiBrightGreen#A3B18A
  • terminal.ansiBrightMagenta#F0B8BB
  • terminal.ansiBrightRed#F4623A
  • terminal.ansiBrightWhite#EDEDED
  • terminal.ansiBrightYellow#F4C883
  • terminal.ansiCyan#7DADA4
  • terminal.ansiGreen#588157
  • terminal.ansiMagenta#E5989B
  • terminal.ansiRed#E36414
  • terminal.ansiWhite#CFCFCF
  • terminal.ansiYellow#E0A458
  • terminal.background#1C1A17
  • terminal.foreground#CFCFCF
  • terminal.selectionBackground#4A3F3560
  • textBlockQuote.background#2A2622
  • textBlockQuote.border#E0A458
  • textCodeBlock.background#2A2622
  • textLink.activeForeground#E0A458
  • textLink.foreground#F4A261
  • textPreformat.foreground#A3B18A
  • titleBar.activeBackground#1C1A17
  • titleBar.activeForeground#E0A458
  • titleBar.border#2A2622
  • titleBar.inactiveBackground#1C1A17
  • titleBar.inactiveForeground#6B5F52
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6650italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.in, keyword.operator.instanceof, storage.type, storage.modifier#E0A458bold
keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.return, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#E0A458bold italic
string, string.quoted, string.template, string.interpolated, string.regexp#A3B18A
constant.character.escape, string.regexp constant.character#E5989B
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#E5989B
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#E5989Bitalic
entity.name.function, meta.function-call entity.name.function, support.function, keyword.other.special-method#F4A261
variable.parameter, meta.parameter#D4956Bitalic
variable, variable.other, variable.other.readwrite, variable.other.object#588157
variable.language.this, variable.language.self, variable.language.super#E0A458italic
entity.name.type, entity.name.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, support.class, support.type#5D8AA8
meta.type.annotation, entity.name.type.primitive, support.type.primitive#3A7A9A
entity.other.inherited-class#5D8AA8italic
meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#C2A97A
meta.decorator, punctuation.decorator, entity.name.function.decorator#E5989Bitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#D4A060
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor#9A8875
punctuation.definition.block, punctuation.definition.parameters, meta.brace#A08060
entity.name.tag, meta.tag.sgml#E0A458
entity.other.attribute-name, meta.tag entity.other.attribute-name#A3B18A
string.quoted.double.html, string.quoted.single.html#8FA87A
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#C2A97A
support.constant.property-value.css, meta.property-value.css#A3B18A
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.scss#F4A261
keyword.other.unit.css, constant.other.color.rgb-value.css#E5989B
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#E0A458bold
markup.bold, punctuation.definition.bold.markdown#F4A261bold
markup.italic, punctuation.definition.italic.markdown#E5989Bitalic
markup.inline.raw, markup.raw.inline#A3B18A
markup.underline.link, string.other.link.title.markdown#5D8AA8underline
markup.quote, punctuation.definition.blockquote.markdown#7A6650italic
punctuation.definition.list.begin.markdown, markup.list#E0A458
support.type.property-name.json, string.quoted.double.json meta.object-literal.key#C2A97A
meta.structure.dictionary.value.json string#A3B18A
entity.name.tag.yaml, punctuation.separator.key-value.mapping.yaml#C2A97A
string.unquoted.plain.out.yaml, string.quoted.double.yaml#A3B18A
variable.other.normal.shell, variable.other.bracket.shell#588157
support.function.builtin.shell, keyword.other.shell#E0A458
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#E5989Bitalic
entity.name.function.macro.rust, support.function.macro.rust#F4A261italic
entity.name.function.decorator.python, meta.decorator.python#E5989Bitalic
support.type.python, support.function.builtin.python#5D8AA8
support.function.builtin.go#F4A261
invalid, invalid.illegal#E36414underline
invalid.deprecated#F4A261strikethrough