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#ffffff
  • activityBar.border#e0e6ef
  • activityBar.foreground#203856
  • activityBarBadge.background#203856
  • activityBarBadge.foreground#ffffff
  • badge.background#203856
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#203856
  • breadcrumb.focusForeground#2b2b2b
  • breadcrumb.foreground#6b7280
  • breadcrumbPicker.background#ffffff
  • button.background#203856cc
  • button.foreground#ffffffcc
  • button.hoverBackground#62aedc
  • contrastBorder#cfcfcf
  • debugExceptionWidget.background#ffffff
  • debugExceptionWidget.border#62aedc
  • debugToolBar.background#ffffff
  • debugToolBar.border#62aedc
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.removedTextBackground#ef535033
  • dropdown.background#ffffff
  • dropdown.border#e0e6ef
  • dropdown.foreground#2b2b2bcc
  • editor.background#ffffff
  • editor.findMatchBackground#e28c0033
  • editor.findMatchHighlightBackground#e28c0022
  • editor.foreground#2b2b2b
  • editor.hoverHighlightBackground#20385622
  • editor.inactiveSelectionBackground#20385615
  • editor.lineHighlightBackground#f1f5fb
  • editor.rangeHighlightBackground#20385615
  • editor.selectionBackground#20385633
  • editor.selectionHighlightBackground#20385622
  • editor.wordHighlightBackground#20385615
  • editor.wordHighlightStrongBackground#20385622
  • editorBracketHighlight.foreground1#203856
  • editorBracketHighlight.foreground2#62aedc
  • editorBracketHighlight.foreground3#e28c00
  • editorBracketHighlight.foreground4#3da542
  • editorBracketHighlight.foreground5#a66eff
  • editorBracketHighlight.foreground6#f9ca24
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketPairGuide.activeBackground1#203856
  • editorBracketPairGuide.activeBackground2#62aedc
  • editorBracketPairGuide.activeBackground3#e28c00
  • editorBracketPairGuide.activeBackground4#3da542
  • editorBracketPairGuide.activeBackground5#a66eff
  • editorBracketPairGuide.activeBackground6#f9ca24
  • editorCodeLens.foreground#FFCA28
  • editorCursor.foreground#e28c00
  • editorError.foreground#EF5350
  • editorGroup.border#e0e6ef
  • editorGroup.dropBackground#2038561a
  • editorGroupHeader.noTabsBackground#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#f0f3f8
  • editorGutter.addedBackground#9CCC65
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#e2b93d
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#e0e6ef
  • editorIndentGuide.background1#e6eaf0
  • editorLineNumber.activeForeground#203856
  • editorLineNumber.foreground#6b7280
  • editorMarkerNavigation.background#ffffff
  • editorMarkerNavigationError.background#EF5350
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#203856
  • editorOverviewRuler.currentContentForeground#203856
  • editorOverviewRuler.incomingContentForeground#203856
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#e0e6ef
  • editorSuggestWidget.foreground#2b2b2b
  • editorSuggestWidget.highlightForeground#203856
  • editorSuggestWidget.selectedBackground#f1f5fb
  • editorWarning.foreground#FFCA28
  • editorWidget.background#ffffff
  • errorForeground#EF5350
  • extensionButton.prominentBackground#203856cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#203856
  • focusBorder#cfcfcf
  • foreground#2b2b2b
  • gitDecoration.addedResourceForeground#62aedc
  • gitDecoration.conflictingResourceForeground#FFEB95CC
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#69709890
  • gitDecoration.modifiedResourceForeground#f9ca24
  • gitDecoration.untrackedResourceForeground#a7d379ff
  • input.background#ffffff
  • input.border#e0e6ef
  • input.foreground#2b2b2bcc
  • input.placeholderForeground#6b728080
  • inputOption.activeBorder#203856cc
  • inputValidation.errorBackground#ef5350f2
  • inputValidation.errorBorder#EF5350
  • inputValidation.infoBackground#64b5f6f2
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#ffca28f2
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#203856
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#f1f5fb
  • list.focusBackground#0000000a
  • list.focusForeground#2b2b2b
  • list.highlightForeground#000000
  • list.hoverBackground#2038560f
  • list.hoverForeground#2b2b2b
  • list.inactiveSelectionBackground#e8eefb
  • list.inactiveSelectionForeground#203856
  • merge.currentHeaderBackground#20385615
  • merge.incomingHeaderBackground#20385615
  • minimap.findMatchHighlight#203856eb
  • minimap.selectionHighlight#203856eb
  • minimap.selectionOccurrenceHighlight#203856eb
  • notificationLink.foreground#80CBC4
  • notifications.background#ffffff
  • notifications.foreground#2b2b2bcc
  • panel.background#ffffff
  • panel.border#e0e6ef
  • panelTitle.activeBorder#203856
  • panelTitle.activeForeground#203856
  • panelTitle.inactiveForeground#6b7280
  • peekView.border#203856
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#20385615
  • peekViewResult.background#F5F7FB
  • peekViewResult.fileForeground#203856
  • peekViewResult.lineForeground#203856
  • peekViewResult.matchHighlightBackground#20385615
  • peekViewResult.selectionBackground#eaf4ff
  • peekViewResult.selectionForeground#203856
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#203856
  • pickerGroup.border#203856
  • pickerGroup.foreground#203856
  • quickInput.background#ffffff
  • quickInput.foreground#2b2b2b
  • quickInputList.focusBackground#f1f5fb
  • quickInputList.focusForeground#203856
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#20385633
  • scrollbarSlider.background#cfd8e3
  • scrollbarSlider.hoverBackground#20385633
  • selection.background#62aedc30
  • sideBar.background#F5F7FB
  • sideBar.border#e0e6ef
  • sideBar.foreground#2b2b2b
  • sideBarSectionHeader.background#F5F7FB
  • sideBarSectionHeader.foreground#203856
  • sideBarTitle.foreground#203856
  • statusBar.background#ffffff
  • statusBar.border#f0f3f8
  • statusBar.debuggingBackground#fff4d9
  • statusBar.debuggingBorder#f0f3f8
  • statusBar.foreground#2b2b2b
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderBorder#f0f3f8
  • statusBarItem.activeBackground#f1f5fb
  • statusBarItem.hoverBackground#f1f5fb
  • statusBarItem.prominentBackground#f1f5fb
  • statusBarItem.prominentHoverBackground#f1f5fb
  • tab.activeBackground#ffffff
  • tab.activeBorder#203856
  • tab.activeForeground#203856
  • tab.border#e0e6ef
  • tab.hoverBackground#f1f5fb
  • tab.inactiveBackground#F5F7FB
  • tab.inactiveForeground#6b7280
  • tab.unfocusedActiveBorder#f0f3f8
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#676E95
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#85b0ca
  • terminal.ansiBrightRed#ff5572
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#a9c77d
  • terminal.ansiMagenta#85b0ca
  • terminal.ansiRed#ff5572
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFCB6B
  • terminal.findMatchBackground#203856eb
  • terminal.findMatchHighlightBackground#2038569b
  • terminal.selectionBackground#2038569b
  • terminalCursor.foreground#62aedc
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#203856
  • titleBar.border#e0e6ef
  • titleBar.inactiveBackground#f5f7fb
  • walkThrough.embeddedEditorBackground#ffffff
  • widget.shadow#00000010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#2b2b2b
comment, punctuation.definition.comment#2f7a3fitalic
variable, string constant.other.placeholder, source#2b2b2b
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#4f9fcf
invalid, invalid.illegal#ef6b73
keyword, storage.type, storage.modifier, constant.language, support.constant, constant.character, constant.escape#62aedc
constant.numeric#3a8740
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#2b2b2b
keyword.operator.assignment#85b0ca
punctuation.separator.key-value.html, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#A7D379
keyword.control#62aedcitalic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#6b7280
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#203856
meta.block variable.other#2b2b2b
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#2b2b2b
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#eccd00
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key#6b7280
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#2b2b2b
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, support.type.property-name, support.variable.object.node, support.variable.object.process, variable.css#6b7280
support.constant.property-value.css, constant.other.color.rgb-value.hex.css#2b2b2b
punctuation.definition.constant.css#4A5568
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.increment-decrement#85b0ca
entity.name.module.js, variable.import.parameter.js#ef6b73
variable.language#6b7280italic
entity.name.method.js#6b7280italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6b7280
entity.other.attribute-name#62aedc
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#62aedc
entity.other.attribute-name.class#62aedc
source.sass keyword.control#6b7280
punctuation.definition.entity.css, punctuation.definition.keyword.css#2b2b2b
markup.inserted#4f8a57
markup.deleted#ef6b73
markup.changed#62aedc
string.regexp#4f8a57
constant.character.escape#4f8a57
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#6b7280
source.js constant.other.object.key.js string.unquoted.label.js#ef6b73italic
source.json meta.structure.dictionary.json support.type.property-name.json#6b7280
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6b7280
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#62aedc
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#6b7280
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#62aedc
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#6b7280
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#62aedc
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#6b7280
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#62aedc
markup.italic#ef6b73italic
markup.bold#ef6b73bold
markup.underline#62aedcunderline
markup.strike#b07a2aitalic
markup.quote, punctuation.definition.blockquote.markdown#6b7280italic
markup.raw.block#62aedc
markup.table#6b7280
text.html.markdown, punctuation.definition.list_item.markdown#2b2b2b
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#6b7280
text.html.markdown meta.dummy.line-break#2b2b2b
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#203856
markup.quote, punctuation.definition.blockquote.markdown#6b7280italic
string.other.link.title.markdown#b07a2aunderline
markup.raw.block.fenced.markdown#4a5568
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#2b2b2b
variable.language.fenced.markdown#2b2b2b
meta.separator#2b2b2b
token.info-token#6b7280
token.warn-token#b07a2a
token.error-token#ef6b73
token.debug-token#62aedc
storage.type.error.go#6b7280
punctuation.other.period.go#62aedc
Aro Ace by Philipp Schmidt - VS Code Theme