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#171520
  • activityBar.foreground#ffffffCC
  • activityBarBadge.background#f97e72
  • activityBarBadge.foreground#2a2139
  • 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#262335
  • editor.findMatchBackground#D18616bb
  • editor.findMatchHighlightBackground#D1861655
  • editor.findRangeHighlightBackground#34294f1a
  • editor.hoverHighlightBackground#463564
  • editor.lineHighlightBorder#7059AB66
  • editor.rangeHighlightBackground#49549539
  • editor.selectionBackground#ffffff24
  • editor.selectionHighlightBackground#ffffff14
  • editor.wordHighlightBackground#34294f88
  • editor.wordHighlightStrongBackground#34294f88
  • editorBracketMatch.background#34294f66
  • editorBracketMatch.border#495495
  • editorCodeLens.foreground#ffffff7c
  • editorCursor.background#241b2f
  • editorCursor.foreground#f97e72
  • editorError.foreground#fe4450
  • editorGroup.border#495495
  • editorGroup.dropBackground#4954954a
  • editorGroupHeader.tabsBackground#241b2f
  • editorGutter.addedBackground#206d4bd6
  • editorGutter.deletedBackground#fa2e46a4
  • editorGutter.modifiedBackground#b893ce8f
  • editorIndentGuide.activeBackground#A148AB80
  • editorIndentGuide.background#444251
  • editorLineNumber.activeForeground#ffffffcc
  • editorLineNumber.foreground#ffffff73
  • 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
  • editorWidget.background#171520DC
  • editorWidget.border#ffffff22
  • editorWidget.resizeBorder#ffffff44
  • errorForeground#fe4450
  • extensionButton.prominentBackground#f97e72
  • extensionButton.prominentHoverBackground#ff7edb
  • focusBorder#1f212b
  • foreground#ffffff
  • 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#ffffff20
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#34294f66
  • list.errorForeground#fe4450E6
  • list.focusBackground#ffffff20
  • list.focusForeground#ffffff
  • list.highlightForeground#f97e72
  • list.hoverBackground#37294d99
  • 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#495495
  • peekViewEditor.background#232530
  • 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#241b2f
  • sideBar.dropBackground#34294f4c
  • sideBar.foreground#ffffff99
  • sideBarSectionHeader.background#241b2f
  • sideBarSectionHeader.foreground#ffffffca
  • statusBar.background#241b2f
  • statusBar.debuggingBackground#f97e72
  • statusBar.debuggingForeground#08080f
  • statusBar.foreground#ffffff80
  • statusBar.noFolderBackground#241b2f
  • statusBarItem.prominentBackground#2a2139
  • statusBarItem.prominentHoverBackground#34294f
  • tab.activeBorder#880088
  • tab.border#241b2f00
  • tab.inactiveBackground#262335
  • terminal.ansiBlack#676e95
  • terminal.ansiBlue#94afeb
  • terminal.ansiBrightBlack#676e95
  • terminal.ansiBrightBlue#b9dedf
  • terminal.ansiBrightCyan#8ee2e5
  • terminal.ansiBrightGreen#87de97
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff5370
  • terminal.ansiBrightWhite#dddddd
  • terminal.ansiBrightYellow#f78c6c
  • terminal.ansiCyan#b9dedf
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#b4b8d0
  • terminal.ansiYellow#ffcb6b
  • terminal.background#262335
  • terminal.foreground#cccccc
  • terminal.selectionBackground#ffffff20
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#03edf9
  • textLink.activeForeground#ff7edb
  • textLink.foreground#f97e72
  • titleBar.activeBackground#241b2f
  • titleBar.inactiveBackground#241b2f
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#2a2139

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cccccc
invalid, invalid.illegal#ff5370
invalid.deprecated#f78c6c
*url*, *link*, *uri*underline
storage.modifier.pointer, storage.modifier.reference#b9dedf
punctuation.separator.pointer-access#b9dedf
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#b9dedf
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#f78c6c
source.css variable#dddddd
source.css support.type.property-name#b4b8d0
comment, punctuation.definition.comment, string.quoted.docstring#676e95italic
keyword.type, entity.name.tag, meta.tag.sgml, entity.name.type.struct, support.type, support.class, support.type.sys-types, support.type.built-in#f07178
string, constant.other.symbol#c3e88d
entity.name, entity.other.attribute-name#ffcb6b
entity.name.function, variable.function#94afeb
keyword, storage#c792eabold
support, keyword.other.special-method, variable.language, string.regexp, constant.character.escape, support.other.variable#b9dedf
source, text, variable, entity.name.variable, entity.name.namespace, constant.other.placeholder#b4b8d0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit#ff5370
string.other.link#87de97
entity.name.type.parameter, entity.name.type.type-parameter, variable.other.generic-type#f78c6c
keyword.operator, support.function#b9dedf
keyword.other#c792ea
punctuation.definition.tag, punctuation.definition, punctuation, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.separator#8ee2e5
entity.name.variable.field, entity.name.variable.property, variable.other.property, variable.other.field#dddddd
markup.inserted#c3e88d
markup.deleted#f07178
markup.changed#ffcb6b
markup.deleted.git_gutter#f07178
markup.inserted.git_gutter#c3e88d
markup.changed.git_gutter#ffcb6b
markup.untracked.git_gutter#ff5370
markup.ignored.git_gutter#676e95
constant.other.haskell#f07178
storage.type.haskell#ffcb6b
source.js storage, source.js keyword.declaration#ffcb6b
constant.other.key meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#c3e88d
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#b9dedf
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#b9dedfitalic
source.json meta.structure.dictionary.json support.type.property-name.json#f07178
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffcb6b
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#f78c6c
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#c3e88d
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#94afeb
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#b9dedf
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#c792ea
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#b4b8d0
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#dddddd
markup.bold, markup.bold string#f07178bold
markup.italic#c792eaitalic
markup.underline#c3e88dunderline
markup.strike#676e95strike
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ff5370bold
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading.setext#f07178bold
constant.other.reference.link.markdown, string.other.link.title.markdown#ffcb6b
markup.raw, markup.fenced_code, markup.inline.raw#94afeb
string.other.link.description.title.markdown#c792ea
markup.table#b9dedf
markup.quote#b9dedfitalic
text.html.markdown, punctuation.definition.list_item.markdown#b4b8d0
variable.language.fenced.markdown#dddddd
source.purescript entity.name.type#ffcb6b
source.purescript entity.name.class#f78c6c
storage.type.string.python#8ee2e5
source.rust entity.name.type.lifetime, source.rust punctuation.definition.lifetime#f78c6c
Ansi16 Theme Collection by chtenb - VS Code Theme