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#1f1e21
  • activityBar.foreground#d9d7ca
  • activityBarBadge.background#657494
  • activityBarBadge.foreground#d9d7ca
  • badge.background#1f1e21
  • button.background#1f1e21
  • button.secondaryBackground#2a2a3d
  • button.secondaryForeground#d9d7ca
  • checkbox.border#2a2a3d
  • debugToolBar.background#202022
  • descriptionForeground#d9d7ca
  • diffEditor.insertedTextBackground#2e3e31
  • dropdown.background#202022
  • dropdown.border#202022
  • editor.background#252528
  • editor.findMatchBackground#2d3567
  • editor.findMatchBorder#ffb85b
  • editor.findMatchHighlightBackground#2d3567
  • editor.foreground#d9d7ca
  • editor.lineHighlightBackground#1073cf2d
  • editor.lineHighlightBorder#9fced11f
  • editor.selectionBackground#2a2a3d
  • editor.selectionHighlightBackground#1f1f21
  • editor.selectionHighlightBorder#42426d
  • editor.wordHighlightBackground#1f1f214d
  • editor.wordHighlightBorder#42426d
  • editor.wordHighlightStrongBackground#1f1f214d
  • editor.wordHighlightStrongBorder#42426d
  • editorBracketHighlight.foreground1#ae90de
  • editorBracketHighlight.foreground2#ff9e7a
  • editorBracketHighlight.foreground3#84a9f4
  • editorBracketHighlight.foreground4#d27e99
  • editorBracketHighlight.foreground5#ffd78e
  • editorBracketHighlight.foreground6#94dcb0
  • editorBracketHighlight.unexpectedBracket.foreground#ff4a65
  • editorBracketMatch.background#202022
  • editorBracketMatch.border#42426d
  • editorBracketPairGuide.activeBackground1#ae90de
  • editorBracketPairGuide.activeBackground2#ff9e7a
  • editorBracketPairGuide.activeBackground3#84a9f4
  • editorBracketPairGuide.activeBackground4#d27e99
  • editorBracketPairGuide.activeBackground5#ffd78e
  • editorBracketPairGuide.activeBackground6#94dcb0
  • editorCursor.background#d9d7ca
  • editorCursor.foreground#d9d7ca
  • editorError.foreground#f33939
  • editorGroup.border#202022
  • editorGroupHeader.tabsBackground#202022
  • editorGutter.addedBackground#3b834b
  • editorGutter.deletedBackground#b3393b
  • editorGutter.modifiedBackground#efa64c
  • editorHoverWidget.background#252528
  • editorHoverWidget.border#1f1e21
  • editorHoverWidget.highlightForeground#657494
  • editorIndentGuide.activeBackground1#1f1f21
  • editorIndentGuide.background1#1f1e21
  • editorInlayHint.background#252528
  • editorInlayHint.foreground#cdb184
  • editorLineNumber.activeForeground#ae90de
  • editorLineNumber.foreground#42426d
  • editorMarkerNavigation.background#1f1f21
  • editorRuler.foreground#1f1f21
  • editorSuggestWidget.background#2a2a3d
  • editorSuggestWidget.border#2a2a3d
  • editorSuggestWidget.selectedBackground#2d3567
  • editorWarning.foreground#ffb85b
  • editorWhitespace.foreground#252528
  • editorWidget.background#252528
  • focusBorder#2a2a3d
  • gitDecoration.ignoredResourceForeground#cdb184
  • input.background#202022
  • interactive.activeCodeBorder#ff0000
  • list.activeSelectionBackground#1f1f21
  • list.activeSelectionForeground#d9d7ca
  • list.focusBackground#1f1e21
  • list.focusForeground#d9d7ca
  • list.highlightForeground#84a9f4
  • list.hoverBackground#1f1f21
  • list.hoverForeground#d9d7ca
  • list.inactiveSelectionBackground#1f1e21
  • list.inactiveSelectionForeground#d9d7ca
  • list.warningForeground#ffb85b
  • menu.foreground#d9d7ca
  • menu.separatorBackground#202022
  • minimapGutter.addedBackground#3b834b
  • minimapGutter.deletedBackground#b3393b
  • minimapGutter.modifiedBackground#efa64c
  • panel.border#202022
  • panelSectionHeader.background#252528
  • peekView.border#42426d
  • peekViewEditor.background#1f1e21
  • peekViewEditor.matchHighlightBackground#2d3567
  • peekViewResult.background#1f1f21
  • scrollbar.shadow#1f1f21
  • scrollbarSlider.activeBackground#cdb18480
  • scrollbarSlider.background#42426d66
  • scrollbarSlider.hoverBackground#42426d80
  • settings.focusedRowBackground#1f1f21
  • settings.headerForeground#d9d7ca
  • sideBar.background#252528
  • sideBar.border#202022
  • sideBar.foreground#d9d7ca
  • sideBarSectionHeader.background#1f1f21
  • sideBarSectionHeader.foreground#d9d7ca
  • statusBar.background#202022
  • statusBar.debuggingBackground#f33939
  • statusBar.debuggingBorder#ae90de
  • statusBar.debuggingForeground#d9d7ca
  • statusBar.foreground#f3d88c
  • statusBar.noFolderBackground#252528
  • statusBarItem.hoverBackground#1f1f21
  • statusBarItem.remoteBackground#2d3567
  • statusBarItem.remoteForeground#d9d7ca
  • tab.activeBackground#1f1f21
  • tab.activeForeground#d9d7ca
  • tab.border#202022
  • tab.hoverBackground#42426d
  • tab.inactiveBackground#252528
  • tab.unfocusedHoverBackground#1f1e21
  • terminal.ansiBlack#252528
  • terminal.ansiBlue#657494
  • terminal.ansiBrightBlack#1f1e21
  • terminal.ansiBrightBlue#5ba7c8
  • terminal.ansiBrightCyan#98e6e1
  • terminal.ansiBrightGreen#badbb5
  • terminal.ansiBrightMagenta#d27e99
  • terminal.ansiBrightRed#ff4a65
  • terminal.ansiBrightWhite#d9d7ca
  • terminal.ansiBrightYellow#ffd78e
  • terminal.ansiCyan#99a0e3
  • terminal.ansiGreen#3b834b
  • terminal.ansiMagenta#ae90de
  • terminal.ansiRed#f33939
  • terminal.ansiWhite#d9d7ca
  • terminal.ansiYellow#ffb85b
  • terminal.background#252528
  • terminal.border#202022
  • terminal.foreground#d9d7ca
  • terminal.selectionBackground#2a2a3d
  • textBlockQuote.background#252528
  • textBlockQuote.border#202022
  • textLink.foreground#429b82
  • textPreformat.foreground#ffb85b
  • titleBar.activeBackground#1f1f21
  • titleBar.activeForeground#d9d7ca
  • titleBar.inactiveBackground#252528
  • titleBar.inactiveForeground#d9d7ca
  • walkThrough.embeddedEditorBackground#252528

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#CDB184
variable, string constant.other.placeholder#D9D7CA
constant.other.color#FF9E7A
invalid, invalid.illegal#F33939
storage.type#AE90DE
storage.modifier#AE90DE
keyword.control.flow, keyword.control.conditional, keyword.control.loop#AE90DEbold
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution, keyword.other#AE90DE
keyword.other.definition.ini#FF9E7A
keyword.control.trycatch#FF4A65bold
keyword.other.unit, keyword.operator#EFBA4F
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, meta.brace, keyword.operator.type.annotation, keyword.operator.namespace#99A0E3
entity.name.tag, meta.tag.sgml#FFD78E
entity.name.tag.html#AE90DE
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#84A9F4
entity.name.function.macro#FF9E7A
meta.block variable.other#D9D7CA
support.other.variable#D9D7CA
string.other.link#FF9E7A
constant.numeric, constant.language, support.constant, constant.character, constant.escape#5BA7C8
constant.language.boolean#FF9E7A
constant.numeric#D27E99
string, punctuation.definition.string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, markup.inline.raw.string#BADBB5
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types#94DCB0
entity.name.type.module, entity.name.namespace#D9D7CA
entity.name.import.go#BADBB5
variable.other.property#FFD78E
keyword.control.import, keyword.import, meta.import#FF9E7A
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#94DCB0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF4A65
variable.language#FF4A65
entity.name.method.js#84A9F4
meta.class-method.js entity.name.function.js, variable.function.constructor#84A9F4
entity.other.attribute-name#AE90DE
entity.other.attribute-name.html, entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#FFD78E
entity.other.attribute-name.class#FFD78E
source.sass keyword.control#5BA7C8
markup.inserted#3B834B
markup.deleted#B3393B
markup.changed#EFA64C
string.regexp#5BA7C8
constant.character.escape#5BA7C8
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#AE90DE
source.js constant.other.object.key.js string.unquoted.label.js#FF4A65
source.json meta.structure.dictionary.json support.type.property-name.json#D27E99
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFD78E
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#FF9E7A
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#FF4A65
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#FF9E7A
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#84A9F4
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#D27E99
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#AE90DE
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#BADBB5
text.html.markdown, punctuation.definition.list_item.markdown#D9D7CA
text.html.markdown markup.inline.raw.markdown#AE90DE
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#AE90DE
markdown.heading, entity.name.section.markdown, markup.heading.markdown#84A9F4
markup.italic#E77582italic
markup.bold, markup.bold stringbold
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#E77582bold
markup.underline#5BA7C8underline
markup.quote punctuation.definition.blockquote.markdown#CDB184
markup.quoteitalic
string.other.link.title.markdown#FF9E7A
string.other.link.description.title.markdown#AE90DE
constant.other.reference.link.markdown#FFD78E
markup.raw.block#AE90DE
markup.raw.block.fenced.markdown#CDB184
punctuation.definition.fenced.markdown#CDB184
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#D9D7CA
variable.language.fenced.markdown#CDB184
meta.separator#99A0E3bold
markup.table#D9D7CA
token.info-token#81A1DA
token.warn-token#F5B745
token.error-token#DB3A3A
token.debug-token#BF78F1
comment#878C8A
punctuation.definition.comment#878C8A