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#020617
  • activityBar.foreground#90A1B9
  • activityBarBadge.background#ffbe85
  • activityBarBadge.foreground#000
  • badge.background#ffbe85
  • badge.foreground#000
  • button.background#ffbe85
  • button.foreground#000
  • button.hoverBackground#ffd9b3
  • diffEditor.insertedLineBackground#f585ed15
  • diffEditor.insertedTextBackground#f585ed15
  • diffEditor.removedLineBackground#ff858515
  • diffEditor.removedTextBackground#ff858515
  • editor.background#020617
  • editor.foreground#F8FAFC
  • editor.selectionBackground#90A1B925
  • editor.selectionHighlightBackground#90A1B925
  • editorBracketHighlight.foreground1#90A1B9
  • editorBracketHighlight.foreground2#90A1B9
  • editorBracketHighlight.foreground3#90A1B9
  • editorBracketHighlight.foreground4#90A1B9
  • editorBracketHighlight.foreground5#90A1B9
  • editorBracketHighlight.foreground6#90A1B9
  • editorBracketHighlight.unexpectedBracket.foreground#ff8585
  • editorError.foreground#ff8585
  • editorGroupHeader.tabsBackground#020617
  • editorGutter.addedBackground#f585ed
  • editorGutter.deletedBackground#ff8585
  • editorGutter.modifiedBackground#ffbe85
  • editorHoverWidget.background#1C293D
  • editorHoverWidget.border#45556C
  • editorInlayHint.background#1C293D
  • editorInlayHint.foreground#90A1B9
  • editorLineNumber.foreground#62748D
  • editorOverviewRuler.border#020617
  • editorWarning.foreground#ffbe85
  • editorWidget.background#020617
  • focusBorder#ffbe85
  • icon.foreground#90A1B9
  • input.background#314158
  • list.activeSelectionBackground#314158
  • list.activeSelectionForeground#ffbe85
  • list.errorForeground#ff8585
  • list.highlightForeground#ffbe85
  • list.hoverBackground#45556C
  • list.inactiveSelectionBackground#1C293D
  • menu.background#020617
  • menu.border#314158
  • scrollbarSlider.background#45556C80
  • scrollbarSlider.hoverBackground#62748D
  • selection.background#62748D
  • settings.modifiedItemIndicator#ffbe85
  • sideBar.background#020617
  • sideBarSectionHeader.background#020617
  • sideBarSectionHeader.foreground#90A1B9
  • sideBarTitle.foreground#90A1B9
  • statusBar.background#020617
  • statusBar.debuggingBackground#ffbe85
  • statusBar.debuggingForeground#FFF
  • statusBar.foreground#90A1B9
  • statusBarItem.remoteBackground#ffbe85
  • statusBarItem.remoteForeground#000
  • tab.activeBackground#0E172B
  • tab.border#020617
  • tab.inactiveBackground#020617
  • terminal.ansiBlack#1C293D
  • terminal.ansiBlue#85adff
  • terminal.ansiBrightBlack#90A1B9
  • terminal.ansiBrightBlue#85adff
  • terminal.ansiBrightCyan#85ffff
  • terminal.ansiBrightGreen#85ffad
  • terminal.ansiBrightMagenta#f585ed
  • terminal.ansiBrightRed#ff8585
  • terminal.ansiBrightWhite#F8FAFC
  • terminal.ansiBrightYellow#ffd9b3
  • terminal.ansiCyan#85ffff
  • terminal.ansiGreen#85ffad
  • terminal.ansiMagenta#ad85ff
  • terminal.ansiRed#ff8585
  • terminal.ansiWhite#90A1B9
  • terminal.ansiYellow#ffbe85
  • terminal.background#020617
  • terminal.foreground#F8FAFC
  • textLink.activeForeground#ffd9b3
  • textLink.foreground#ffbe85
  • titleBar.activeBackground#020617
  • titleBar.activeForeground#90A1B9
  • titleBar.inactiveBackground#020617
  • titleBar.inactiveForeground#62748D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#62748D
variable, string constant.other.placeholder, entity.name.tag#ff8585
constant.other.color#ffbe85
invalid, invalid.illegal#ff8585
keyword, storage.type, storage.modifier#85adff
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#90A1B9
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ffbe85
entity.name.function, variable.function, support.function, keyword.other.special-method#ffbe85
meta.block variable.other#ff8585
support.other.variable, string.other.link#ff8585
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#85ffff
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#85ffad
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#ffbe85
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#ff8585
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ffbe85
variable.language#ffbe85
entity.name.method.js#ffbe85
meta.class-method.js entity.name.function.js, variable.function.constructor#ffbe85
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#ff8585
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff8585
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#ff8585
source.sass keyword.control, meta.attribute-selector.scss#ff8585
markup.inserted#85ffad
markup.deleted#ff8585
markup.changed#ffbe85
string.regexp#85ffad
constant.character.escape#85ffff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ffbe85
source.js constant.other.object.key.js string.unquoted.label.js#ff8585italic
source.json meta.structure.dictionary.json support.type.property-name.json#ff8585
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff8585
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#ff8585
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#ff8585
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#ff8585
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#ff8585
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#ff8585
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#ff8585
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#ff8585
text.html.markdown, punctuation.definition.list_item.markdown#90A1B9
text.html.markdown markup.inline.raw.markdown#85ffad
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#90A1B9
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#ffbe85
markup.italic#90A1B9italic
markup.bold, markup.bold string#90A1B9bold
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#90A1B9bold
markup.underline#ffbe85underline
markup.quote punctuation.definition.blockquote.markdown#90A1B9
markup.quote
string.other.link.title.markdown#85ffad
string.other.link.description.title.markdown#90A1B9
constant.other.reference.link.markdown#ffbe85
markup.raw.block#85ffad
markup.raw.block.fenced.markdown#85ffad
punctuation.definition.fenced.markdown#90A1B9
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#85ffad
variable.language.fenced.markdown#85ffad
meta.separator#90A1B9bold
markup.table#90A1B9