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#000000
  • activityBar.border#00000060
  • activityBar.foreground#8893FF
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#2C8EFF
  • breadcrumb.activeSelectionForeground#2C8EFF
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#5132cd
  • breadcrumb.foreground#8893FF
  • breadcrumbPicker.background#000000
  • button.background#2C8EFF50
  • contrastBorder#2C8EFF40
  • debugToolBar.background#000000
  • diffEditor.insertedTextBackground#7FBAFF15
  • diffEditor.removedTextBackground#43F5F520
  • dropdown.background#000000
  • dropdown.border#E0FFFD10
  • editor.background#000000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#2C8EFF
  • editor.findMatchHighlightBackground#2C8EFF93
  • editor.findMatchHighlightBorder#E0FFFD30
  • editor.foreground#a9f9f6b0
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#74FFCD30
  • editor.selectionHighlightBackground#2C8EFF6b
  • editor.selectionHighlightBorder#74ffccab
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#62D3FF7f
  • editorCursor.foreground#62D3FF
  • editorError.foreground#43F5F570
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#7FBAFF60
  • editorGutter.deletedBackground#43F5F560
  • editorGutter.modifiedBackground#74FFCD60
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#E0FFFD10
  • editorIndentGuide.activeBackground#000000
  • editorIndentGuide.background#00000070
  • editorLineNumber.activeForeground#74ffccc4
  • editorLineNumber.foreground#2C8EFFc0
  • editorSuggestWidget.background#000000
  • extensionButton.prominentBackground#7FBAFF90
  • extensionButton.prominentHoverBackground#43F5F5
  • list.highlightForeground#2C8EFF
  • panelTitle.inactiveForeground#A9F9F6
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#2C8EFFcc
  • scrollbarSlider.background#ded3d3bb
  • scrollbarSlider.hoverBackground#2C8EFFee
  • sideBar.background#000000
  • sideBar.foreground#74ffccac
  • statusBar.background#000000
  • statusBar.border#00000060
  • statusBar.foreground#ffffff
  • tab.activeBackground#2C8EFF50
  • tab.activeBorder#2C8EFF
  • tab.border#00ffeecb
  • tab.inactiveBackground#2C8EFF20
  • tab.inactiveForeground#A9F9F6af
  • terminalCursor.foreground#62D3FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword#62d2ffe3
storage.type, storage.modifier#aa7099b0
variable, string constant.other.placeholder, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssbold
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#7FBAFF
constant.other.php#62D3FF
constant.other.color#E0FFFD
invalid, invalid.illegal#43F5F5
Storageitalic
constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#25d2c1c7
punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.type.module#8893FF
keyword.control.at-rule, punctuation.terminator.rule, keyword.control.operator, punctuation.definition.entity, keyword.operator.assignment, punctuation.separator.comma, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.binding-pattern.object#A9F9F6
punctuation.definition#A7A8AF
keyword.control#4ddfc2b5bold
comment.line.double-slash, punctuation.definition.comment, comment.line, comment.block.#826969
text.html.derivative#a5a5b1
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#8472d1
string#9f6f3ebold
entity.name.tag#c54e91c2bold
meta#1e81a3
variable.parameter, variable.parameter.keyframe-list#62D3FF
variable.other.object, storage.type, string.other.link.title.markdown#8893FF
variable.other.constant, variable.other.object.property, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.type, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method entity.name.function, variable.function.constructor, entity.name.tag.otherl, entity.name.tag.block.any, keyword.control.import#b682c8d6
entity.name.function.macro, storage.type.function#d89effc3
punctuation.definition.string.begin, punctuation.definition.string.end#e4ffb69d
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value#9f60ccf8
variable.parameter.function.language.special, variable.parameter#43F5F5
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key, string.unquoted.label#7FBAFF
support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name#62d2ffbc
support.type#B2CCD6
support.type.property-name.json, source#1da9e0b4
entity.name.module, variable.import.parameter, variable.other.class#43F5F5
entity.name.method, tag.decorator entity.name.tag, tag.decorator punctuation.definition.tag#74FFCDitalic
entity.other.attribute-name, support.function#62D3FF
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional, support.constant, entity.other.attribute-name, meta.object-literal.key#4afff9ad
markup.inserted#7FBAFF
markup.deleted#43F5F5
markup.changed#62D3FF
string.regexp#E4FFB6
constant.character.escape#E4FFB6
*url*, *link*, *uri*underline
text.html.markdown markup.inline.raw.markdown#62D3FF
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#2C8EFF50
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#8893FFbold
markup.underline#74FFCDunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#2C8EFF50
markup.quoteitalic
string.other.link.description.title.markdown#62D3FF
constant.other.reference.link.markdown#62D3FF
markup.raw.block#62D3FF
punctuation.definition.raw.markdown, punctuation.definition.markdown#E4FFB6
variable.language.fenced.markdown#2C8EFF
meta.separator#A7A8AFbold
token.info-token#2C8EFF
token.warn-token#62D3FF
token.error-token#FF293B
token.debug-token#E4FFB6
NillsColor by Nillem Caldin - VS Code Theme