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.activeBackground#3902ff
  • activityBar.activeBorder#3902ff
  • activityBarBadge.foreground#3902ff
  • badge.foreground#3902ff
  • breadcrumb.activeSelectionForeground#3902ff
  • breadcrumb.focusForeground#3902ff
  • breadcrumbPicker.background#c4c4c8
  • button.background#ffffff00
  • button.border#0000004f
  • button.separator#0000004f
  • contrastBorder#000000
  • diffEditor.insertedTextBackground#d96bdb4c
  • diffEditor.insertedTextBorder#d96bdbf3
  • diffEditor.removedTextBackground#73eded7c
  • diffEditor.removedTextBorder#73eded
  • editor.background#ffffff
  • editor.findMatchBackground#000000
  • editor.findMatchForeground#ffffff
  • editor.findMatchHighlightBackground#000000ce
  • editor.findMatchHighlightBorder#1504ff
  • editor.foreground#000000
  • editor.lineHighlightBorder#ff7fff
  • editor.selectionBackground#000000
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBorder#3902ff8c
  • editorGroup.dropBackground#0000004b
  • editorGroupHeader.tabsBackground#b2b5b569
  • editorLineNumber.activeForeground#3902ff
  • editorLink.activeForeground#3902ff
  • editorRuler.foreground#88330573
  • focusBorder#ffffff00
  • inputOption.activeBorder#883305
  • inputOption.activeForeground#883305
  • list.activeSelectionBackground#b2b5b5
  • list.dropBackground#0000004b
  • list.focusBackground#b2b5b5
  • list.highlightForeground#3902ff
  • list.hoverBackground#b2b5b569
  • list.inactiveSelectionBackground#b2b5b569
  • panelTitle.activeForeground#3902ff
  • peekView.border#88330573
  • peekViewEditor.background#b2b5b569
  • peekViewResult.background#b2b5b569
  • peekViewResult.selectionBackground#c4c4c8
  • peekViewTitle.background#88330573
  • quickInput.background#ffffff
  • quickInputList.focusBackground#000000
  • quickInputList.focusForeground#ffffff
  • quickInputList.focusHighlightForeground#ffffff
  • sash.hoverBorder#c4c4c8
  • scrollbarSlider.activeBackground#ccc7c8b9
  • scrollbarSlider.background#ccc7c8b9
  • scrollbarSlider.hoverBackground#ccc7c8b9
  • selection.background#ff7fff
  • statusBarItem.remoteBackground#ffffff00
  • tab.activeForeground#3902ff
  • tab.activeModifiedBorder#88330573
  • tab.border#ffffff
  • tab.inactiveBackground#b2b5b569
  • tab.inactiveModifiedBorder#88330573
  • tab.unfocusedActiveForeground#3902ff8c
  • terminal.findMatchBackground#000000ce
  • terminal.findMatchBorder#3902ff
  • terminal.findMatchHighlightBackground#3902ff6a
  • terminal.findMatchHighlightBorder#3902ff6a
  • terminal.foreground#000000
  • terminalCursor.background#ffcabe
  • terminalCursor.foreground#7c6b69
  • titleBar.activeForeground#883305

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#000000
emphasisitalic
strongbold
meta.diff.header#ffff7f
comment#a575b5
constant.language#a96329
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#4a3157
constant.regexp#4b996a
constant.character#a96329
entity.name.tag#a96329
entity.name.tag.css, entity.name.tag.less#284582
entity.other.attribute-name#632301
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#284582
invalid#0bb8b8
markup.underlineunderline
markup.boldbold
markup.heading#986919bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#4a3157
markup.deleted#4f8faf
markup.changed#a96329
punctuation.definition.tag#7f7f7f
meta.preprocessor#a96329
meta.preprocessor.string#4f8faf
meta.preprocessor.numeric#4a3157
meta.structure.dictionary.key.python#632301
storage#a96329
storage.type#a96329
storage.modifier#a96329
string#4f8faf
string.tag#4f8faf
string.value#4f8faf
string.regexp#4fafaf
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#a96329
meta.template.expression#000000
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#2b2b2b
keyword#a96329
keyword.control#a96329
keyword.operator#2b2b2b
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#a96329
keyword.other.unit#4a3157
support.function.git-rebase#2b2b2b
constant.sha.git-rebase#4a3157
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#2b2b2b
variable.language.this#a96329
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member#232355
support.class, support.type, entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#b1364f
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#b1364f
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator#3a793f
variable, meta.definition.variable.name, support.variable#632301
meta.object-literal.key#632301
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#316e87
meta.resultLinePrefix.contextLinePrefix.search#341234
commentitalic
constant.languagebold
entity.name.tagbold
entity.name.tag.css, entity.name.tag.lessbold
entity.other.attribute-nameitalic
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scssitalic
invalidstrikethrough
invalid.deprecatedstrikethrough
markup.headingbold underline
markup.inserted, markup.inserted.diffunderline
markup.deleted, markup.deleted.diffstrikethrough
markup.changed, markup.changed.diffunderline
markup.underline.link, markup.underline.link.markdown, markup.underline.link.image.markdown, meta.link.inline.markdown, meta.link.reference.markdown, string.other.link.title.markdown, string.other.link.description.markdownunderline
meta.preprocessorbold
storagebold italic underline
storage.typebold italic underline
storage.modifierbold
stringitalic
string.tagitalic
string.valueitalic
string.regexpitalic
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embeddedbold
keywordbold
keyword.controlbold
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.pythonbold
keyword.operator.word, keyword.operator.logical, keyword.operator.arrow, keyword.operator.assignment, keyword.operator.assignment.compound, keyword.operator.assignment.augmented, keyword.operator.bitwise, keyword.operator.bitwise.shift, keyword.operator.comparison, keyword.operator.increment, keyword.operator.ternary, keyword.operator.spread, keyword.operator.optional, keyword.operator.relation, keyword.operator.type, keyword.operator.controlbold
variable.language.thisbold italic
variable.language, variable.language.self, variable.language.superbold italic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.memberbold
entity.name.function.memberbold
support.class, support.type, entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovybold italic
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.rubybold italic
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operatorbold
variable.parameter, variable.parameter.function.language.special, entity.name.variable.parameteritalic
constant.character.escape, constant.character.escape.css, constant.character.escape.unicode, constant.character.escape.hex, constant.character.escape.octal, constant.character.escape.control, constant.character.escape.newline, constant.character.escape.backlash, constant.character.escape.double-quote, constant.character.escape.single-quote, constant.character.escape.bell, constant.character.escape.carriage-return, constant.character.escape.form-feed, constant.character.escape.line-separator, constant.character.escape.null, constant.character.escape.paragraph-separator, constant.character.escape.tab, constant.character.escape.vertical-tabbold
variable.other.constant, variable.other.enummemberbold
keyword.operator.or.regexp, keyword.control.anchor.regexpbold
keyword.operator.quantifier.regexpbold
meta.diff, meta.diff.headerbold
Eink 60Hz Theme by Lam Nguyen - VS Code Theme