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#33325f
  • activityBar.foreground#fafbfc
  • activityBarBadge.background#54a3ff
  • debugConsole.errorForeground#630000
  • debugConsole.infoForeground#000057
  • debugConsole.sourceForeground#007500
  • debugConsole.warningForeground#664e00
  • editor.background#fefefd
  • editor.findMatchBackground#fdffbb2c
  • editor.findMatchHighlightBackground#fcffa2a8
  • editor.foreground#24292e
  • editor.lineHighlightBackground#f5f4f4
  • editor.selectionBackground#dadada
  • editor.selectionHighlightBackground#fbfdb8a8
  • editorBracketHighlight.foreground1#0011c9
  • editorBracketHighlight.foreground2#2140ac
  • editorBracketHighlight.foreground3#3763a0
  • editorBracketHighlight.foreground4#2c70a6
  • editorBracketHighlight.foreground5#2a87aa
  • editorBracketHighlight.foreground6#0599b1
  • editorBracketMatch.background#f1f8ff
  • editorBracketMatch.border#c8e1ff
  • editorGroupHeader.tabsBackground#fafbfc
  • editorGroupHeader.tabsBorder#e1e4e8
  • editorIndentGuide.background#eeeeee
  • editorLineNumber.foreground#444444
  • focusBorder#fafbfc
  • gitDecoration.deletedResourceForeground#720101
  • gitDecoration.modifiedResourceForeground#61503c
  • inputOption.activeBorder#e36209
  • list.activeSelectionBackground#9db1ce
  • list.activeSelectionForeground#ffffff
  • list.inactiveSelectionBackground#dbe5f3
  • list.inactiveSelectionForeground#30343a
  • panel.background#f3f5f6
  • panel.border#dbdee4
  • panelTitle.activeForeground#4d5974
  • panelTitle.inactiveForeground#979dac
  • scrollbar.shadow#00000000
  • sideBar.background#fafbfc
  • sideBar.border#e1e4e8
  • sideBar.foreground#16181b
  • sideBarSectionHeader.background#b2bdce
  • sideBarSectionHeader.foreground#24292e
  • sideBarTitle.foreground#24292e
  • statusBar.background#3c4c80
  • statusBar.border#2c2c2c
  • statusBar.debuggingBackground#753462
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#fafbfc
  • statusBar.noFolderForeground#24292e
  • tab.activeBackground#ffffff
  • tab.activeBorder#2451e6
  • tab.activeForeground#202041
  • tab.border#e1e4e8
  • tab.inactiveBackground#fafbfc
  • tab.inactiveForeground#656581
  • terminal.background#1f1f3b
  • terminal.foreground#f8f8f8
  • titleBar.activeBackground#3c4c80
  • titleBar.activeForeground#ffffff
  • titleBar.border#2c2c2c
  • titleBar.inactiveBackground#33325f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#24292E—
emphasis—italic
strong, markup.heading.markdown, markup.bold.markdown—bold
markup.italic.markdown—italic
meta.link.inline.markdown#005CC5underline
comment, markup.fenced_code, markup.inline#6A737D—
string#032F62—
constant.numeric, constant.language, variable.language.this, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support#005CC5—
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression#D73A49—
variable.parameter.function#E27F2D—
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#6F42C1—
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, keyword.other.template#22863A—
token.info-token#316BCD—
token.warn-token#CD9731—
token.error-token, invalid#CD3131—
token.debug-token#800080—
markup.inserted#22863A—
markup.deleted#D73A49—
markup.changed#005CC5—
meta.diff.header#6A737D—
comment#7E7E7E—
string#2F8802—
entity.name.type.class, entity.other.inherited-class, variable.other.property#078F88—
entity.name.function#687401—
constant.numeric, constant.language#005CC5—
entity.name.tag#012CBB—
keyword.other, variable.other.constant#003B88—
meta.tag.attributes, entity.other.attribute-name#871F78—
keyword.operator#000000—
constant.other.php, variable.other, keyword.operator.new, keyword.control.flow#012CBB—
keyword.control, storage.type, storage.modifier, punctuation.separator.key-value, variable.language.this.js, variable.other.global.safer.php#003B88—
variable.other.readwrite.alias.js, punctuation.separator.key-value.mapping.yaml, support.type.property-name.css#002435—
variable.other.object.js, variable.other.php#014455—
variable.other.readwrite.js, variable.other.class.js, meta.object-literal.key.js, string.unquoted.js, support.type.property-name.json.comments, support.type.property-name.json, entity.name.type.instance, entity.name.tag.css, entity.name.tag.reference, entity.name.type.module, punctuation.definition.template-expression, punctuation.definition.entity#005F5F—
entity.name.class.js, support.class.builtin.js, constant.other.object.key.js, variable.other.object.property.js, entity.name.type.js, entity.other.attribute-name.class#078F88—
meta.function.arrow.js#687401—
keyword.other.important.css, keyword.other.important.scss, support.constant.property-value#871F78—
ref.matchtext#000000—
VSCode Nova Themes by Ivn Nv - VS Code Theme