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#0F171C
  • activityBar.dropBackground#BA55D844
  • activityBar.foreground#90989F
  • activityBarBadge.background#2E363C
  • activityBarBadge.foreground#E1BD09
  • badge.background#2E363C
  • badge.foreground#E1BD09
  • button.background#2E363C
  • button.foreground#90989F
  • button.hoverBackground#2E363C
  • dropdown.background#1E252A
  • dropdown.border#2E363C
  • dropdown.foreground#90989F
  • dropdown.listBackground#0F171C
  • editor.background#1E252A
  • editor.foreground#C4CDD5
  • editor.hoverHighlightBackground#0F171C
  • editor.lineHighlightBackground#0f171c
  • editor.selectionBackground#0F171C
  • editor.selectionForeground#F7FFFF
  • editor.selectionHighlightBackground#2E363C44
  • editor.wordHighlightBackground#8BA66A44
  • editor.wordHighlightStrongBackground#BA55D844
  • editorGroup.border#00000000
  • editorGroup.dropBackground#7B92C944
  • editorGroup.emptyBackground#1E252A
  • editorGroupHeader.noTabsBackground#1E252A
  • editorGroupHeader.tabsBackground#1E252A
  • editorGutter.addedBackground#8BA66A
  • editorGutter.commentRangeForeground#454D53
  • editorGutter.deletedBackground#E32636
  • editorGutter.modifiedBackground#7B92C9
  • editorIndentGuide.activeBackground#2E363C
  • editorIndentGuide.background#0F171C
  • editorLineNumber.activeForeground#90989F
  • editorLineNumber.foreground#454D53
  • editorOverviewRuler.addedForeground#8BA66A
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#E32636
  • editorOverviewRuler.errorForeground#FF5B35
  • editorOverviewRuler.infoForeground#BA55D8
  • editorOverviewRuler.modifiedForeground#7B92C9
  • editorOverviewRuler.warningForeground#E1BD09
  • editorWidget.background#0F171C
  • editorWidget.border#2E363C
  • errorForeground#FF5B35
  • extensionBadge.remoteBackground#2e363c
  • extensionBadge.remoteForeground#E1BD09
  • extensionButton.prominentBackground#2E363C
  • extensionButton.prominentForeground#E1BD09
  • extensionButton.prominentHoverBackground#454D53
  • focusBorder#2E363C
  • foreground#90989F
  • gitDecoration.addedResourceForeground#7B92C9
  • gitDecoration.conflictingResourceForeground#E1BD09
  • gitDecoration.deletedResourceForeground#E32636
  • gitDecoration.ignoredResourceForeground#454D53
  • gitDecoration.modifiedResourceForeground#8BA66A
  • gitDecoration.submoduleResourceForeground#454D53
  • gitDecoration.untrackedResourceForeground#DF3D8B
  • input.background#0F171C
  • input.border#2E363C
  • input.foreground#90989F
  • input.placeholderForeground#454D53
  • inputOption.activeBorder#BA55D8
  • inputValidation.errorBorder#E32636
  • inputValidation.infoBorder#7B92C9
  • inputValidation.warningBackground#E1BD09
  • list.activeSelectionBackground#FF5B3544
  • list.activeSelectionForeground#C4CDD5
  • list.dropBackground#BA55D844
  • list.hoverBackground#BA55D844
  • list.inactiveSelectionBackground#FF5B3544
  • list.inactiveSelectionForeground#C4CDD5
  • panel.background#0F171C
  • panel.border#00000000
  • panel.dropBackground#BA55D844
  • panelTitle.activeBorder#BA55D8
  • panelTitle.activeForeground#90989F
  • panelTitle.inactiveForeground#454D53
  • scrollbarSlider.activeBackground#C4CDD522
  • scrollbarSlider.background#90989f22
  • selection.background#2E363C
  • sideBar.background#0F171C
  • sideBar.dropBackground#BA55D844
  • sideBar.foreground#90989F
  • sideBarSectionHeader.background#0F171C
  • sideBarTitle.foreground#90989F
  • statusBar.background#0F171C
  • statusBar.debuggingBackground#FF5B35
  • statusBar.foreground#90989F
  • statusBar.noFolderBackground#0F171C
  • statusBarItem.prominentBackground#C4CDD5
  • tab.activeBackground#1E252A
  • tab.activeBorder#BA55D8
  • tab.activeForeground#C4CDD5
  • tab.inactiveBackground#1E252A
  • tab.inactiveForeground#90989F
  • tab.unfocusedActiveBorder#BA55D8
  • terminal.ansiBlack#0F171C
  • terminal.ansiBlue#7B92C9
  • terminal.ansiBrightBlack#454D53
  • terminal.ansiBrightWhite#C4CDD5
  • terminal.ansiCyan#649AA2
  • terminal.ansiGreen#8BA66A
  • terminal.ansiMagenta#DF3D8B
  • terminal.ansiRed#E32636
  • terminal.ansiWhite#90989F
  • terminal.ansiYellow#E1BD09
  • terminal.foreground#90989F
  • titleBar.activeBackground#1E252A
  • titleBar.inactiveBackground#1E252A
  • widget.shadow#0000003D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#C4CDD5
comment, punctuation.definition.comment#454D53italic
variable, string constant.other.placeholder#C4CDD5
constant.other.color#C4CDD5
invalid, invalid.illegal#454D53
keyword, storage.type#7B92C9bold
storage.modifier#7b92c9
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#90989F
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF5B35
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7B92C9
meta.block variable.other#90989F
support.other.variable, string.other.link#90989F
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#649AA2
string#C4CDD5
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#FF5B35
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8BA66A
support.type#649AA2
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#649AA2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#7B92C9
variable.language#E1BD09italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#7B92C9
entity.other.attribute-name#7B92C9
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control#7B92C9
markup.inserted#E32636
markup.deleted#454D53
markup.changed#7B92C9
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#7B92C9
text.html.markdown, punctuation.definition.list_item.markdown#90989F
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#E1BD09
markup.italic#C4CDD5italic
markup.bold, markup.bold string#C4CDD5bold
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#C4CDD5italic bold
markup.underline#C4CDD5underline
markup.strike#454D53strike
markup.quote punctuation.definition.blockquote.markdown#C4CDD5
markup.quote#C4CDD5italic
string.other.link.title.markdown#E1BD09
string.other.link.description.title.markdown#7B92C9
constant.other.reference.link.markdown#E1BD09
markup.underline.link#7B92C9
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#7B92C9
variable.language.fenced.markdown#8BA66A
meta.separator#BA55D8bold
markup.table#90989F
token.info-token#7B92C9
token.warn-token#E1BD09
token.error-token#E32636
token.debug-token#DF3D8B
mihari by rynco - VS Code Theme