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.activeBorder#3cb9fc
  • activityBar.activeFocusBorder#3cb9fc
  • activityBar.background#000000
  • activityBar.foreground#ffffff
  • activityBarBadge.background#3cb9fc
  • activityBarBadge.foreground#141414
  • badge.background#3cb9fc
  • badge.foreground#000000
  • button.background#3cb9fc
  • button.foreground#1b1e23
  • button.hoverBackground#3cb9fc
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#000000
  • dropdown.border#ffffff22
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.findMatchBackground#3cb9fc66
  • editor.findMatchHighlightBackground#ffffff22
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#ffffff22
  • editor.inactiveSelectionBackground#ffffff20
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#ffffff05
  • editor.selectionBackground#ffffff40
  • editor.selectionHighlightBackground#ffffff22
  • editor.selectionHighlightBorder#ffffff30
  • editor.wordHighlightBackground#ff000000
  • editor.wordHighlightStrongBackground#000000
  • editor.wordHighlightStrongBorder#ffffff80
  • editorCodeLens.foreground#ffffff66
  • editorCursor.foreground#ffffff
  • editorError.foreground#f08080
  • editorGroup.border#181a1f
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#3cb9fc
  • editorGutter.deletedBackground#f08080
  • editorGutter.modifiedBackground#3cb9fc
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#141414
  • editorHoverWidget.foreground#ffffff
  • editorIndentGuide.background#ffffff22
  • editorLineNumber.foreground#ffffff33
  • editorLink.activeForeground#3cb9fc
  • editorOverviewRuler.addedForeground#3cb9fc00
  • editorOverviewRuler.border#ff000000
  • editorOverviewRuler.bracketMatchForeground#3cb9fc00
  • editorOverviewRuler.deletedForeground#e040fb00
  • editorOverviewRuler.errorForeground#f08080
  • editorOverviewRuler.infoForeground#ffff0000
  • editorOverviewRuler.modifiedForeground#3cb9fc00
  • editorOverviewRuler.warningForeground#ffab40
  • editorRuler.foreground#ffffff66
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.border#1e1e1e
  • editorSuggestWidget.foreground#f8f8f0
  • editorSuggestWidget.highlightForeground#3cb9fc
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#ffab40
  • editorWhitespace.foreground#ffffff66
  • editorWidget.background#000000
  • editorWidget.border#3cb9fc00
  • errorForeground#f08080
  • extensionButton.prominentBackground#3cb9fc
  • extensionButton.prominentForeground#0a0a0a
  • extensionButton.prominentHoverBackground#3cb9fc
  • focusBorder#3cb9fc
  • gitlens.trailingLineBackgroundColor#000000
  • gitlens.trailingLineForegroundColor#3cb9fc
  • input.background#000000
  • input.border#3cb9fc
  • input.foreground#f8f8f0
  • input.placeholderForeground#ffffff66
  • inputOption.activeBackground#00000000
  • inputOption.activeBorder#3cb9fc
  • inputValidation.errorBackground#f08080
  • inputValidation.errorBorder#f08080
  • inputValidation.infoBackground#0a0a0a
  • inputValidation.infoBorder#3cb9fc
  • inputValidation.warningBackground#0a0a0a
  • inputValidation.warningBorder#ffab40
  • list.activeSelectionBackground#ffffff20
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#f08080
  • list.focusBackground#ffffff22
  • list.focusForeground#f8f8f0
  • list.highlightForeground#ffffff
  • list.hoverBackground#ffffff10
  • list.inactiveSelectionBackground#ffffff22
  • list.inactiveSelectionForeground#f8f8f0
  • list.warningForeground#ffab40
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#ffffff
  • notifications.background#000000
  • notifications.foreground#ffffff
  • panel.background#000000
  • panel.border#141414
  • panelTitle.activeBorder#3cb9fc
  • pickerGroup.border#40c3ff00
  • pickerGroup.foreground#3cb9fc
  • progressBar.background#3cb9fc
  • quickInput.background#000000
  • quickInput.foreground#ffffff
  • quickInputTitle.background#000000
  • scrollbar.shadow#ff000000
  • scrollbarSlider.activeBackground#ffffff99
  • scrollbarSlider.background#ffffff33
  • scrollbarSlider.hoverBackground#ffffff66
  • sideBar.background#000000
  • sideBar.border#ffffff20
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#000000
  • statusBar.debuggingBackground#1e1e1e
  • statusBar.foreground#3cb9fc
  • statusBar.noFolderBackground#1e1e1e
  • statusBarItem.hoverBackground#ffffff33
  • tab.activeBackground#000000
  • tab.activeBorder#3cb9fc
  • tab.activeForeground#ffffff
  • tab.border#ffffff00
  • tab.hoverBackground#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#8f8f8f
  • terminal.ansiBlue#5ccaef
  • terminal.ansiBrightBlack#8f8f8f
  • terminal.ansiBrightBlue#5ccaef
  • terminal.ansiBrightCyan#a57fff
  • terminal.ansiBrightGreen#98d800
  • terminal.ansiBrightMagenta#f57f00
  • terminal.ansiBrightRed#f82a5d
  • terminal.ansiBrightWhite#f1f1f1
  • terminal.ansiBrightYellow#e7dc60
  • terminal.ansiCyan#3f00ff
  • terminal.ansiGreen#6f00ff
  • terminal.ansiMagenta#3f00ff
  • terminal.ansiRed#f82a5d
  • terminal.ansiWhite#f1f1f1
  • terminal.ansiYellow#18ffff
  • terminal.background#000000
  • terminal.border#000000
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#3cb9fc
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#3cb9fc
  • tree.indentGuidesStroke#ffffff20
  • widget.shadow#00000090

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ffffff80italic
string, punctuation.definition.string#ffffffbold italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ffff33bold italic
constant.numeric#0084ffbold italic
constant.language, entity.other.attribute-name.pseudo-class#bf00ffbold italic
constant.language.json#3f00ffbold italic
constant.language.boolean.false#ff0000
constant.language.boolean.true#00ff00
constant.language.null, constant.language.undefined#f700ffbold italic
constant.character, constant.other#bf00ff
variable#18ffffbold italic
keyword#ff1476bold
storage#ff1476bold
punctuation.accessor.optional#ff1476bold
storage.type#3f00ffbold
entity.name.class#18ffffbold italic
entity.other.inherited-class#0084ffbold italic
entity.name.function, support.function, meta.at-rule.keyframes, meta.at-rule.keyframes.body, meta.at-rule.media.header, variable.parameter.keyframe-list#6f00ffbold italic
entity.name.type, support.type.primitive#6f00ffbold italic
variable.parameter#18ffffbold italic
entity.name.tag#3f00ffbold
entity.other.attribute-name#6f00ffitalic bold
entity.other.attribute-name.class, entity.other.attribute-name.id.css#bf00ffitalic bold
support.constant, constant.other#3f00ffbold italic
support.type, support.class, support.variable#18ffffbold italic
support.variable.property, support.other.variable#3f00ffbold italic
invalid#f8f8f0bold
invalid.deprecated#f8f8f0
string.quoted.double.json#ffffff
meta.structure.dictionary.json#ffffffbold
meta.diff, meta.diff.header#75715e
markup.deleted#ff1476
markup.inserted#3f00ff
markup.changed#e6db74
constant.numeric.line-number.find-in-files - match#0084ff
entity.name.filename.find-in-files#e6db74
variable.language#3f00ffbold
heading.1.markdown#3f00ffbold
punctuation.definition.heading.markdown#3f00ff
entity.name.section.markdown#3f00ff
punctuation.definition.list.begin.markdown#bf00ff
meta.image.inline.markdown#e6db74
markup.bold.markdown#ffffffbold
markup.italic.markdown#ffffffitalic
markup.inline.raw.string.markdown#66d9ef
meta.separator.markdown#8f8f8f
punctuation.definition.template-expression#3f00ffitalic bold
meta.brace.round, meta.brace.square, punctuation.section, punctuation.section.keyframes, punctuation.definition, punctuation.definition.string.template#ffff33bold italic
punctuation.definition.tag#ffffffbold
variable.other.object, variable.other.readwrite, variable.parameter#18ffffbold italic
variable.other.object.property#0084ffbold italic
variable.other.property#bf00ffbold italic
meta.object-literal#0057e9bold italic
punctuation.separator.comma, punctuation.separator.parameter, punctuation.accessor, punctuation.terminator, punctuation.separator.key-value, text.html, meta.object.member#ffffffbold
support.constant.mathematical-symbols, support.constant.mathematical-symbols, meta.property-value#6f00ffbold italic
punctuation.separator.delimiter, punctuation.separator.list.comma.css, punctuation.separator.list.comma.scss#ffffffbold italic
entity.name.tag.reference, meta.block#ff1476bold
source.ignore, meta.scope.recipe.makefile, source.env, source.ini, source.shell#ffffffbold italic
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff1476bold
meta.var.expr#3f00ffbold italic
source.dockerfile#3cb9fcbold italic
punctuation.section.embedded.begin.php#8892bebold
meta.jsx.children#ffffffbold
meta.property-list#ffffffbold