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#05070B
  • activityBar.foreground#A7B4C4
  • activityBarBadge.background#A5DFF9
  • activityBarBadge.foreground#02040A
  • badge.background#A5DFF9
  • badge.foreground#02040A
  • button.background#A5DFF9
  • button.foreground#02040A
  • button.hoverBackground#C0E7FF
  • diffEditor.insertedLineBackground#8FD8C015
  • diffEditor.insertedTextBackground#8FD8C015
  • diffEditor.removedLineBackground#E38A9E15
  • diffEditor.removedTextBackground#E38A9E15
  • editor.background#05070B
  • editor.foreground#F5FAFF
  • editor.selectionBackground#CDEBFF26
  • editor.selectionHighlightBackground#CDEBFF1F
  • editorBracketHighlight.foreground1#A7B4C4
  • editorBracketHighlight.foreground2#A7B4C4
  • editorBracketHighlight.foreground3#A7B4C4
  • editorBracketHighlight.foreground4#A7B4C4
  • editorBracketHighlight.foreground5#A7B4C4
  • editorBracketHighlight.foreground6#A7B4C4
  • editorBracketHighlight.unexpectedBracket.foreground#E89BAC
  • editorError.foreground#E89BAC
  • editorGroupHeader.tabsBackground#05070B
  • editorGutter.addedBackground#8FD8C0
  • editorGutter.deletedBackground#E38A9E
  • editorGutter.modifiedBackground#A5DFF9
  • editorHoverWidget.background#08111B
  • editorHoverWidget.border#182334
  • editorInlayHint.background#0A1017
  • editorInlayHint.foreground#A7B4C4
  • editorLineNumber.foreground#525C69
  • editorOverviewRuler.border#05070B
  • editorWarning.foreground#F2D6A4
  • editorWidget.background#05070B
  • focusBorder#A5DFF9
  • icon.foreground#A7B4C4
  • input.background#0B111A
  • list.activeSelectionBackground#101724
  • list.activeSelectionForeground#CDEBFF
  • list.errorForeground#E89BAC
  • list.highlightForeground#A5DFF9
  • list.hoverBackground#121B29
  • list.inactiveSelectionBackground#101724
  • scrollbarSlider.background#35415280
  • scrollbarSlider.hoverBackground#354152
  • selection.background#65748A
  • settings.modifiedItemIndicator#A5DFF9
  • sideBar.background#05070B
  • sideBarSectionHeader.background#05070B
  • sideBarSectionHeader.foreground#A7B4C4
  • sideBarTitle.foreground#A7B4C4
  • statusBar.background#05070B
  • statusBar.debuggingBackground#A5DFF9
  • statusBar.debuggingForeground#05070B
  • statusBar.foreground#A7B4C4
  • statusBarItem.remoteBackground#A5DFF9
  • statusBarItem.remoteForeground#02040A
  • tab.activeBackground#08101A
  • tab.activeBorder#A5DFF9
  • tab.border#05070B
  • tab.inactiveBackground#05070B
  • terminal.ansiBlack#11151C
  • terminal.ansiBlue#8FA7C7
  • terminal.ansiBrightBlack#3B4652
  • terminal.ansiBrightBlue#B9CBE4
  • terminal.ansiBrightCyan#CDEBFF
  • terminal.ansiBrightGreen#AEE6C7
  • terminal.ansiBrightMagenta#D2C5F0
  • terminal.ansiBrightRed#F2A3B5
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E5F5D8
  • terminal.ansiCyan#A5DFF9
  • terminal.ansiGreen#7CB4A0
  • terminal.ansiMagenta#B6ABD8
  • terminal.ansiRed#E38A9E
  • terminal.ansiWhite#F5FAFF
  • terminal.ansiYellow#CFE7C0
  • terminal.background#05070B
  • terminal.foreground#F5FAFF
  • terminal.selectionBackground#12304780
  • terminalCursor.background#05070B
  • terminalCursor.foreground#CDEBFF
  • textLink.activeForeground#CDEBFF
  • textLink.foreground#A5DFF9
  • titleBar.activeBackground#05070B
  • titleBar.activeForeground#8F9AA8
  • titleBar.inactiveBackground#05070B
  • titleBar.inactiveForeground#727C8A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7F8A9694
variable, string constant.other.placeholder, entity.name.tag#F5FAFF
constant.other.color#F5FAFF
invalid, invalid.illegal#E89BAC
keyword, storage.type, storage.modifier#B0C2D8
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#B0C2D8
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#7CB4A0
entity.name.function, variable.function, support.function, keyword.other.special-method#A5DFF9
meta.block variable.other#F5FAFF
support.other.variable, string.other.link#F5FAFF
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#B3F0DC
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#CDEBFF
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#7CB4A0
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, 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#F5FAFF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#5D8E7C
variable.language#B0C2D8
entity.name.method.js#F5FAFF
meta.class-method.js entity.name.function.js, variable.function.constructor#F5FAFF
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#B0C2D8
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#7CB4A0
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#7CB4A0
source.sass keyword.control, meta.attribute-selector.scss#B3F0DC
markup.inserted#CDEBFF
markup.deleted#E38A9E
markup.changed#B0C2D8
string.regexp#B0C2D8
constant.character.escape#B0C2D8
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#F5FAFF
source.js constant.other.object.key.js string.unquoted.label.js#5D8E7Citalic
source.json meta.structure.dictionary.json support.type.property-name.json#E3F3FF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E3F3FF
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#E3F3FF
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#E3F3FF
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#E3F3FF
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#E3F3FF
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#E3F3FF
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#E3F3FF
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#E3F3FF
text.html.markdown, punctuation.definition.list_item.markdown#F5FAFF
text.html.markdown markup.inline.raw.markdown#A7B4C4
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#F5FAFF
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#A5DFF9
markup.italic#F5FAFFitalic
markup.bold, markup.bold string#F5FAFFbold
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#F5FAFFbold
markup.underline#A5DFF9underline
markup.quote punctuation.definition.blockquote.markdown#F5FAFF
markup.quote
string.other.link.title.markdown#F5FAFF
string.other.link.description.title.markdown#A7B4C4
constant.other.reference.link.markdown#A5DFF9
markup.raw.block#A7B4C4
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F5FAFF
variable.language.fenced.markdown#F5FAFF
meta.separator#7E8A94bold
markup.table#F5FAFF