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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#75FB9F
  • activityBar.background#181818
  • activityBar.border#2b2b2b
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#75FB9F
  • activityBarBadge.foreground#181818
  • badge.background#616161
  • badge.foreground#f8f8f8
  • button.background#75FB9F
  • button.border#ffffff12
  • button.foreground#181818
  • button.hoverBackground#57ca7b
  • button.secondaryBackground#313131
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#3c3c3c
  • chat.slashCommandBackground#34414b
  • chat.slashCommandForeground#40a6ff
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugIcon.breakpointForeground#ff8080
  • debugToolBar.background#181818
  • descriptionForeground#9d9d9d
  • diffEditor.insertedLineBackground#00ff951e
  • diffEditor.insertedTextBackground#00ff951e
  • diffEditor.removedLineBackground#ff00401e
  • diffEditor.removedTextBackground#ff00401e
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#cccccc
  • dropdown.listBackground#1f1f1f
  • editor.background#1B1B1B
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a3d41d7
  • editor.linkedEditingBackground#ffc79920
  • editor.selectionBackground#75FB9F44
  • editor.selectionHighlightBackground#75FB9F33
  • editor.wordHighlightBackground#ffc79920
  • editor.wordHighlightStrongBackground#ffc79920
  • editorBracketHighlight.foreground1#75ffbf
  • editorBracketHighlight.foreground2#009e6c
  • editorBracketHighlight.foreground3#75ffbf
  • editorBracketHighlight.foreground4#009e6c
  • editorBracketHighlight.foreground5#75ffbf
  • editorBracketHighlight.foreground6#009e6c
  • editorBracketHighlight.unexpectedBracket.foreground#cccccc
  • editorCursor.background#2c2c2c
  • editorCursor.foreground#75FB9F
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#2b2b2b
  • editorGutter.addedBackground#00ff95
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#00a2d4
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorLink.activeForeground#FFFEAA
  • editorOverviewRuler.border#010409
  • editorWarning.background#FA973B20
  • editorWarning.foreground#FA973B
  • editorWidget.background#202020
  • errorForeground#f85149
  • focusBorder#75FB9F
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#75FB9F
  • gitDecoration.conflictingResourceForeground#ff8080
  • gitDecoration.modifiedResourceForeground#ffc799
  • gitDecoration.stageModifiedResourceForeground#ffc799
  • gitDecoration.untrackedResourceForeground#75FB9F
  • icon.foreground#cccccc
  • input.background#313131
  • input.border#3c3c3c
  • input.foreground#cccccc
  • input.placeholderForeground#818181
  • inputOption.activeBackground#db242482
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionBackground#75FB9F44
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusHighlightForeground#75FB9F
  • list.highlightForeground#cccccc
  • list.warningForeground#FA973B
  • menu.background#1f1f1f
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1f1f1f
  • notifications.border#2b2b2b
  • notifications.foreground#cccccc
  • notificationsInfoIcon.foreground#75FB9F
  • panel.background#181818
  • panel.border#2b2b2b
  • panelInput.border#2b2b2b
  • panelTitle.activeBorder#75FB9F
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • pickerGroup.foreground#75FB9F
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#222222
  • quickInput.foreground#cccccc
  • selection.background#75FB9F44
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#181818
  • sideBar.border#2b2b2b
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#2b2b2b
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#1e1e1e
  • statusBar.border#2b2b2b
  • statusBar.debuggingBackground#75FB9F
  • statusBar.debuggingForeground#181818
  • statusBar.focusBorder#000000
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#1f1f1f
  • statusBarItem.focusBorder#e00606
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#009e6c
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#75FB9F
  • tab.activeForeground#ffffff
  • tab.border#2b2b2b
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#cccccc33
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedHoverBackground#1f1f1f
  • terminal.ansiBlack#353535
  • terminal.ansiBlue#A9F0FD
  • terminal.ansiBrightBlack#353535
  • terminal.ansiBrightBlue#A9F0FD
  • terminal.ansiBrightCyan#87f2ff
  • terminal.ansiBrightGreen#A1FFC1
  • terminal.ansiBrightMagenta#d8a8ff
  • terminal.ansiBrightRed#ff8080
  • terminal.ansiBrightWhite#bbbbbb
  • terminal.ansiBrightYellow#ffc799
  • terminal.ansiCyan#87f2ff
  • terminal.ansiGreen#A1FFC1
  • terminal.ansiMagenta#d8a8ff
  • terminal.ansiRed#ff8080
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#ffc799
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#75FB9F
  • textBlockQuote.background#2b2b2b
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b2b2b
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#cccccc
  • titleBar.border#2b2b2b
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8B8B8B94
variable, string constant.other.placeholder, entity.name.tag#FFFFFF
constant.other.color#FFFFFF
invalid, invalid.illegal#FF8080
keyword, storage.type, storage.modifier#A0A0A0
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#A0A0A0
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#9fecb7
entity.name.function, variable.function, support.function, keyword.other.special-method#9fecb7
meta.block variable.other#FFFFFF
support.other.variable, string.other.link#FFFFFF
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#9fecb7
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#fffeaa
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#9fecb7
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, source.postcss support.type.property-name, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css#FFFFFF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF8080
variable.language#A0A0A0
entity.name.method.js#FFFFFF
meta.class-method.js entity.name.function.js, variable.function.constructor#FFFFFF
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css#A0A0A0
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#9fecb7
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#9fecb7
source.sass keyword.control, meta.attribute-selector.scss#fffeaa
markup.inserted#75FB9F
markup.deleted#FF8080
markup.changed#A0A0A0
string.regexp#A0A0A0
constant.character.escape#A0A0A0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFFFFF
source.js constant.other.object.key.js string.unquoted.label.js#FF8080italic
source.json meta.structure.dictionary.json support.type.property-name.json#9fecb7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9fecb7
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#9fecb7
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#9fecb7
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#9fecb7
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#9fecb7
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#9fecb7
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#9fecb7
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#9fecb7
text.html.markdown, punctuation.definition.list_item.markdown#FFFFFF
text.html.markdown markup.inline.raw.markdown#A0A0A0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#FFFFFF
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#9fecb7
markup.italic#FFFFFFitalic
markup.bold, markup.bold string#FFFFFFbold
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#FFFFFFbold
markup.underline#9fecb7underline
markup.quote punctuation.definition.blockquote.markdown#FFFFFF
string.other.link.title.markdown#FFFFFF
string.other.link.description.title.markdown#A0A0A0
constant.other.reference.link.markdown#9fecb7
markup.raw.block#A0A0A0
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#FFFFFF
variable.language.fenced.markdown#FFFFFF
meta.separator#65737Ebold
markup.table#FFFFFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6