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#262938
  • activityBar.border#7c7c7c
  • activityBar.foreground#eeffff
  • activityBarBadge.background#203856
  • activityBarBadge.foreground#ffffff
  • badge.background#203856
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#eeffff
  • breadcrumb.focusForeground#bfc7d5
  • breadcrumb.foreground#6c739a
  • breadcrumbPicker.background#23252f
  • button.background#203856cc
  • button.foreground#ffffffcc
  • button.hoverBackground#203856
  • contrastBorder#7c7c7c
  • debugExceptionWidget.background#23252f
  • debugExceptionWidget.border#62aedc
  • debugToolBar.background#23252f
  • debugToolBar.border#62aedc
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.removedTextBackground#ef535033
  • dropdown.background#23252f
  • dropdown.border#203856
  • dropdown.foreground#ffffffcc
  • editor.background#23252f
  • editor.findMatchBackground#e28c00cc
  • editor.findMatchHighlightBackground#ECCD0066
  • editor.foreground#BFC7D5
  • editor.hoverHighlightBackground#2038569b
  • editor.inactiveSelectionBackground#2038565a
  • editor.lineHighlightBackground#2038566d
  • editor.rangeHighlightBackground#2038566d
  • editor.selectionBackground#203856f0
  • editor.selectionHighlightBackground#2038569b
  • editor.wordHighlightBackground#2038566d
  • editor.wordHighlightStrongBackground#2038569b
  • editorBracketHighlight.foreground1#e28c00
  • editorBracketHighlight.foreground2#eccd00
  • editorBracketHighlight.foreground3#62aedc
  • editorBracketHighlight.foreground4#a66eff
  • editorBracketHighlight.foreground5#a7d379
  • editorBracketHighlight.foreground6#3da542
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketPairGuide.activeBackground1#e28c00
  • editorBracketPairGuide.activeBackground2#eccd00
  • editorBracketPairGuide.activeBackground3#62aedc
  • editorBracketPairGuide.activeBackground4#a66eff
  • editorBracketPairGuide.activeBackground5#a7d379
  • editorBracketPairGuide.activeBackground6#3da542
  • editorCodeLens.foreground#FFCA28
  • editorCursor.foreground#e28c00
  • editorError.foreground#EF5350
  • editorGroup.border#7c7c7c
  • editorGroup.dropBackground#20385673
  • editorGroupHeader.noTabsBackground#32374C
  • editorGroupHeader.tabsBackground#23252f
  • editorGroupHeader.tabsBorder#262A39
  • editorGutter.addedBackground#9CCC65
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#e2b93d
  • editorHoverWidget.background#23252f
  • editorHoverWidget.border#203856
  • editorIndentGuide.background1#4E557980
  • editorLineNumber.activeForeground#eeffff
  • editorLineNumber.foreground#9b9b9b
  • editorMarkerNavigation.background#31364a
  • editorMarkerNavigationError.background#EF5350
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#203856
  • editorOverviewRuler.currentContentForeground#203856
  • editorOverviewRuler.incomingContentForeground#203856
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#bfc7d5
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#203856
  • editorWarning.foreground#FFCA28
  • editorWidget.background#31364a
  • errorForeground#EF5350
  • extensionButton.prominentBackground#203856cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#203856
  • focusBorder#7c7c7c
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#62aedc
  • gitDecoration.conflictingResourceForeground#FFEB95CC
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#69709890
  • gitDecoration.modifiedResourceForeground#eccd00
  • gitDecoration.untrackedResourceForeground#a7d379ff
  • input.background#313850
  • input.border#203856
  • input.foreground#ffffffcc
  • input.placeholderForeground#ffffffcc
  • inputOption.activeBorder#ffffffcc
  • 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#2E3245
  • list.focusBackground#0000002e
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#62aedc1a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#929ac951
  • list.inactiveSelectionForeground#bdc5ed
  • merge.currentHeaderBackground#2038565a
  • merge.incomingHeaderBackground#2038565a
  • minimap.findMatchHighlight#203856eb
  • minimap.selectionHighlight#203856eb
  • minimap.selectionOccurrenceHighlight#203856eb
  • notificationLink.foreground#80CBC4
  • notifications.background#23252f
  • notifications.foreground#ffffffcc
  • panel.background#23252f
  • panel.border#7c7c7c
  • panelTitle.activeBorder#203856
  • panelTitle.activeForeground#eeffff
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#203856
  • peekViewEditor.background#232635
  • peekViewEditor.matchHighlightBackground#2038565a
  • peekViewResult.background#2E3245
  • peekViewResult.fileForeground#eeffff
  • peekViewResult.lineForeground#eeffff
  • peekViewResult.matchHighlightBackground#2038565a
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#eeffff
  • peekViewTitle.background#23252f
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#eeffff
  • pickerGroup.border#62aedc
  • pickerGroup.foreground#62aedc
  • quickInput.background#2C3043
  • quickInput.foreground#ffffff
  • quickInputList.focusBackground#203856
  • quickInputList.focusForeground#f1f5fb
  • scrollbar.shadow#23252f00
  • scrollbarSlider.activeBackground#203856ea
  • scrollbarSlider.background#2038569a
  • scrollbarSlider.hoverBackground#203856ea
  • selection.background#7580B850
  • sideBar.background#23252f
  • sideBar.border#7c7c7c
  • sideBar.foreground#d5d5d5
  • sideBarSectionHeader.background#23252f
  • sideBarSectionHeader.foreground#eeffff
  • sideBarTitle.foreground#eeffff
  • statusBar.background#282C3D
  • statusBar.border#262A39
  • statusBar.debuggingBackground#eccd006d
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#23252f
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • tab.activeBackground#203856
  • tab.activeBorder#203856
  • tab.activeForeground#eeffff
  • tab.border#7c7c7c
  • tab.hoverBackground#203856c9
  • tab.inactiveBackground#23252f
  • tab.inactiveForeground#d5d5d5
  • tab.unfocusedActiveBorder#262A39
  • terminal.ansiBlack#676E95
  • 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#23252f
  • titleBar.activeForeground#eeefff
  • titleBar.border#7c7c7c
  • titleBar.inactiveBackground#30364c
  • walkThrough.embeddedEditorBackground#232635
  • widget.shadow#232635

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#FAFAFA
comment, punctuation.definition.comment#3DA542italic
variable, string constant.other.placeholder, source#FAFAFA
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#62aedc
invalid, invalid.illegal#ef6b73
keyword, storage.type, storage.modifier, constant.language, support.constant, constant.character, constant.escape#62aedc
constant.numeric#e28c00
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#FAFAFA
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#A4A4A4
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#b3d4ef
meta.block variable.other#FAFAFA
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#FAFAFA
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#9EA6AC
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#FAFAFA
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#A4A4A4
support.constant.property-value.css, constant.other.color.rgb-value.hex.css#FAFAFA
punctuation.definition.constant.css#BFC7D5
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.increment-decrement#85b0ca
entity.name.module.js, variable.import.parameter.js#ef6b73
variable.language#A4A4A4italic
entity.name.method.js#A4A4A4italic
meta.class-method.js entity.name.function.js, variable.function.constructor#A4A4A4
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#A4A4A4
punctuation.definition.entity.css, punctuation.definition.keyword.css#FAFAFA
markup.inserted#D9F5DD
markup.deleted#ef6b73
markup.changed#62aedc
string.regexp#D9F5DD
constant.character.escape#D9F5DD
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#A4A4A4
source.js constant.other.object.key.js string.unquoted.label.js#ef6b73italic
source.json meta.structure.dictionary.json support.type.property-name.json#A4A4A4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A4A4A4
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#A4A4A4
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#A4A4A4
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#A4A4A4
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#ffcc66italic
markup.quote#A4A4A4italic
markup.raw.block#62aedc
markup.table#A4A4A4
text.html.markdown, punctuation.definition.list_item.markdown#FAFAFA
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#A4A4A4
text.html.markdown meta.dummy.line-break#FAFAFA
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#D9F5DD
markup.quote, punctuation.definition.blockquote.markdown#A4A4A4italic
string.other.link.title.markdown#ffcc66underline
markup.raw.block.fenced.markdown#d7dce2
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#FAFAFA
variable.language.fenced.markdown#FAFAFA
meta.separator#FAFAFA
token.info-token#A4A4A4
token.warn-token#ffcc66
token.error-token#ef6b73
token.debug-token#62aedc
storage.type.error.go#A4A4A4
punctuation.other.period.go#62aedc
Aro Ace by Philipp Schmidt - VS Code Theme