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.activeBorder#4E6600
  • activityBar.background#F7F8F9
  • activityBar.border#D0D4D9
  • activityBar.foreground#555A61
  • activityBar.inactiveForeground#767B82
  • activityBarBadge.background#4E6600
  • activityBarBadge.foreground#F7F8F9
  • badge.background#4E6600
  • badge.foreground#F7F8F9
  • breadcrumb.activeSelectionForeground#4E6600
  • breadcrumb.focusForeground#0D0F11
  • breadcrumb.foreground#636870
  • breadcrumbPicker.background#EFF1F3
  • button.background#4E6600
  • button.foreground#F7F8F9
  • button.hoverBackground#566E0C
  • button.secondaryBackground#E0E3E7
  • button.secondaryForeground#0D0F11
  • button.secondaryHoverBackground#D0D4D9
  • checkbox.background#F7F8F9
  • checkbox.border#BFC4CA
  • checkbox.foreground#0D0F11
  • descriptionForeground#555A61
  • diffEditor.insertedLineBackground#13683011
  • diffEditor.insertedTextBackground#13683022
  • diffEditor.removedLineBackground#B51C1C11
  • diffEditor.removedTextBackground#B51C1C22
  • disabledForeground#767B82
  • dropdown.background#EFF1F3
  • dropdown.border#BFC4CA
  • dropdown.foreground#0D0F11
  • dropdown.listBackground#EFF1F3
  • editor.background#E8EAED
  • editor.findMatchBackground#4D6B0040
  • editor.findMatchHighlightBackground#0D6D8555
  • editor.findRangeHighlightBackground#4E660018
  • editor.foreground#0D0F11
  • editor.inactiveSelectionBackground#4D6B0018
  • editor.lineHighlightBackground#E0E3E7cc
  • editor.selectionBackground#4D6B0028
  • editor.selectionHighlightBackground#555A6122
  • editor.wordHighlightBackground#555A6122
  • editor.wordHighlightStrongBackground#555A6133
  • editorBracketMatch.background#4D6B0022
  • editorBracketMatch.border#4E660040
  • editorCodeLens.foreground#767B82
  • editorCursor.background#F7F8F9
  • editorCursor.foreground#4E6600
  • editorError.foreground#B91C1C
  • editorGroup.border#D0D4D9
  • editorGroup.dropBackground#D0D4D988
  • editorGroupHeader.tabsBackground#F7F8F9
  • editorGroupHeader.tabsBorder#D0D4D9
  • editorGutter.addedBackground#166534
  • editorGutter.background#E8EAED
  • editorGutter.deletedBackground#B91C1C
  • editorGutter.modifiedBackground#1B4FCC
  • editorHint.foreground#767B82
  • editorHoverWidget.background#EFF1F3
  • editorHoverWidget.border#D0D4D9
  • editorHoverWidget.foreground#0D0F11
  • editorIndentGuide.activeBackground1#636870
  • editorIndentGuide.background1#BFC4CAaa
  • editorInfo.foreground#1B4FCC
  • editorLineNumber.activeForeground#4E6600
  • editorLineNumber.foreground#767B82
  • editorLink.activeForeground#1B4FCC
  • editorOverviewRuler.addedForeground#166534
  • editorOverviewRuler.border#0D0F1110
  • editorOverviewRuler.deletedForeground#B91C1C
  • editorOverviewRuler.errorForeground#B91C1C
  • editorOverviewRuler.findMatchForeground#4D6B0055
  • editorOverviewRuler.infoForeground#1B4FCC
  • editorOverviewRuler.modifiedForeground#1B4FCC
  • editorOverviewRuler.warningForeground#92400E
  • editorRuler.foreground#D0D4D9
  • editorSuggestWidget.background#EFF1F3
  • editorSuggestWidget.border#D0D4D9
  • editorSuggestWidget.focusHighlightForeground#4E6600
  • editorSuggestWidget.foreground#0D0F11
  • editorSuggestWidget.highlightForeground#4E6600
  • editorSuggestWidget.selectedBackground#E0E3E7
  • editorWarning.foreground#92400E
  • editorWhitespace.foreground#9CA0A788
  • errorForeground#B91C1C
  • extensionButton.prominentBackground#4E6600
  • extensionButton.prominentForeground#F7F8F9
  • extensionButton.prominentHoverBackground#566E0C
  • focusBorder#4E6600
  • foreground#0D0F11
  • gitDecoration.addedResourceForeground#166534
  • gitDecoration.conflictingResourceForeground#92400E
  • gitDecoration.deletedResourceForeground#B91C1C
  • gitDecoration.ignoredResourceForeground#767B82
  • gitDecoration.modifiedResourceForeground#1B4FCC
  • gitDecoration.renamedResourceForeground#4E6600
  • gitDecoration.untrackedResourceForeground#166534
  • icon.foreground#555A61
  • input.background#F7F8F9
  • input.border#BFC4CA
  • input.foreground#0D0F11
  • input.placeholderForeground#767B82
  • inputOption.activeBackground#4E660018
  • inputOption.activeBorder#4E6600
  • inputOption.activeForeground#4E6600
  • inputValidation.errorBackground#B51C1C18
  • inputValidation.errorBorder#B91C1C
  • inputValidation.infoBackground#1D4E9E18
  • inputValidation.infoBorder#1B4FCC
  • inputValidation.warningBackground#A0520018
  • inputValidation.warningBorder#92400E
  • list.activeSelectionBackground#E0E3E7
  • list.activeSelectionForeground#0D0F11
  • list.dropBackground#D0D4D988
  • list.errorForeground#B91C1C
  • list.focusBackground#E0E3E7
  • list.focusForeground#0D0F11
  • list.highlightForeground#4E6600
  • list.hoverBackground#D0D4D966
  • list.hoverForeground#0D0F11
  • list.inactiveSelectionBackground#D0D4D988
  • list.inactiveSelectionForeground#555A61
  • list.warningForeground#92400E
  • listFilterWidget.background#EFF1F3
  • listFilterWidget.noMatchesOutline#B91C1C
  • listFilterWidget.outline#4E6600
  • menu.background#EFF1F3
  • menu.border#D0D4D9
  • menu.foreground#0D0F11
  • menu.selectionBackground#E0E3E7
  • menu.selectionForeground#0D0F11
  • menu.separatorBackground#BFC4CA
  • menubar.selectionBackground#E0E3E7
  • menubar.selectionForeground#0D0F11
  • minimap.background#E8EAED
  • minimap.errorHighlight#B91C1C
  • minimap.findMatchHighlight#4D6B0055
  • minimap.warningHighlight#92400E
  • minimapSlider.activeBackground#0D6D8599
  • minimapSlider.background#0D6D8533
  • minimapSlider.hoverBackground#0D6D8566
  • notificationCenter.border#D0D4D9
  • notificationLink.foreground#1B4FCC
  • notifications.background#EFF1F3
  • notifications.border#D0D4D9
  • notificationsErrorIcon.foreground#B91C1C
  • notificationsInfoIcon.foreground#1B4FCC
  • notificationsWarningIcon.foreground#92400E
  • panel.background#EFF1F3
  • panel.border#D0D4D9
  • panelSectionHeader.background#F7F8F9
  • panelTitle.activeBorder#4E6600
  • panelTitle.activeForeground#4E6600
  • panelTitle.inactiveForeground#636870
  • peekView.border#4E6600
  • peekViewEditor.background#E8EAED
  • peekViewEditor.matchHighlightBackground#4D6B0040
  • peekViewResult.background#EFF1F3
  • peekViewResult.matchHighlightBackground#4D6B0033
  • peekViewResult.selectionBackground#E0E3E7
  • peekViewResult.selectionForeground#0D0F11
  • peekViewTitle.background#F7F8F9
  • peekViewTitleDescription.foreground#555A61
  • peekViewTitleLabel.foreground#0D0F11
  • progressBar.background#4E6600
  • quickInput.background#EFF1F3
  • quickInput.foreground#0D0F11
  • quickInputList.focusBackground#E0E3E7
  • quickInputList.focusForeground#0D0F11
  • quickInputList.focusIconForeground#4E6600
  • scrollbar.shadow#0D0F1122
  • scrollbarSlider.activeBackground#4E660040
  • scrollbarSlider.background#BFC4CAcc
  • scrollbarSlider.hoverBackground#767B82
  • selection.background#4D6B0028
  • sideBar.background#EFF1F3
  • sideBar.border#D0D4D9
  • sideBar.foreground#555A61
  • sideBarSectionHeader.background#EFF1F3
  • sideBarSectionHeader.border#D0D4D9
  • sideBarSectionHeader.foreground#555A61
  • sideBarTitle.foreground#555A61
  • statusBar.background#F7F8F9
  • statusBar.border#D0D4D9
  • statusBar.debuggingBackground#B91C1C
  • statusBar.debuggingForeground#F7F8F9
  • statusBar.foreground#555A61
  • statusBar.noFolderBackground#F7F8F9
  • statusBarItem.activeBackground#BFC4CA66
  • statusBarItem.hoverBackground#E0E3E7
  • statusBarItem.remoteBackground#4E6600
  • statusBarItem.remoteForeground#F7F8F9
  • tab.activeBackground#E8EAED
  • tab.activeBorderTop#4E6600
  • tab.activeForeground#0D0F11
  • tab.border#D0D4D9
  • tab.hoverBackground#D0D4D966
  • tab.inactiveBackground#EFF1F3
  • tab.inactiveForeground#636870
  • tab.lastPinnedBorder#BFC4CA
  • tab.unfocusedActiveForeground#555A61
  • tab.unfocusedInactiveForeground#767B82
  • terminal.ansiBlack#636870
  • terminal.ansiBlue#1B4FCC
  • terminal.ansiBrightBlack#555A61
  • terminal.ansiBrightBlue#1B4FCC
  • terminal.ansiBrightCyan#4E6600
  • terminal.ansiBrightGreen#166534
  • terminal.ansiBrightMagenta#566E0C
  • terminal.ansiBrightRed#B91C1C
  • terminal.ansiBrightWhite#0D0F11
  • terminal.ansiBrightYellow#92400E
  • terminal.ansiCyan#4E6600
  • terminal.ansiGreen#166534
  • terminal.ansiMagenta#566E0C
  • terminal.ansiRed#B91C1C
  • terminal.ansiWhite#555A61
  • terminal.ansiYellow#92400E
  • terminal.background#E8EAED
  • terminal.foreground#0D0F11
  • terminal.selectionBackground#4D6B0028
  • terminalCursor.foreground#4E6600
  • textLink.activeForeground#1B4FCC
  • textLink.foreground#1B4FCC
  • textPreformat.foreground#166534
  • textSeparator.foreground#D0D4D9
  • titleBar.activeBackground#F7F8F9
  • titleBar.activeForeground#0D0F11
  • titleBar.border#D0D4D9
  • titleBar.inactiveBackground#EFF1F3
  • titleBar.inactiveForeground#636870
  • widget.border#BFC4CA
  • widget.shadow#0D0F1122

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#636870italic
comment.block.documentation, comment.line.documentation#555A61italic
comment.line.todo, keyword.codetag.notation#4E6600italic
string, string.quoted#166534
string.quoted.docstring#166534italic
constant.character.escape, string.escape#566E0C
string.regexp#92400E
string.other.link, markup.underline.link#1B4FCCitalic
constant.numeric#92400E
constant.language.boolean, constant.language.null, constant.language.undefined#92400Eitalic
constant, constant.other#92400E
keyword, keyword.control, keyword.other, storage.modifier#566E0C
keyword.control.return, keyword.control.yield, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.async, keyword.control.await, keyword.control.trycatch#4E6600bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#555A61italic
keyword.control.exception, keyword.control.try, keyword.control.catch, keyword.control.throw, keyword.control.debug#B91C1C
keyword.control.directive, keyword.preprocessor, meta.preprocessor, meta.preprocessor.string, meta.preprocessor.numeric#92400E
storage.type, keyword.declaration#566E0C
entity.name.function, support.function, meta.function-call entity.name.function#4E6600bold
meta.function-call.generic#4E6600bold
support.function.builtin, entity.name.function.builtin#B91C1C
support.function.macro, entity.name.function.macro#566E0C
entity.name.function.constructor, support.function.constructor#566E0C
entity.name.type, entity.name.class, entity.name.interface, support.type, support.class#1B4FCC
support.type.builtin, support.type.primitive, keyword.type#1B4FCCitalic
entity.name.enum#1B4FCCbold
variable, variable.other#0D0F11
variable.language#B91C1Citalic
variable.other.member, variable.other.property, variable.other.object.property, support.variable.property#1B4FCC
variable.parameter#0D0F11
support.type.property-name, entity.name.variable.field, variable.other.readwrite.member#555A61
keyword.operator#555A61
punctuation, punctuation.separator, punctuation.terminator, meta.brace, meta.bracket#636870
punctuation.definition.interpolation, punctuation.section.interpolation#555A61
entity.name.namespace, entity.name.module, entity.name.type.namespace, support.module#555A61italic
entity.name.tag, support.class.component#1B4FCC
entity.other.attribute-name#555A61italic
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#636870
entity.name.function.decorator, storage.type.annotation, meta.decorator punctuation.decorator, punctuation.definition.annotation#92400E
entity.name.label#1B4FCC
markup.inserted, diff.inserted#166534
markup.deleted, diff.deleted#B91C1C
markup.heading, entity.name.section#0D0F11bold
markup.bold, punctuation.definition.bold#4E6600bold
markup.italic, punctuation.definition.italic#555A61italic
markup.inline.raw, markup.raw.inline#166534
string.other.link.title.markdown#4E6600bold
markup.underline.link, meta.link.inline.markdown markup.underline.link#1B4FCCitalic
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#166534
support.type.property-name.css, meta.property-name#555A61
support.constant.property-value, constant.other.unit#166534
entity.other.attribute-name.class, entity.other.attribute-name.id#4E6600
invalid, invalid.deprecated#B91C1C
Version 14 Theme by mathieusouflis - VS Code Theme