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#F6F8FA
  • activityBar.border#E8EDF2
  • activityBar.foreground#24292F
  • activityBar.inactiveForeground#8C959F
  • activityBarBadge.background#0969DA
  • activityBarBadge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#0969DA
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#24292F
  • breadcrumb.foreground#8C959F
  • button.background#F6F8FA
  • button.foreground#24292F
  • button.hoverBackground#E8EDF2
  • button.secondaryBackground#F6F8FA
  • button.secondaryForeground#24292F
  • button.secondaryHoverBackground#E8EDF2
  • checkbox.background#F6F8FA
  • checkbox.border#E8EDF2
  • checkbox.foreground#24292F
  • contrastActiveBorder#0969DA
  • contrastBorder#0969DA
  • debugExceptionWidget.background#FFFFFF
  • debugExceptionWidget.border#E8EDF2
  • debugToolBar.background#F6F8FA
  • debugToolBar.border#E8EDF2
  • descriptionForeground#8C959F
  • diffEditor.insertedTextBackground#D4F7DB
  • diffEditor.insertedTextBorder#1A7F37
  • diffEditor.removedTextBackground#FFEBE9
  • diffEditor.removedTextBorder#CF222E
  • dropdown.background#FFFFFF
  • dropdown.border#E8EDF2
  • dropdown.foreground#24292F
  • editor.background#FFFFFF
  • editor.findMatchBackground#B6E3FF
  • editor.findMatchHighlightBackground#FFDFBA
  • editor.foreground#24292F
  • editor.inactiveSelectionBackground#E8EDF2
  • editor.lineHighlightBackground#F6F8FA
  • editor.selectionBackground#B6E3FF
  • editor.selectionHighlightBackground#B6E3FF
  • editorBracketMatch.background#B6E3FF
  • editorBracketMatch.border#0969DA
  • editorCursor.foreground#0969DA
  • editorGhostText.foreground#8C959F
  • editorGroup.background#FFFFFF
  • editorGroup.border#E8EDF2
  • editorGroupHeader.tabsBackground#F6F8FA
  • editorGroupHeader.tabsBorder#E8EDF2
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#E8EDF2
  • editorIndentGuide.activeBackground#D0D7DE
  • editorIndentGuide.background#E8EDF2
  • editorLineNumber.activeForeground#24292F
  • editorLineNumber.foreground#8C959F
  • editorOverviewRuler.border#E8EDF2
  • editorOverviewRuler.bracketMatchForeground#0969DA
  • editorOverviewRuler.errorForeground#CF222E
  • editorOverviewRuler.findMatchForeground#CF222E
  • editorOverviewRuler.infoForeground#0969DA
  • editorOverviewRuler.rangeHighlightForeground#B6E3FF
  • editorOverviewRuler.selectionHighlightForeground#B6E3FF
  • editorOverviewRuler.warningForeground#D29922
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#E8EDF2
  • editorSuggestWidget.highlightForeground#0969DA
  • editorSuggestWidget.selectedBackground#B6E3FF
  • editorUnicodeHighlight.background#B6E3FF
  • editorUnicodeHighlight.border#E8EDF2
  • editorWhitespace.foreground#D0D7DE
  • errorBackground#FFEBE9
  • errorForeground#CF222E
  • explorerFolderIcon.color#0969DA
  • extensionButton.prominentBackground#0969DA
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#1F6FEB
  • focusBorder#0969DA
  • gitDecoration.addedResourceForeground#1A7F37
  • gitDecoration.conflictedResourceForeground#CF222E
  • gitDecoration.deletedResourceForeground#CF222E
  • gitDecoration.ignoredResourceForeground#8C959F
  • gitDecoration.modifiedResourceForeground#0969DA
  • gitDecoration.untrackedResourceForeground#D29922
  • infoBackground#DDEAFF
  • infoForeground#0969DA
  • input.background#FFFFFF
  • input.border#E8EDF2
  • input.foreground#24292F
  • input.placeholderForeground#8C959F
  • inputValidation.errorBackground#FFEBE9
  • inputValidation.errorBorder#CF222E
  • inputValidation.errorForeground#CF222E
  • inputValidation.infoBackground#DDEAFF
  • inputValidation.infoBorder#0969DA
  • inputValidation.infoForeground#0969DA
  • inputValidation.warningBackground#FFF8C5
  • inputValidation.warningBorder#D29922
  • inputValidation.warningForeground#D29922
  • list.activeSelectionBackground#B6E3FF
  • list.activeSelectionForeground#24292F
  • list.deemphasizedForeground#8C959F
  • list.errorForeground#CF222E
  • list.focusBackground#B6E3FF
  • list.focusForeground#24292F
  • list.highlightForeground#0969DA
  • list.hoverBackground#F6F8FA
  • list.inactiveFocusBackground#E8EDF2
  • list.inactiveFocusForeground#24292F
  • list.inactiveSelectionBackground#E8EDF2
  • list.inactiveSelectionForeground#24292F
  • list.warningForeground#D29922
  • menu.background#FFFFFF
  • menu.border#E8EDF2
  • menu.foreground#24292F
  • menu.selectionBackground#B6E3FF
  • menu.selectionForeground#24292F
  • menu.separatorBackground#E8EDF2
  • notificationCenter.background#FFFFFF
  • notificationCenter.border#E8EDF2
  • notifications.background#FFFFFF
  • notifications.border#E8EDF2
  • notifications.foreground#24292F
  • notificationsErrorIcon.foreground#CF222E
  • notificationsInfoIcon.foreground#0969DA
  • notificationsWarningIcon.foreground#D29922
  • notificationToast.border#E8EDF2
  • panel.background#F6F8FA
  • panel.border#E8EDF2
  • panelTitle.activeBorder#0969DA
  • panelTitle.activeForeground#24292F
  • panelTitle.inactiveForeground#8C959F
  • pickerGroup.border#E8EDF2
  • pickerGroup.foreground#8C959F
  • progressBar.background#0969DA
  • scrollbarSlider.activeBackground#0969DA
  • scrollbarSlider.background#E8EDF2
  • scrollbarSlider.hoverBackground#D0D7DE
  • sideBar.background#F6F8FA
  • sideBar.border#E8EDF2
  • sideBar.foreground#24292F
  • sideBarSectionHeader.background#F6F8FA
  • sideBarSectionHeader.foreground#8C959F
  • sideBarTitle.foreground#24292F
  • statusBar.background#F6F8FA
  • statusBar.border#E8EDF2
  • statusBar.debuggingBackground#F6F8FA
  • statusBar.debuggingForeground#D29922
  • statusBar.foreground#24292F
  • statusBar.noFolderBackground#F6F8FA
  • symbolIcon.arrayForeground#1F6FEB
  • symbolIcon.booleanForeground#CF222E
  • symbolIcon.classForeground#D29922
  • symbolIcon.colorForeground#8250DF
  • symbolIcon.constantForeground#D29922
  • symbolIcon.constructorForeground#8250DF
  • symbolIcon.enumeratorForeground#D29922
  • symbolIcon.enumeratorMemberForeground#1F6FEB
  • symbolIcon.eventForeground#D29922
  • symbolIcon.fieldForeground#1F6FEB
  • symbolIcon.fileForeground#24292F
  • symbolIcon.folderForeground#0969DA
  • symbolIcon.functionForeground#8250DF
  • symbolIcon.interfaceForeground#D29922
  • symbolIcon.keyForeground#1F6FEB
  • symbolIcon.keywordForeground#0969DA
  • symbolIcon.methodForeground#8250DF
  • symbolIcon.moduleForeground#0969DA
  • symbolIcon.namespaceForeground#D29922
  • symbolIcon.nullForeground#8C959F
  • symbolIcon.numberForeground#CF222E
  • symbolIcon.objectForeground#1F6FEB
  • symbolIcon.operatorForeground#0969DA
  • symbolIcon.packageForeground#0969DA
  • symbolIcon.propertyForeground#1F6FEB
  • symbolIcon.referenceForeground#1F6FEB
  • symbolIcon.snippetForeground#8250DF
  • symbolIcon.stringForeground#1A7F37
  • symbolIcon.structForeground#D29922
  • symbolIcon.textForeground#24292F
  • symbolIcon.typeParameterForeground#1F6FEB
  • symbolIcon.unitForeground#D29922
  • symbolIcon.variableForeground#1F6FEB
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#0969DA
  • tab.activeForeground#24292F
  • tab.inactiveBackground#F6F8FA
  • tab.inactiveBorder#E8EDF2
  • tab.inactiveForeground#8C959F
  • terminal.ansiBlack#24292F
  • terminal.ansiBlue#0969DA
  • terminal.ansiBrightBlack#6E7781
  • terminal.ansiBrightBlue#1F6FEB
  • terminal.ansiBrightCyan#1F6FEB
  • terminal.ansiBrightGreen#1A7F37
  • terminal.ansiBrightMagenta#8250DF
  • terminal.ansiBrightRed#CF222E
  • terminal.ansiBrightWhite#24292F
  • terminal.ansiBrightYellow#D29922
  • terminal.ansiCyan#1F6FEB
  • terminal.ansiGreen#1A7F37
  • terminal.ansiMagenta#8250DF
  • terminal.ansiRed#CF222E
  • terminal.ansiWhite#8C959F
  • terminal.ansiYellow#D29922
  • terminal.background#F6F8FA
  • terminal.foreground#24292F
  • textBlockQuote.background#F6F8FA
  • textBlockQuote.border#E8EDF2
  • textCodeBlock.background#F6F8FA
  • textLink.activeForeground#1F6FEB
  • textLink.foreground#0969DA
  • textPreformat.foreground#8250DF
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#24292F
  • titleBar.border#E8EDF2
  • titleBar.inactiveBackground#F6F8FA
  • titleBar.inactiveForeground#8C959F
  • walkthrough.stepActive.foreground#0969DA
  • walkthrough.stepDescription.foreground#8C959F
  • walkthrough.stepTitle.foreground#24292F
  • warningBackground#FFF8C5
  • warningForeground#D29922
  • welcomePage.background#FFFFFF
  • welcomePage.buttonBackground#F6F8FA
  • welcomePage.buttonHoverBackground#E8EDF2
  • widget.shadowrgba(0, 0, 0, 0.1)

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E7781italic
keyword, storage.type, storage.modifier#CF222E
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#CF222Ebold
entity.name.function, support.function, meta.function-call#8250DF
meta.method, meta.method-call, entity.name.method#8250DF
entity.name.class, entity.name.type.class, support.class#D29922
entity.name.type, support.type, storage.type#D29922
entity.name.interface, entity.name.type.interface#D29922
variable, variable.other, variable.other.readwrite#1F6FEB
variable.other.constant, constant, constant.language, constant.numeric#D29922
string, string.quoted, string.template#1A7F37
constant.numeric, constant.numeric.integer, constant.numeric.float#CF222E
constant.language.boolean, constant.language.true, constant.language.false#CF222Ebold
constant.language.null, constant.language.undefined, constant.language.nan#CF222Eitalic
variable.other.property, meta.property-name, support.variable.property#1F6FEB
keyword.operator, punctuation.separator.key-value, punctuation.accessor#0969DA
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#24292F
entity.name.tag, meta.tag, punctuation.definition.tag#0969DA
entity.other.attribute-name, meta.attribute-name#1F6FEB
string.quoted.double, string.quoted.single#1A7F37
meta.decorator, entity.name.decorator#8250DF
variable.parameter, variable.parameter.function#1F6FEB
entity.name.label#D29922
entity.name.namespace, support.namespace#D29922
entity.name.enum, entity.name.type.enum#D29922
variable.other.enummember, constant.other.enum#1F6FEB
entity.name.function.constructor, support.function.constructor#8250DF
entity.name.module, support.module#0969DA
string.regexp#8250DF
constant.character.escape#D29922
invalid, invalid.illegal#CF222Eunderline
invalid.deprecated#6E7781strikethrough
markup.heading, markup.heading entity.name, markup.heading.markdown#0969DAbold
markup.bold, punctuation.definition.bold#24292Fbold
markup.italic, punctuation.definition.italic#24292Fitalic
markup.underline.link, string.other.link#0969DAunderline
markup.raw, markup.raw.block#1A7F37
markup.list, punctuation.definition.list#D29922
markup.quote#6E7781italic
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.tag#0969DA
support.type.property-name, support.property-name#1F6FEB
support.constant.property-value, constant.other.color#1A7F37
support.type.property-name.json, meta.key.json#1F6FEB
meta.value.json string.quoted.double.json#1A7F37
entity.name.tag.yaml#1F6FEB
string.unquoted.yaml#1A7F37
support.function.python, entity.name.function.python#8250DF
meta.decorator.python, entity.name.decorator.python#8250DF
variable.language.self.python, variable.language.cls.python#D29922
storage.type.js, storage.type.ts, keyword.control.flow.js, keyword.control.flow.ts#CF222E
storage.type.function.arrow.js, storage.type.function.arrow.ts#0969DA
string.template.js, string.template.ts#1A7F37
entity.name.tag.js, entity.name.tag.tsx, support.class.component.js, support.class.component.tsx#0969DA
storage.type.annotation.java, meta.annotation.java#8250DF
entity.name.function.go, support.function.go#8250DF
entity.name.function.macro.rust, meta.macro.rust#8250DF
storage.modifier.lifetime.rust, entity.name.lifetime.rust#D29922
entity.name.function.shell, support.function.builtin.shell#8250DF
variable.other.shell, variable.other.readwrite.shell#1F6FEB