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#010409
  • activityBar.border#30363D
  • activityBar.foreground#C9D1D9
  • activityBar.inactiveForeground#8B949E
  • activityBarBadge.background#58A6FF
  • activityBarBadge.foreground#0D1117
  • breadcrumb.activeSelectionForeground#58A6FF
  • breadcrumb.background#0D1117
  • breadcrumb.focusForeground#C9D1D9
  • breadcrumb.foreground#8B949E
  • button.background#21262D
  • button.foreground#C9D1D9
  • button.hoverBackground#30363D
  • button.secondaryBackground#21262D
  • button.secondaryForeground#C9D1D9
  • button.secondaryHoverBackground#30363D
  • checkbox.background#21262D
  • checkbox.border#30363D
  • checkbox.foreground#C9D1D9
  • contrastActiveBorder#58A6FF
  • contrastBorder#58A6FF
  • debugExceptionWidget.background#161B22
  • debugExceptionWidget.border#30363D
  • debugToolBar.background#161B22
  • debugToolBar.border#30363D
  • descriptionForeground#8B949E
  • diffEditor.insertedTextBackground#1F4628
  • diffEditor.insertedTextBorder#7EE787
  • diffEditor.removedTextBackground#4A1D1D
  • diffEditor.removedTextBorder#FF7B72
  • dropdown.background#161B22
  • dropdown.border#30363D
  • dropdown.foreground#C9D1D9
  • editor.background#0D1117
  • editor.findMatchBackground#264F78
  • editor.findMatchHighlightBackground#3E2E2E
  • editor.foreground#C9D1D9
  • editor.inactiveSelectionBackground#161B22
  • editor.lineHighlightBackground#161B22
  • editor.selectionBackground#264F78
  • editor.selectionHighlightBackground#264F78
  • editorBracketMatch.background#264F78
  • editorBracketMatch.border#58A6FF
  • editorCursor.foreground#58A6FF
  • editorGhostText.foreground#8B949E
  • editorGroup.background#0D1117
  • editorGroup.border#30363D
  • editorGroupHeader.tabsBackground#0D1117
  • editorGroupHeader.tabsBorder#30363D
  • editorHoverWidget.background#161B22
  • editorHoverWidget.border#30363D
  • editorIndentGuide.activeBackground#30363D
  • editorIndentGuide.background#21262D
  • editorLineNumber.activeForeground#C9D1D9
  • editorLineNumber.foreground#8B949E
  • editorOverviewRuler.border#30363D
  • editorOverviewRuler.bracketMatchForeground#58A6FF
  • editorOverviewRuler.errorForeground#FF7B72
  • editorOverviewRuler.findMatchForeground#FF7B72
  • editorOverviewRuler.infoForeground#79C0FF
  • editorOverviewRuler.rangeHighlightForeground#264F78
  • editorOverviewRuler.selectionHighlightForeground#264F78
  • editorOverviewRuler.warningForeground#FFA657
  • editorSuggestWidget.background#161B22
  • editorSuggestWidget.border#30363D
  • editorSuggestWidget.highlightForeground#58A6FF
  • editorSuggestWidget.selectedBackground#264F78
  • editorUnicodeHighlight.background#264F78
  • editorUnicodeHighlight.border#30363D
  • editorWhitespace.foreground#484F58
  • errorBackground#4A1D1D
  • errorForeground#FF7B72
  • explorerFolderIcon.color#58A6FF
  • extensionButton.prominentBackground#58A6FF
  • extensionButton.prominentForeground#0D1117
  • extensionButton.prominentHoverBackground#79C0FF
  • focusBorder#58A6FF
  • gitDecoration.addedResourceForeground#7EE787
  • gitDecoration.conflictedResourceForeground#FF7B72
  • gitDecoration.deletedResourceForeground#FF7B72
  • gitDecoration.ignoredResourceForeground#8B949E
  • gitDecoration.modifiedResourceForeground#79C0FF
  • gitDecoration.untrackedResourceForeground#FFA657
  • infoBackground#1E3A5F
  • infoForeground#79C0FF
  • input.background#0D1117
  • input.border#30363D
  • input.foreground#C9D1D9
  • input.placeholderForeground#8B949E
  • inputValidation.errorBackground#4A1D1D
  • inputValidation.errorBorder#FF7B72
  • inputValidation.errorForeground#FF7B72
  • inputValidation.infoBackground#1E3A5F
  • inputValidation.infoBorder#79C0FF
  • inputValidation.infoForeground#79C0FF
  • inputValidation.warningBackground#4A3A1D
  • inputValidation.warningBorder#FFA657
  • inputValidation.warningForeground#FFA657
  • list.activeSelectionBackground#264F78
  • list.activeSelectionForeground#C9D1D9
  • list.deemphasizedForeground#8B949E
  • list.errorForeground#FF7B72
  • list.focusBackground#264F78
  • list.focusForeground#C9D1D9
  • list.highlightForeground#58A6FF
  • list.hoverBackground#161B22
  • list.inactiveFocusBackground#161B22
  • list.inactiveFocusForeground#C9D1D9
  • list.inactiveSelectionBackground#161B22
  • list.inactiveSelectionForeground#C9D1D9
  • list.warningForeground#FFA657
  • menu.background#161B22
  • menu.border#30363D
  • menu.foreground#C9D1D9
  • menu.selectionBackground#264F78
  • menu.selectionForeground#C9D1D9
  • menu.separatorBackground#30363D
  • notificationCenter.background#161B22
  • notificationCenter.border#30363D
  • notifications.background#161B22
  • notifications.border#30363D
  • notifications.foreground#C9D1D9
  • notificationsErrorIcon.foreground#FF7B72
  • notificationsInfoIcon.foreground#79C0FF
  • notificationsWarningIcon.foreground#FFA657
  • notificationToast.border#30363D
  • panel.background#0D1117
  • panel.border#30363D
  • panelTitle.activeBorder#58A6FF
  • panelTitle.activeForeground#C9D1D9
  • panelTitle.inactiveForeground#8B949E
  • pickerGroup.border#30363D
  • pickerGroup.foreground#8B949E
  • progressBar.background#58A6FF
  • scrollbarSlider.activeBackground#58A6FF
  • scrollbarSlider.background#30363D
  • scrollbarSlider.hoverBackground#484F58
  • sideBar.background#0D1117
  • sideBar.border#30363D
  • sideBar.foreground#C9D1D9
  • sideBarSectionHeader.background#0D1117
  • sideBarSectionHeader.foreground#8B949E
  • sideBarTitle.foreground#C9D1D9
  • statusBar.background#0D1117
  • statusBar.border#30363D
  • statusBar.debuggingBackground#0D1117
  • statusBar.debuggingForeground#FFA657
  • statusBar.foreground#C9D1D9
  • statusBar.noFolderBackground#0D1117
  • symbolIcon.arrayForeground#79C0FF
  • symbolIcon.booleanForeground#FF7B72
  • symbolIcon.classForeground#FFA657
  • symbolIcon.colorForeground#D2A8FF
  • symbolIcon.constantForeground#FFD580
  • symbolIcon.constructorForeground#D2A8FF
  • symbolIcon.enumeratorForeground#FFA657
  • symbolIcon.enumeratorMemberForeground#79C0FF
  • symbolIcon.eventForeground#FFA657
  • symbolIcon.fieldForeground#79C0FF
  • symbolIcon.fileForeground#C9D1D9
  • symbolIcon.folderForeground#58A6FF
  • symbolIcon.functionForeground#D2A8FF
  • symbolIcon.interfaceForeground#FFA657
  • symbolIcon.keyForeground#79C0FF
  • symbolIcon.keywordForeground#58A6FF
  • symbolIcon.methodForeground#D2A8FF
  • symbolIcon.moduleForeground#58A6FF
  • symbolIcon.namespaceForeground#FFA657
  • symbolIcon.nullForeground#8B949E
  • symbolIcon.numberForeground#FF7B72
  • symbolIcon.objectForeground#79C0FF
  • symbolIcon.operatorForeground#58A6FF
  • symbolIcon.packageForeground#58A6FF
  • symbolIcon.propertyForeground#79C0FF
  • symbolIcon.referenceForeground#79C0FF
  • symbolIcon.snippetForeground#D2A8FF
  • symbolIcon.stringForeground#7EE787
  • symbolIcon.structForeground#FFA657
  • symbolIcon.textForeground#C9D1D9
  • symbolIcon.typeParameterForeground#79C0FF
  • symbolIcon.unitForeground#FFA657
  • symbolIcon.variableForeground#79C0FF
  • tab.activeBackground#0D1117
  • tab.activeBorder#58A6FF
  • tab.activeForeground#C9D1D9
  • tab.inactiveBackground#0D1117
  • tab.inactiveBorder#30363D
  • tab.inactiveForeground#8B949E
  • terminal.ansiBlack#0D1117
  • terminal.ansiBlue#58A6FF
  • terminal.ansiBrightBlack#8B949E
  • terminal.ansiBrightBlue#79C0FF
  • terminal.ansiBrightCyan#79C0FF
  • terminal.ansiBrightGreen#7EE787
  • terminal.ansiBrightMagenta#D2A8FF
  • terminal.ansiBrightRed#FF7B72
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD580
  • terminal.ansiCyan#79C0FF
  • terminal.ansiGreen#7EE787
  • terminal.ansiMagenta#D2A8FF
  • terminal.ansiRed#FF7B72
  • terminal.ansiWhite#C9D1D9
  • terminal.ansiYellow#FFA657
  • terminal.background#0D1117
  • terminal.foreground#C9D1D9
  • textBlockQuote.background#161B22
  • textBlockQuote.border#30363D
  • textCodeBlock.background#161B22
  • textLink.activeForeground#79C0FF
  • textLink.foreground#58A6FF
  • textPreformat.foreground#D2A8FF
  • titleBar.activeBackground#0D1117
  • titleBar.activeForeground#C9D1D9
  • titleBar.border#30363D
  • titleBar.inactiveBackground#0D1117
  • titleBar.inactiveForeground#8B949E
  • walkthrough.stepActive.foreground#58A6FF
  • walkthrough.stepDescription.foreground#8B949E
  • walkthrough.stepTitle.foreground#C9D1D9
  • warningBackground#4A3A1D
  • warningForeground#FFA657
  • welcomePage.background#0D1117
  • welcomePage.buttonBackground#21262D
  • welcomePage.buttonHoverBackground#30363D
  • widget.shadow#010409

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B949Eitalic
keyword, storage.type, storage.modifier#58A6FF—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#58A6FFbold
entity.name.function, support.function, meta.function-call#D2A8FF—
meta.method, meta.method-call, entity.name.method#D2A8FF—
entity.name.class, entity.name.type.class, support.class#FFA657—
entity.name.type, support.type, storage.type#FFA657—
entity.name.interface, entity.name.type.interface#FFA657—
variable, variable.other, variable.other.readwrite#79C0FF—
variable.other.constant, constant, constant.language, constant.numeric#FFD580—
string, string.quoted, string.template#7EE787—
constant.numeric, constant.numeric.integer, constant.numeric.float#FF7B72—
constant.language.boolean, constant.language.true, constant.language.false#FF7B72bold
constant.language.null, constant.language.undefined, constant.language.nan#FF7B72italic
variable.other.property, meta.property-name, support.variable.property#79C0FF—
keyword.operator, punctuation.separator.key-value, punctuation.accessor#58A6FF—
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#C9D1D9—
entity.name.tag, meta.tag, punctuation.definition.tag#58A6FF—
entity.other.attribute-name, meta.attribute-name#79C0FF—
string.quoted.double, string.quoted.single#7EE787—
meta.decorator, entity.name.decorator#D2A8FF—
variable.parameter, variable.parameter.function#79C0FF—
entity.name.label#FFA657—
entity.name.namespace, support.namespace#FFA657—
entity.name.enum, entity.name.type.enum#FFA657—
variable.other.enummember, constant.other.enum#79C0FF—
entity.name.function.constructor, support.function.constructor#D2A8FF—
entity.name.module, support.module#58A6FF—
string.regexp#D2A8FF—
constant.character.escape#FFD580—
invalid, invalid.illegal#FF7B72underline
invalid.deprecated#8B949Estrikethrough
markup.heading, markup.heading entity.name, markup.heading.markdown#58A6FFbold
markup.bold, punctuation.definition.bold#C9D1D9bold
markup.italic, punctuation.definition.italic#C9D1D9italic
markup.underline.link, string.other.link#58A6FFunderline
markup.raw, markup.raw.block#7EE787—
markup.list, punctuation.definition.list#FFA657—
markup.quote#8B949Eitalic
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.tag#58A6FF—
support.type.property-name, support.property-name#79C0FF—
support.constant.property-value, constant.other.color#7EE787—
support.type.property-name.json, meta.key.json#79C0FF—
meta.value.json string.quoted.double.json#7EE787—
entity.name.tag.yaml#79C0FF—
string.unquoted.yaml#7EE787—
support.function.python, entity.name.function.python#D2A8FF—
meta.decorator.python, entity.name.decorator.python#D2A8FF—
variable.language.self.python, variable.language.cls.python#FFA657—
storage.type.js, storage.type.ts, keyword.control.flow.js, keyword.control.flow.ts#58A6FF—
storage.type.function.arrow.js, storage.type.function.arrow.ts#58A6FF—
string.template.js, string.template.ts#7EE787—
entity.name.tag.js, entity.name.tag.tsx, support.class.component.js, support.class.component.tsx#58A6FF—
storage.type.annotation.java, meta.annotation.java#D2A8FF—
entity.name.function.go, support.function.go#D2A8FF—
entity.name.function.macro.rust, meta.macro.rust#D2A8FF—
storage.modifier.lifetime.rust, entity.name.lifetime.rust#FFA657—
entity.name.function.shell, support.function.builtin.shell#D2A8FF—
variable.other.shell, variable.other.readwrite.shell#79C0FF—