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#e6f0fb
  • activityBar.foreground#0a5fc0
  • activityBar.inactiveForeground#5d7590
  • activityBarBadge.background#0a5fc0
  • activityBarBadge.foreground#ffffff
  • badge.background#0a5fc0
  • badge.foreground#ffffff
  • button.background#0a5fc0
  • button.foreground#ffffff
  • button.hoverBackground#0850a8
  • button.secondaryForeground#0a5fc0
  • debugIcon.breakpointDisabledForeground#9ab0cc
  • debugIcon.breakpointForeground#c0273a
  • debugIcon.breakpointUnverifiedForeground#985c00
  • descriptionForeground#4a5f7d
  • diffEditor.insertedTextBackground#0a7d5a33
  • diffEditor.removedTextBackground#c0273a33
  • dropdown.background#ffffff
  • dropdown.border#cfe0f0
  • dropdown.foreground#16233b
  • editor.background#f5f9ff
  • editor.findMatchBackground#ffd24d
  • editor.findMatchHighlightBackground#ffd24d66
  • editor.findRangeHighlightBackground#ffd24d33
  • editor.foreground#16233b
  • editor.selectionBackground#bcd9f7
  • editor.selectionHighlightBackground#bcd9f766
  • editorBracketMatch.background#bcd9f7
  • editorBracketMatch.border#0a5fc0
  • editorCursor.foreground#0a5fc0
  • editorError.foreground#c0273a
  • editorGroup.border#cfe0f0
  • editorGroup.dropBackground#cfe3fa66
  • editorGroupHeader.border#cfe0f0
  • editorGroupHeader.noTabsBackground#e6f0fb
  • editorGroupHeader.tabsBackground#e6f0fb
  • editorGroupHeader.tabsBorder#cfe0f0
  • editorGutter.addedBackground#0a7d5a
  • editorGutter.deletedBackground#c0273a
  • editorGutter.modifiedBackground#0a5fc0
  • editorHint.foreground#0a5fc0
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#cfe0f0
  • editorIndentGuide.activeBackground#b9d0ea
  • editorIndentGuide.background#dbe7f5
  • editorInfo.foreground#0a5fc0
  • editorLineNumber.activeForeground#3d5575
  • editorLineNumber.foreground#788cab
  • editorOverviewRuler.addedForeground#0a7d5a
  • editorOverviewRuler.border#cfe0f0
  • editorOverviewRuler.bracketMatchForeground#0a5fc0
  • editorOverviewRuler.deletedForeground#c0273a
  • editorOverviewRuler.errorForeground#c0273a
  • editorOverviewRuler.findMatchForeground#0a5fc0
  • editorOverviewRuler.infoForeground#0a5fc0
  • editorOverviewRuler.modifiedForeground#0a5fc0
  • editorOverviewRuler.rangeHighlightForeground#0a5fc0
  • editorOverviewRuler.selectionHighlightForeground#0a5fc0
  • editorOverviewRuler.warningForeground#985c00
  • editorOverviewRuler.wordHighlightForeground#4a5f7d
  • editorOverviewRuler.wordHighlightStrongForeground#16233b
  • editorPane.background#f5f9ff
  • editorRuler.foreground#dbe7f5
  • editorWarning.foreground#985c00
  • editorWhitespace.foreground#d3e1f2
  • errorForeground#c0273a
  • focusBorder#0a5fc0
  • foreground#16233b
  • gitDecoration.addedResourceForeground#0a7d5a
  • gitDecoration.conflictingResourceForeground#985c00
  • gitDecoration.deletedResourceForeground#c0273a
  • gitDecoration.ignoredResourceForeground#9ab0cc
  • gitDecoration.modifiedResourceForeground#0a5fc0
  • gitDecoration.renamedResourceForeground#0a5fc0
  • gitDecoration.stageDeletedResourceForeground#c0273a
  • gitDecoration.stageModifiedResourceForeground#0a5fc0
  • gitDecoration.untrackedResourceForeground#0a7d5a
  • gitlens.gutterBackgroundColor#f5f9ff
  • gitlens.gutterForegroundColor#788cab
  • gitlens.gutterUncommittedForegroundColor#0a7d5a
  • gitlens.trailingLineForegroundColor#9ab0cc
  • input.background#ffffff
  • input.border#cfe0f0
  • input.foreground#16233b
  • input.placeholderForeground#5d7590
  • list.activeSelectionBackground#0a5fc0
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#cfe3fa
  • list.focusForeground#16233b
  • list.hoverBackground#e6f0fb
  • list.hoverForeground#16233b
  • list.inactiveFocusForeground#16233b
  • list.inactiveSelectionBackground#cfe3fa
  • list.inactiveSelectionForeground#16233b
  • list.invalidItemForeground#c0273a
  • menu.background#ffffff
  • menu.border#cfe0f0
  • menu.foreground#16233b
  • menu.selectionBackground#0a5fc0
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#cfe0f0
  • menubar.selectionBackground#0a5fc0
  • menubar.selectionBorder#0a5fc0
  • menubar.selectionForeground#ffffff
  • merge.currentContentBackground#0a7d5a33
  • merge.currentHeaderBackground#0a7d5a
  • merge.incomingContentBackground#0a5fc033
  • merge.incomingHeaderBackground#0a5fc0
  • mergeEditor.change.background#0a5fc033
  • mergeEditor.change.word.background#0a5fc066
  • minimapGutter.addedBackground#0a7d5a
  • minimapGutter.deletedBackground#c0273a
  • minimapGutter.modifiedBackground#0a5fc0
  • notificationCenterHeader.background#ffffff
  • notificationLink.foreground#0a5fc0
  • notifications.background#ffffff
  • notificationsErrorIcon.foreground#c0273a
  • notificationsInfoIcon.foreground#0a5fc0
  • notificationsWarningIcon.foreground#985c00
  • peekView.border#0a5fc0
  • peekViewEditor.background#e6f0fb
  • peekViewEditorGutter.background#e6f0fb
  • peekViewResult.background#ffffff
  • peekViewResult.selectionBackground#cfe3fa
  • peekViewTitle.background#e6f0fb
  • progressBar.background#0a5fc0
  • scrollbar.shadow#0a223f22
  • scrollbarSlider.activeBackground#0a5fc077
  • scrollbarSlider.background#0a5fc033
  • scrollbarSlider.hoverBackground#0a5fc055
  • sideBar.background#e6f0fb
  • sideBar.border#cfe0f0
  • sideBar.foreground#16233b
  • sideBarSectionHeader.foreground#0a5fc0
  • sideBarTitle.foreground#16233b
  • statusBar.background#ffffff
  • statusBar.border#cfe0f0
  • statusBar.foreground#16233b
  • tab.activeBackground#f5f9ff
  • tab.activeBorder#0a5fc0
  • tab.activeForeground#16233b
  • tab.border#cfe0f0
  • tab.inactiveBackground#e6f0fb
  • tab.inactiveForeground#5d7590
  • textBlockQuote.background#e6f0fb
  • textCodeBlock.background#e6f0fb
  • textLink.activeForeground#0850a8
  • textLink.foreground#0a5fc0
  • textPreformat.foreground#0c6e8c
  • textSeparator.foreground#cfe0f0
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#16233b
  • titleBar.border#cfe0f0
  • titleBar.inactiveBackground#e6f0fb
  • titleBar.inactiveForeground#5d7590
  • welcomePage.buttonBackground#0a5fc0
  • welcomePage.buttonHoverBackground#0850a8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c7f99italic
variable, string constant.other.placeholder#243a5e
constant.other.color#0a5fc0
invalid, invalid.illegal#c0273a
keyword, storage.type, storage.modifier#7b2fd6
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#0a6fc4
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#c0273a
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#1361bf
meta.block variable.other#243a5e
support.other.variable, string.other.link#243a5e
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#985c00
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#0a7d5a
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#0c6e8c
support.type#4a5f7d
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#4a5f7d
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#c0273a
variable.language#c0273aitalic
entity.name.method.js#1361bfitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#1361bf
entity.other.attribute-name#7b2fd6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#0c6e8citalic
entity.other.attribute-name.class#0c6e8c
source.sass keyword.control#1361bf
markup.inserted#0a7d5a
markup.deleted#c0273a
markup.changed#7b2fd6
string.regexp#0a6fc4
constant.character.escape#0a6fc4
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1361bfitalic
source.js constant.other.object.key.js string.unquoted.label.js#c0273aitalic
source.json meta.structure.dictionary.json support.type.property-name.json#7b2fd6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0c6e8c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#985c00
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0273a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0a7d5a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0a5fc0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c0273a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7b2fd6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0a7d5a
text.html.markdown, punctuation.definition.list_item.markdown#16233b
text.html.markdown markup.inline.raw.markdown#7b2fd6
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#788cab
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#0a5fc0
markup.italic#243a5eitalic
markup.bold, markup.bold string#243a5ebold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#243a5ebold
markup.underline#985c00underline
markup.quote punctuation.definition.blockquote.markdown#6c7f99
markup.quoteitalic
string.other.link.title.markdown#0a5fc0
string.other.link.description.title.markdown#7b2fd6
constant.other.reference.link.markdown#985c00
markup.raw.block#7b2fd6
markup.raw.block.fenced.markdown#4a5f7d
punctuation.definition.fenced.markdown#788cab
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#16233b
variable.language.fenced.markdown#788cab
meta.separator#788cabbold
markup.table#16233b
Tesseract by Endurance the Martian 👽 - VS Code Theme