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#282a36
  • activityBar.foreground#ffffffCC
  • activityBarBadge.background#1c58cf
  • activityBarBadge.foreground#ffffff
  • badge.background#2a2139
  • badge.foreground#ffffff
  • breadcrumbPicker.background#232530
  • button.background#614D85
  • debugToolBar.background#463465
  • diffEditor.insertedTextBackground#0beb9935
  • diffEditor.removedTextBackground#fe445035
  • dropdown.background#232530
  • dropdown.listBackground#2a2139
  • editor.background#282a36
  • editor.findMatchBackground#D18616bb
  • editor.findMatchHighlightBackground#54555e
  • editor.findRangeHighlightBackground#54555e
  • editor.foreground#eff0eb
  • editor.hoverHighlightBackground#54555e
  • editor.lineHighlightBackground#2C2F3D
  • editor.lineHighlightBorder#7059AB66
  • editor.rangeHighlightBackground#54555e
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#54555e
  • editor.wordHighlightBackground#54555e
  • editor.wordHighlightStrongBackground#54555e
  • editorBracketMatch.background#34294f66
  • editorBracketMatch.border#495495
  • editorCodeLens.foreground#ffffff7c
  • editorCursor.background#241b2f
  • editorCursor.foreground#97979b
  • editorError.foreground#fe4450
  • editorGroup.border#495495
  • editorGroup.dropBackground#232631
  • editorGroupHeader.tabsBackground#232631
  • editorGutter.addedBackground#206d4bd6
  • editorGutter.deletedBackground#fa2e46a4
  • editorGutter.modifiedBackground#b893ce8f
  • editorIndentGuide.activeBackground#A148AB80
  • editorIndentGuide.background#616263
  • editorLineNumber.activeForeground#ffffffcc
  • editorLineNumber.foreground#616263
  • editorLink.activeForeground#ff5c57
  • editorOverviewRuler.addedForeground#09f7a099
  • editorOverviewRuler.border#34294fb3
  • editorOverviewRuler.deletedForeground#fe445099
  • editorOverviewRuler.errorForeground#fe4450dd
  • editorOverviewRuler.findMatchForeground#D1861699
  • editorOverviewRuler.modifiedForeground#b893ce99
  • editorOverviewRuler.warningForeground#72f1b8cc
  • editorRuler.foreground#A148AB80
  • editorSuggestWidget.highlightForeground#f97e72
  • editorSuggestWidget.selectedBackground#ffffff36
  • editorWarning.foreground#72f1b8cc
  • editorWhitespace.foreground#616263
  • editorWidget.background#171520DC
  • editorWidget.border#ffffff22
  • editorWidget.resizeBorder#ffffff44
  • errorForeground#fe4450
  • extensionButton.prominentBackground#f97e72
  • extensionButton.prominentHoverBackground#ff7edb
  • focusBorder#1f212b
  • foreground#eff0eb
  • gitDecoration.addedResourceForeground#72f1b8cc
  • gitDecoration.deletedResourceForeground#fe4450
  • gitDecoration.ignoredResourceForeground#ffffff59
  • gitDecoration.modifiedResourceForeground#b893ceee
  • gitDecoration.untrackedResourceForeground#72f1b8
  • input.background#2a2139
  • inputOption.activeBorder#ff7edb99
  • inputValidation.errorBackground#fe445080
  • inputValidation.errorBorder#fe445000
  • list.activeSelectionBackground#54555e
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#34294f66
  • list.errorForeground#fe4450E6
  • list.focusBackground#ffffff20
  • list.focusForeground#ffffff
  • list.highlightForeground#f97e72
  • list.hoverBackground#54555e
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#2a213999
  • list.inactiveSelectionBackground#ffffff20
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#72f1b8bb
  • menu.background#463465
  • minimapGutter.addedBackground#09f7a099
  • minimapGutter.deletedBackground#fe4450
  • minimapGutter.modifiedBackground#b893ce
  • panelTitle.activeBorder#f97e72
  • peekView.border#5af78e
  • peekViewEditor.background#282a36
  • peekViewEditor.matchHighlightBackground#D18616bb
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#D1861655
  • peekViewResult.selectionBackground#2a213980
  • peekViewTitle.background#232530
  • pickerGroup.foreground#f97e72ea
  • progressBar.background#f97e72
  • scrollbar.shadow#2a2139
  • scrollbarSlider.activeBackground#9d8bca20
  • scrollbarSlider.background#9d8bca30
  • scrollbarSlider.hoverBackground#9d8bca50
  • selection.background#ffffff20
  • sideBar.background#2C2F3D
  • sideBar.dropBackground#34294f4c
  • sideBar.foreground#ffffff99
  • sideBarSectionHeader.background#ffffff11
  • sideBarSectionHeader.foreground#ffffffca
  • statusBar.background#2E313D
  • statusBar.debuggingBackground#6C6E75
  • statusBar.debuggingForeground#08080f
  • statusBar.foreground#6C6E75
  • statusBar.noFolderBackground#6C6E75
  • statusBarItem.prominentBackground#2a2139
  • statusBarItem.prominentHoverBackground#34294f
  • tab.activeBackground#232631
  • tab.activeBorder#880088
  • tab.border#241b2f00
  • tab.inactiveBackground#2C2F3D
  • terminal.ansiBlack#282a36
  • terminal.ansiBlue#57c7ff
  • terminal.ansiBrightBlack#282a36
  • 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
  • terminal.foreground#ffffff
  • terminal.selectionBackground#ffffff20
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#03edf9
  • textLink.activeForeground#ff7edb
  • textLink.foreground#f97e72
  • titleBar.activeBackground#282a36
  • titleBar.inactiveBackground#241b2f
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#2a2139

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#eff0eb
strong, markup.boldbold
emphasis, markup.italicitalic
markup.underlineunderline
comment, punctuation.definition.comment, string.quoted.docstring#777777italic
storage.type#f3f99ditalic
storage.type.primitive, support.type, entity.name.type, keyword.type, keyword.other.unit#9aedfe
string, meta.structure.dictionary.json string.quoted.double.json#5af78eitalic
constant.language.boolean#5af78eitalic
constant.numeric, support.constant#5af78eitalic
constant.language.null#5af78e
constant.language.undefined#5af78e
meta.function entity.name.function#36f9f6
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.require, variable.language.super, keyword.other.get, keyword.other.set#36f9f6italic
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function, entity.name.variable#f92aad
variable.other.constant.property#f3f99d
entity.name.type.class#ff5c57
entity.other.inherited-class entity.name.type.module#ff5c57italic
variable.object.property#f3f99d
variable.parameteritalic
meta.definition.method entity.name.function#f3f99d
keyword, modifier, storage.modifier, support.type.object, constant.language, variable.language.this, variable.language.special.self#f9f52a
keyword.control.import.js#ff295e
storage.modifier, storage.type.class.js, variable.language.this, variable.language.this.jsitalic
support.module, support.node#ff5c57italic
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#616263
source.cs entity.name.type.namespace#eff0eb
entity.other.attribute-name.class#5af78e
entity.other.attribute-name.id#5af78e
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#f3f99ditalic
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