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#141622
  • activityBar.foreground#eff0eb
  • activityBar.inactiveForeground#2c2f3f
  • activityBarBadge.background#ff6ac1
  • activityBarBadge.foreground#eff0eb
  • badge.background#40414a
  • badge.foreground#eff0eb
  • breadcrumb.activeSelectionForeground#eff0eb
  • breadcrumb.background#141622
  • breadcrumb.focusForeground#eff0eb
  • breadcrumb.foreground#585a61
  • breadcrumbPicker.background#141622
  • button.background#ff6ac1
  • button.foreground#eff0eb
  • debugToolBar.background#181b29
  • diffEditor.insertedTextBackground#5af78e20
  • diffEditor.removedTextBackground#ff5c5750
  • dropdown.background#181b29
  • dropdown.border#2c2f3f
  • dropdown.foreground#eff0eb
  • editor.background#141622
  • editor.findMatchBackground#ffbc5880
  • editor.findMatchHighlightBackground#40414a
  • editor.findRangeHighlightBackground#40414a
  • editor.foreground#eff0eb
  • editor.hoverHighlightBackground#40414a
  • editor.lineHighlightBackground#181b29
  • editor.rangeHighlightBackground#40414a
  • editor.selectionBackground#40414a
  • editor.selectionHighlightBackground#40414a
  • editor.snippetFinalTabstopHighlightBackground#141622
  • editor.snippetFinalTabstopHighlightBorder#5af78e
  • editor.snippetTabstopHighlightBackground#141622
  • editor.snippetTabstopHighlightBorder#57c7ff
  • editor.wordHighlightBackground#40414a
  • editor.wordHighlightStrongBackground#40414a
  • editorCodeLens.foreground#57c7ff
  • editorCursor.foreground#838387
  • editorError.foreground#ff5c57
  • editorGroup.border#585a61
  • editorGroup.dropBackground#1416229b
  • editorGroupHeader.tabsBackground#141622
  • editorGutter.addedBackground#5af78e80
  • editorGutter.deletedBackground#ff5c5780
  • editorGutter.modifiedBackground#9aedfe80
  • editorHoverWidget.background#141622
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#4d4e4f
  • editorLineNumber.foreground#4d4e4f
  • editorLink.activeForeground#ff5c57
  • editorMarkerNavigation.background#232631
  • editorOverviewRuler.addedForeground#5af78e80
  • editorOverviewRuler.border#2c2f3f
  • editorOverviewRuler.currentContentForeground#5af78e
  • editorOverviewRuler.deletedForeground#ff5c5780
  • editorOverviewRuler.errorForeground#ff5c5780
  • editorOverviewRuler.incomingContentForeground#585a61
  • editorOverviewRuler.infoForeground#9aedfe80
  • editorOverviewRuler.modifiedForeground#9aedfe80
  • editorOverviewRuler.selectionHighlightForeground#F3F99D
  • editorOverviewRuler.warningForeground#ffbc5880
  • editorOverviewRuler.wordHighlightForeground#9aedfe
  • editorOverviewRuler.wordHighlightStrongForeground#5af78e
  • editorRuler.foreground#4d4e4f
  • editorSuggestWidget.background#232631
  • editorSuggestWidget.foreground#eff0eb
  • editorSuggestWidget.selectedBackground#40414a
  • editorWarning.foreground#9aedfe
  • editorWhitespace.foreground#4d4e4f
  • editorWidget.background#181b29
  • errorForeground#ff5c57
  • extensionButton.prominentBackground#5af78e90
  • extensionButton.prominentForeground#eff0eb
  • extensionButton.prominentHoverBackground#5af78e60
  • focusBorder#585a61
  • foreground#eff0eb
  • gitDecoration.conflictingResourceForeground#F3F99D
  • gitDecoration.deletedResourceForeground#ff5c57
  • gitDecoration.ignoredResourceForeground#4d4e4f
  • gitDecoration.modifiedResourceForeground#9aedfe
  • gitDecoration.untrackedResourceForeground#5af78e
  • input.background#141622
  • input.border#2c2f3f
  • input.foreground#eff0eb
  • input.placeholderForeground#4d4e4f
  • inputOption.activeBorder#585a61
  • inputValidation.errorBorder#ff5c57
  • inputValidation.infoBorder#ff6ac1
  • inputValidation.warningBorder#F3F99D
  • list.activeSelectionBackground#40414a
  • list.activeSelectionForeground#eff0eb
  • list.dropBackground#40414a
  • list.errorForeground#ff5c57
  • list.focusBackground#40414a
  • list.highlightForeground#9aedfe
  • list.hoverBackground#40414a
  • list.inactiveSelectionBackground#40414a
  • list.warningForeground#F3F99D
  • listFilterWidget.background#181b29
  • listFilterWidget.noMatchesOutline#ff5c57
  • listFilterWidget.outline#4d4e4f
  • merge.currentHeaderBackground#5af78e90
  • merge.incomingHeaderBackground#585a6190
  • panel.background#141622
  • panel.border#2c2f3f
  • panelTitle.activeBorder#ff6ac1
  • panelTitle.activeForeground#eff0eb
  • panelTitle.inactiveForeground#eff0eb
  • peekView.border#5af78e
  • peekViewEditor.background#141622
  • peekViewEditor.matchHighlightBackground#ffbc5880
  • peekViewResult.background#232631
  • peekViewResult.fileForeground#eff0eb
  • peekViewResult.lineForeground#eff0eb
  • peekViewResult.matchHighlightBackground#ffbc5880
  • peekViewResult.selectionBackground#40414a
  • peekViewResult.selectionForeground#eff0eb
  • peekViewTitle.background#2c2f3f
  • peekViewTitleDescription.foreground#57c7ff
  • peekViewTitleLabel.foreground#eff0eb
  • pickerGroup.border#585a61
  • pickerGroup.foreground#9aedfe
  • progressBar.background#ff6ac1
  • selection.background#585a61
  • settings.checkboxBackground#232631
  • settings.checkboxBorder#2c2f3f
  • settings.checkboxForeground#eff0eb
  • settings.dropdownBackground#232631
  • settings.dropdownBorder#2c2f3f
  • settings.dropdownForeground#eff0eb
  • settings.headerForeground#eff0eb
  • settings.modifiedItemIndicator#ff6ac1
  • settings.numberInputBackground#232631
  • settings.numberInputBorder#2c2f3f
  • settings.numberInputForeground#eff0eb
  • settings.textInputBackground#232631
  • settings.textInputBorder#2c2f3f
  • settings.textInputForeground#eff0eb
  • sideBar.background#181b29
  • sideBar.border#2c2f3f
  • sideBarSectionHeader.background#141622
  • sideBarSectionHeader.border#2c2f3f
  • sideBarTitle.foreground#eff0eb
  • statusBar.background#181b29
  • statusBar.debuggingBackground#ff5c57
  • statusBar.debuggingForeground#eff0eb
  • statusBar.foreground#585a61
  • statusBar.noFolderBackground#141622
  • statusBar.noFolderForeground#eff0eb
  • statusBarItem.prominentBackground#ff5c57
  • statusBarItem.prominentHoverBackground#F3F99D
  • tab.activeBackground#181b29
  • tab.activeBorder#ff6ac1
  • tab.border#2c2f3f
  • tab.inactiveBackground#141622
  • tab.inactiveForeground#585a61
  • terminal.ansiBlack#141622
  • terminal.ansiBlue#57c7ff
  • terminal.ansiBrightBlack#585a61
  • terminal.ansiBrightBlue#57c7ff
  • terminal.ansiBrightCyan#9aedfe
  • terminal.ansiBrightGreen#5af78e
  • terminal.ansiBrightMagenta#ff6ac1
  • terminal.ansiBrightRed#ff5c57
  • terminal.ansiBrightWhite#eff0eb
  • terminal.ansiBrightYellow#F3F99D
  • terminal.ansiCyan#9aedfe
  • terminal.ansiGreen#5af78e
  • terminal.ansiMagenta#ff6ac1
  • terminal.ansiRed#ff5c57
  • terminal.ansiWhite#eff0eb
  • terminal.ansiYellow#F3F99D
  • titleBar.activeBackground#181b29
  • titleBar.activeForeground#eff0eb
  • titleBar.inactiveBackground#2c2f3f
  • titleBar.inactiveForeground#585a61
  • walkThrough.embeddedEditorBackground#232631

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strong, markup.boldbold
emphasis, markup.italicitalic
markup.underlineunderline
comment, punctuation.definition.comment, string.quoted.docstring#4D4E4Fitalic
storage.type#F3F99D
storage.type.primitive, support.type, entity.name.type, keyword.type, keyword.other.unit#9AEDFE
string, meta.structure.dictionary.json string.quoted.double.json#5AF78E
constant.language.boolean#B76AFF
constant.numeric, support.constant#F3F99D
constant.language.null#FF5C57
constant.language.undefined#FF6AC1
meta.function entity.name.function#57C7FF
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.require, variable.language.super, keyword.other.get, keyword.other.set#57C7FF
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#EFF0EB
variable.other.constant.property#F3F99D
entity.name.type.class#FF5C57
entity.other.inherited-class entity.name.type.module#FF5C57
variable.object.property#F3F99D
meta.definition.method entity.name.function#F3F99D
keyword, modifier, storage.modifier, support.type.object, constant.language, variable.language.this, variable.language.special.self#FF6AC1
support.module, support.node#FF5C57
template.expression.begin, template.expression.end#FF6AC1
support.type.exception#F3F99D
markup.inserted.diff, meta.diff.header.to-file#5AF78E
markup.deleted.diff, meta.diff.header.from-file#FF5C57
source.cs meta.class.identifier storage.type#FF5C57
source.cs meta.method.identifier entity.name.function#F3F99D
source.cs meta.method-call meta.method, source.cs entity.name.function#57C7FF
source.cs storage.type#F3F99D
source.cs meta.method.return-type#9AEDFE
source.cs meta.preprocessor#4D4E4F
source.cs entity.name.type.namespace#EFF0EB
entity.other.attribute-name.class#9AEDFE
entity.other.attribute-name.id#9AEDFE
source.css entity.name.tag#F3F99D
source.css support.type.property-name#FF5C57
meta.tag, punctuation.definition.tag#EFF0EB
entity.name.tag#FF5C57
entity.other.attribute-name#F3F99D
punctuation.section.embedded#FF5C57
keyword.other.definition.ini#FF5C57
entity.name.section.group-title.ini#57C7FF
source.java storage.modifier.package, source.java storage.modifier.import#EFF0EB
source.java storage.type.annotation#FF5C57italic
source.java meta.method-call meta.method#57C7FF
source.java meta.method-call meta.inner-class meta.method#EFF0EB
source.java meta.method-call meta.inner-class meta.method meta.method-call meta.method#57C7FF
source.java meta.definition.variable entity.name.function#57C7FF
source.java constant.language#5AF78E
source.js storage.modifier.async#FF6AC1
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#FF5C57
constant.language.json#FF6AC1
markup.heading#57C7FF
text.html.markdown meta.link.inline, meta.link.reference, markup.underline.link.image#FF5C57
text.html.markdown markup.quote#9AEDFE
text.html.markdown beginning.punctuation.definition.list#F3F99D
text.html.markdown markup.inline.raw#FF6AC1
markup.italic#FF5C57italic
markup.bold#FF5C57bold
markup.bold markup.italic, markup.italic markup.bold#FF5C57italic bold
source.python keyword.operator.arithmetic#EFF0EB
source.python meta.function storage.type.function#FF6AC1
source.python meta.function-call.arguments#EFF0EB
source.python meta.function entity.name.function.decorator#FF5C57
source.python constant.language#5AF78E
entity.name.tag.yaml#FF5C57
meta.selectionset.graphql variable#F3F99D
meta.selectionset.graphql meta.arguments variable#EFF0EB
entity.name.fragment.graphql, variable.fragment.graphql#9AEDFE
keyword.operator, keyword.operator.new, keyword.operator.expression, string, constant.other.placeholder, meta.embedded.assembly, storage.modifier, storage.type, storage.type.class.jsdoc, storage.type.function.jsdoc, storage.type.typedef.jsdoc, storage.type.variable.jsdoc, keyword.control, comment, comment.block, entity.other.attribute-name.html, variable, entity.name.function, entity.name.type, entity.name.class, entity.name.tag, entity.name.section, entity.name.selector, entity.name.method, entity.name.module, entity.name.scope-resolution, entity.name.variable
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
The Best Themes for programmers by Estevam Souza - VS Code Theme