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#FFF7F1
  • activityBar.foreground#1A1A1A
  • activityBar.inactiveForeground#8A8A8A
  • activityBarBadge.background#EC5B2B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#EC5B2B
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#1A1A1A
  • breadcrumb.focusForeground#1A1A1A
  • breadcrumb.foreground#8A8A8A
  • breadcrumbPicker.background#FFF7F1
  • button.background#C94D24
  • button.foreground#FFFFFF
  • button.hoverBackground#EC5B2B
  • chat.buttonBackground#C94D24
  • chat.buttonForeground#FFFFFF
  • chat.codeBlockBackground#FFFFFF
  • chat.inputBackground#F5F0EB
  • chat.inputForeground#1A1A1A
  • chat.inputPlaceholderForeground#A0A0A0
  • chat.requestBackground#F5F0EB
  • chat.requestBorder#D4D4D4
  • chat.slashCommandBackground#EC5B2B15
  • chat.slashCommandForeground#EC5B2B
  • debugIcon.breakpointForeground#EC5B2B
  • debugToolBar.background#FFFFFF
  • descriptionForeground#8A8A8A
  • diffEditor.insertedTextBackground#0062D11A
  • diffEditor.removedTextBackground#D1383D1A
  • dropdown.background#F5F0EB
  • dropdown.border#D4D4D4
  • editor.background#FFF7F1
  • editor.findMatchBackground#EC5B2B66
  • editor.findMatchHighlightBackground#C94D2466
  • editor.foreground#1A1A1A
  • editor.inactiveSelectionBackground#E1E1E199
  • editor.lineHighlightBackground#FFF7F1
  • editor.selectionBackground#EC5B2B40
  • editor.selectionHighlightBackground#EC5B2B33
  • editor.wordHighlightBackground#EC5B2B25
  • editor.wordHighlightStrongBackground#B8B8B866
  • editorBracketHighlight.foreground1#EC5B2B
  • editorBracketHighlight.foreground2#318795
  • editorBracketHighlight.foreground3#DAA520
  • editorBracketHighlight.foreground4#B0851F
  • editorBracketHighlight.foreground5#C94D24
  • editorBracketHighlight.foreground6#D1383D
  • editorBracketHighlight.unexpectedBracket.foreground#D1383D
  • editorBracketMatch.background#F5F0EB
  • editorBracketMatch.border#EC5B2B
  • editorCursor.foreground#EC5B2B
  • editorError.foreground#D1383D
  • editorGroup.border#D4D4D4
  • editorGroup.focusedEmptyBorder#EC5B2B
  • editorGroupHeader.noTabsBackground#FFFFFF
  • editorGroupHeader.tabsBackground#FFF7F1
  • editorGutter.background#FFF7F1
  • editorHint.foreground#8A8A8A
  • editorHoverWidget.background#FFF7F1
  • editorHoverWidget.border#D4D4D4
  • editorHoverWidget.foreground#1A1A1A
  • editorIndentGuide.activeBackground#D4D4D433
  • editorIndentGuide.background#D4D4D41A
  • editorInfo.foreground#318795
  • editorLineNumber.activeForeground#1A1A1A
  • editorLineNumber.foreground#B8B8B8
  • editorLink.activeForeground#EC5B2B
  • editorSuggestWidget.background#FFF7F1
  • editorSuggestWidget.border#D4D4D4
  • editorSuggestWidget.foreground#1A1A1A
  • editorSuggestWidget.highlightForeground#EC5B2B
  • editorSuggestWidget.selectedBackground#E1E1E1
  • editorWarning.foreground#EC5B2B
  • editorWhitespace.foreground#A0A0A0
  • editorWidget.background#FFF7F1
  • editorWidget.border#D4D4D4
  • editorWidget.foreground#1A1A1A
  • errorForeground#D1383D
  • focusBorder#EC5B2B
  • foreground#1A1A1A
  • gitDecoration.addedResourceForeground#0062D1
  • gitDecoration.conflictingResourceForeground#EC5B2B
  • gitDecoration.deletedResourceForeground#D1383D
  • gitDecoration.ignoredResourceForeground#A0A0A0
  • gitDecoration.modifiedResourceForeground#B0851F
  • gitDecoration.untrackedResourceForeground#3D9A57
  • inlineChat.background#FFF7F1
  • inlineChat.border#D4D4D4
  • inlineChat.shadow#00000020
  • inlineChatInput.background#F5F0EB
  • inlineChatInput.border#D4D4D4
  • inlineChatInput.focusBorder#EC5B2B
  • inlineChatInput.placeholderForeground#A0A0A0
  • input.background#FFFFFF
  • input.border#D4D4D4
  • input.foreground#1A1A1A
  • input.placeholderForeground#A0A0A0
  • inputOption.activeBorder#EC5B2B
  • inputValidation.errorBackground#FBDFD9
  • inputValidation.errorBorder#F6C6BD
  • inputValidation.infoBackground#E2F2F4
  • inputValidation.infoBorder#C4E5E8
  • inputValidation.warningBackground#FDE8E0
  • inputValidation.warningBorder#F8CFC0
  • list.activeSelectionBackground#FFF7F1
  • list.activeSelectionForeground#1A1A1A
  • list.dropBackground#A0A0A080
  • list.focusBackground#FFF7F1
  • list.highlightForeground#C94D24
  • list.hoverBackground#EBEBEB
  • list.inactiveSelectionBackground#FFF7F1BF
  • menu.background#FFF7F1
  • menu.foreground#1A1A1A
  • menu.selectionBackground#E1E1E1
  • menu.selectionForeground#1A1A1A
  • menu.separatorBackground#D4D4D4
  • minimap.background#FFF7F1
  • minimap.errorHighlight#D1383D
  • minimap.findMatchHighlight#C94D2466
  • minimap.selectionHighlight#EC5B2B66
  • minimap.warningHighlight#EC5B2B
  • notificationCenterHeader.background#FFFFFF
  • notifications.background#FFF7F1
  • notifications.border#D4D4D4
  • notifications.foreground#1A1A1A
  • panel.background#FFF7F1
  • panel.border#D4D4D4
  • panelTitle.activeForeground#1A1A1A
  • panelTitle.inactiveForeground#8A8A8A
  • peekView.border#D4D4D4
  • peekViewEditor.background#F5F0EB
  • peekViewTitle.background#FFF7F1
  • progressBar.background#EC5B2B
  • quickInput.background#FFF7F1
  • quickInput.foreground#1A1A1A
  • quickInputList.focusBackground#E1E1E1
  • quickInputTitle.background#FFFFFF
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#A0A0A0FF
  • scrollbarSlider.background#B8B8B880
  • scrollbarSlider.hoverBackground#A0A0A0CC
  • selection.background#E1E1E1
  • sideBar.background#FFF7F1
  • sideBar.dropBackground#A0A0A080
  • sideBar.foreground#1A1A1A
  • sideBarSectionHeader.background#FFFFFF
  • sideBarTitle.foreground#1A1A1A
  • statusBar.background#FFFFFF
  • statusBar.debuggingBackground#EC5B2B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#1A1A1A
  • statusBar.noFolderBackground#FFFFFF
  • statusBarItem.hoverBackground#E1E1E1
  • tab.activeBackground#FFFFFF
  • tab.activeBorderTop#EC5B2B
  • tab.activeForeground#1A1A1A
  • tab.border#FFF7F1
  • tab.hoverBackground#F5F0EB
  • tab.hoverForeground#1A1A1A
  • tab.inactiveBackground#FFF7F1
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#318795
  • terminal.ansiBrightBlack#8A8A8A
  • terminal.ansiBrightBlue#4BA3B0
  • terminal.ansiBrightCyan#4BA3B0
  • terminal.ansiBrightGreen#5AB872
  • terminal.ansiBrightMagenta#EC5B2B
  • terminal.ansiBrightRed#E05A5E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#C99D3A
  • terminal.ansiCyan#318795
  • terminal.ansiDimBlack#A0A0A0
  • terminal.ansiDimBlue#276C77
  • terminal.ansiDimCyan#276C77
  • terminal.ansiDimGreen#317B46
  • terminal.ansiDimMagenta#A13E1D
  • terminal.ansiDimRed#A82D31
  • terminal.ansiDimWhite#D4D4D4
  • terminal.ansiDimYellow#8D6A19
  • terminal.ansiGreen#3D9A57
  • terminal.ansiMagenta#C94D24
  • terminal.ansiRed#D1383D
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#B0851F
  • terminal.background#FFF7F1
  • terminal.foreground#1A1A1A
  • terminalCursor.foreground#EC5B2B
  • textLink.activeForeground#C94D24
  • textLink.foreground#318795
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#1A1A1A
  • titleBar.inactiveBackground#FFF7F1
  • titleBar.inactiveForeground#8A8A8A
  • tree.indentGuidesStroke#D4D4D4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A8A8Aitalic
keyword, storage.type, storage.modifier, punctuation.definition.keyword, punctuation.section.embedded.begin, punctuation.section.embedded.end#EC5B2B
entity.name.function, support.function, meta.function-call, variable.function#C94D24
entity.name.tag, support.class.component, entity.name.section, markup.heading#EC5B2Bbold
entity.other.attribute-name#C94D24
variable.other.property, support.type.property-name#679CD9
string, markup.inline.raw, meta.embedded.assembly#0062D1
string.regexp, string.regexp.character-class, constant.other.symbol#0055B8
constant.numeric, constant.language, support.constant, variable.other.constant#EC5B2B
variable, entity.name.variable, meta.definition.variable, support.variable#D1383D
variable.parameter, meta.function.parameters#C94D24
support.type, entity.name.type, storage.type.cs, meta.type.annotation#B0851F
punctuation, meta.brace, meta.bracket#1A1A1A
entity.name.namespace, support.other.namespace, meta.namespace#1A1A1A
markup.bold#C94D24bold
markup.italic#B0851Fitalic
markup.underline.link, string.other.link#318795underline
markup.inserted#0062D1
markup.deleted#D1383D
markup.changed#B0851F
constant.character.escape#8A8A8A
meta.diff.header, meta.diff.range#C94D24
meta.object-literal.key, support.type.property-name.css, support.type.property-name.json#679CD9
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#318795
entity.name.type.enum, support.type.enum#D1383D
entity.name.function.constructor, support.class.constructor, new.expr entity.name.type#C94D24
variable.language#C94D24
meta.preprocessor, keyword.control.directive, punctuation.definition.directive#EC5B2B
entity.name.label#EC5B2B
constant.other.enum, variable.other.enummember#C94D24
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#B0851F
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#C94D24
punctuation.definition.template-expression, punctuation.section.interpolation#EC5B2B
punctuation.definition.list, beginning.punctuation.definition.list#EC5B2B
markup.raw, markup.inline.raw.string, fenced_code.block#0062D1
meta.link.inline.markdown, markup.underline.link.markdown#EC5B2B
comment.unused, meta.inlay-hint#A0A0A0italic
constant.language.boolean#EC5B2B
meta.embedded, source.embedded#1A1A1A
punctuation.definition.heading, punctuation.definition.bold, punctuation.definition.italic#EC5B2B
comment.documentation#8A8A8Aitalic
constant.character.escape#8A8A8A
punctuation.definition.list_marker#EC5B2B
variable.language.special#C94D24
meta.inlay-hint, comment.unused#A0A0A0italic