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#001226
  • activityBar.foreground#00d4ff
  • activityBar.inactiveForeground#3a6a96
  • activityBarBadge.background#00d4ff
  • activityBarBadge.foreground#001226
  • badge.background#00d4ff
  • badge.foreground#001226
  • button.background#00d4ff
  • button.foreground#001226
  • button.hoverBackground#5ce0f7
  • contrastBorder#00396b
  • editor.background#001a3a
  • editor.foreground#a8e8ff
  • editor.lineHighlightBackground#002148
  • editor.selectionBackground#00d4ff33
  • editorBracketHighlight.foreground1#00d4ff
  • editorBracketHighlight.foreground2#5ce0f7
  • editorBracketHighlight.foreground3#7df0c8
  • editorBracketHighlight.foreground4#a8e8ff
  • editorCursor.background#001a3a
  • editorCursor.foreground#5ce0f7
  • editorGroup.border#00396b
  • editorGroupHeader.tabsBackground#001226
  • editorGroupHeader.tabsBorder#00396b
  • editorIndentGuide.activeBackground1#00d4ff44
  • editorIndentGuide.background1#0a3057
  • editorLineNumber.activeForeground#00d4ff
  • editorLineNumber.foreground#264e7a
  • editorLink.activeForeground#7df0c8
  • editorRuler.foreground#0a3057
  • editorWidget.background#002145
  • editorWidget.border#00d4ff44
  • focusBorder#00d4ff66
  • input.background#002145
  • input.border#00d4ff66
  • input.foreground#a8e8ff
  • inputOption.activeBorder#00d4ff
  • list.activeSelectionBackground#003a6e
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#002a55
  • list.inactiveSelectionBackground#002347
  • menu.background#002145
  • menu.foreground#a8e8ff
  • menu.selectionBackground#00d4ff
  • menu.selectionForeground#001226
  • menu.separatorBackground#00396b
  • panel.background#001226
  • panel.border#00d4ff44
  • panelTitle.activeBorder#00d4ff
  • panelTitle.activeForeground#00d4ff
  • pickerGroup.border#00396b
  • pickerGroup.foreground#00d4ff
  • progressBar.background#00d4ff
  • quickInput.background#002145
  • quickInput.foreground#a8e8ff
  • quickInputList.focusBackground#00d4ff
  • quickInputList.focusForeground#001226
  • scrollbarSlider.background#00d4ff33
  • scrollbarSlider.hoverBackground#00d4ff88
  • sideBar.background#001833
  • sideBar.border#00396b
  • sideBar.foreground#a8e8ff
  • sideBarSectionHeader.background#002145
  • sideBarSectionHeader.foreground#5ce0f7
  • sideBarTitle.foreground#00d4ff
  • statusBar.background#001226
  • statusBar.border#00396b
  • statusBar.foreground#00d4ff
  • tab.activeBackground#001a3a
  • tab.activeBorder#00d4ff
  • tab.activeBorderTop#00d4ff
  • tab.activeForeground#ffffff
  • tab.border#00396b
  • tab.hoverBackground#002a55
  • tab.inactiveBackground#001226
  • tab.inactiveForeground#5a8bb5
  • tab.unfocusedActiveBorder#00d4ff88
  • tab.unfocusedActiveBorderTop#00d4ff88
  • terminal.ansiBlue#3aa8ff
  • terminal.ansiBrightBlue#7dc5ff
  • terminal.ansiBrightCyan#5ce0f7
  • terminal.ansiBrightGreen#aef5dc
  • terminal.ansiBrightMagenta#c5d0ff
  • terminal.ansiBrightRed#ff9bbc
  • terminal.ansiBrightYellow#d4f3ff
  • terminal.ansiCyan#00d4ff
  • terminal.ansiGreen#7df0c8
  • terminal.ansiMagenta#a8b8ff
  • terminal.ansiRed#ff6b9d
  • terminal.ansiYellow#a8e8ff
  • terminal.background#000d1c
  • terminal.foreground#a8e8ff
  • textLink.activeForeground#5ce0f7
  • textLink.foreground#00d4ff
  • titleBar.activeBackground#001226
  • titleBar.activeForeground#00d4ff
  • titleBar.inactiveBackground#001a3a
  • titleBar.inactiveForeground#5a8bb5
  • widget.shadow#00000099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3a6a96italic
variable, string constant.other.placeholder#a8e8ff
constant.other.color#ffffff
invalid, invalid.illegal#ff6b9d
keyword, storage.type, storage.modifier#00d4ff
keyword.control, constant.other.color, punctuation, meta.tag, 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#5ce0f7
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#3aa8ff
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7dc5ff
meta.block variable.other#3aa8ff
support.other.variable, string.other.link#3aa8ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#aef5dc
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#7df0c8
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#a8e8ff
support.type#5ce0f7
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#5ce0f7
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff6b9d
variable.language#a8b8ffitalic
entity.name.method.js#7dc5ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#7dc5ff
entity.other.attribute-name#00d4ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#a8e8ffitalic
entity.other.attribute-name.class#a8e8ff
source.sass keyword.control#7dc5ff
markup.inserted#7df0c8
markup.deleted#ff6b9d
markup.changed#00d4ff
string.regexp#5ce0f7
constant.character.escape#5ce0f7
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7dc5ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff6b9ditalic
source.json meta.structure.dictionary.json support.type.property-name.json#00d4ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5ce0f7
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#7dc5ff
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#3aa8ff
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#a8b8ff
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#a8e8ff
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#7df0c8
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#00d4ff
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#5ce0f7
text.html.markdown, punctuation.definition.list_item.markdown#a8e8ff
text.html.markdown markup.inline.raw.markdown#00d4ff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#3a6a96
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#7df0c8
markup.italic#3aa8ffitalic
markup.bold, markup.bold string#3aa8ffbold
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#3aa8ffbold
markup.underline#aef5dcunderline
markup.quote punctuation.definition.blockquote.markdown#3a6a96
markup.quoteitalic
string.other.link.title.markdown#00d4ff
string.other.link.description.title.markdown#5ce0f7
constant.other.reference.link.markdown#a8e8ff
markup.raw.block#00d4ff
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#a8e8ff
variable.language.fenced.markdown#3a6a96
meta.separator#3a6a96bold
markup.table#a8e8ff