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. A key in the color catalog links to its detail page.

keyHEXRGBRGBA
activityBar.background
activityBar.foreground
activityBar.inactiveForeground
activityBarBadge.background
activityBarBadge.foreground
breadcrumb.activeSelectionForeground
breadcrumb.background
breadcrumb.focusForeground
breadcrumb.foreground
breadcrumbPicker.background
button.background
button.foreground
diffEditor.insertedTextBackground
dropdown.background
dropdown.border
dropdown.foreground
editor.background
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.lineHighlightBackground
editor.selectionBackground
editorCursor.foreground
editorError.foreground
editorGroup.border
editorGroup.emptyBackground
editorGroupHeader.tabsBackground
editorHoverWidget.background
editorHoverWidget.border
editorIndentGuide.background
editorLineNumber.foreground
editorRuler.foreground
editorSuggestWidget.background
editorSuggestWidget.border
editorSuggestWidget.selectedBackground
editorUnnecessaryCode.opacity
editorWhitespace.foreground
editorWidget.background
gitDecoration.addedResourceForeground
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground
gitDecoration.ignoredResourceForeground
gitDecoration.modifiedResourceForeground
gitDecoration.renamedResourceForeground
gitDecoration.stageDeletedResourceForeground
gitDecoration.stageModifiedResourceForeground
gitDecoration.submoduleResourceForeground
gitDecoration.untrackedResourceForeground
gitlens.gutterBackgroundColor
gitlens.gutterForegroundColor
gitlens.lineHighlightBackgroundColor
gitlens.lineHighlightOverviewRulerColor
gitlens.trailingLineForegroundColor
input.background
input.foreground
input.placeholderForeground
inputOption.activeBackground
inputOption.activeForeground
inputOption.hoverBackground
list.activeSelectionBackground
list.activeSelectionForeground
list.focusBackground
list.highlightForeground
list.hoverBackground
list.inactiveSelectionBackground
list.inactiveSelectionForeground
notifications.background
scrollbarSlider.activeBackground
scrollbarSlider.background
scrollbarSlider.hoverBackground
sideBar.background
sideBar.foreground
sideBarSectionHeader.background
sideBarSectionHeader.foreground
sideBarTitle.foreground
statusBar.background
statusBar.debuggingBackground
statusBar.foreground
statusBar.noFolderBackground
statusBarItem.hoverBackground
tab.activeBackground
tab.border
tab.inactiveBackground
terminal.ansiBlack
terminal.ansiBlue
terminal.ansiBrightBlack
terminal.ansiBrightBlue
terminal.ansiBrightCyan
terminal.ansiBrightGreen
terminal.ansiBrightMagenta
terminal.ansiBrightRed
terminal.ansiBrightWhite
terminal.ansiBrightYellow
terminal.ansiCyan
terminal.ansiGreen
terminal.ansiMagenta
terminal.ansiRed
terminal.ansiWhite
terminal.ansiYellow
terminal.foreground
textLink.foreground
titleBar.activeBackground
titleBar.activeForeground
titleBar.inactiveBackground
titleBar.inactiveForeground
window.activeBorder

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#94A3B8—
string, string.template#A16207—
constant.numeric#7E22CE—
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#7E22CE—
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#64748B—
constant.language#0F766E—
constant.character, constant.other#0F766E—
variable.language#B91C1C—
keyword, keyword.operator.logical, keyword.operator.constructor#B91C1C—
keyword.operator#B91C1C—
storage#B91C1C—
storage.type#0F766E—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#0369A1—
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#0369A1—
variable.other, variable.other.property, variable.other.block#334155—
entity.other.inherited-class#047857—
storage.modifier.import, storage.modifier.package#0369A1—
entity.name.function, support.function#047857—
variable.parameter, entity.name.variable.parameter, parameter.variable#EA580Citalic
entity.name.function-call#64748B—
function.support.builtin, function.support.core#047857—
text.html.derivative, meta.jsx.children#334155—
punctuation.definition.tag.begin, punctuation.definition.tag.end, keyword.operator.assignment#64748B—
entity.name.tag, entity.name.tag.class.js#B91C1C—
entity.name.tag.class, entity.name.tag.id#0F766E—
entity.other.attribute-name#047857—
support.constant#0F766E—
support.type, support.variable#0F766E—
support.dictionary.json#0F766E—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#64748B—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#0F766E—
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#047857—
variable.css, variable.scss, variable.less, variable.sass#0F766E—
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#A16207—
unit.css, unit.scss, unit.less, unit.sass#7E22CE—
function.css, function.scss, function.less, function.sass#0F766E—
support.other.variable—
invalid#0F172A—
invalid.deprecated#0F172A—
support.type.property-name.json#0F766E—
string.detected-link#0369A1—
meta.diff, meta.diff.header#94A3B8—
markup.deleted#B91C1C—
markup.inserted#047857—
markup.changed#A16207—
constant.numeric.line-number.find-in-files - match#0F766EA0—
entity.name.filename.find-in-files#A16207—
markup.italic, markup.italic.markdown—italic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#94A3B8—
punctuation.definition.italic.markdown—italic
markup.underline.link.markdown#0369A1—
markup.bold.markdown—bold
markup.heading.markdown#B91C1Cbold
markup.quote.markdown#047857—
meta.separator.markdown#7E22CEbold
markup.raw.inline.markdown, markup.raw.block.markdown#0F766E—
punctuation.definition.list_item.markdown#0F172Abold
meta.objectliteral#334155—
ThemeDatabase All Themes by enes ozturk - VS Code Theme