Skip to main content
Coding Theme

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.activeBorder#ce5412
  • activityBar.background#212836
  • activityBar.border#00000060
  • activityBar.foreground#eeffff
  • activityBarBadge.background#ce5412
  • activityBarBadge.foreground#ffffff
  • badge.background#00000030
  • badge.foreground#4a4a4a
  • breadcrumb.activeSelectionForeground#80cbc4
  • breadcrumb.background#212836
  • breadcrumb.focusForeground#eeffff
  • breadcrumb.foreground#848484
  • breadcrumbPicker.background#1a1a1a
  • button.background#61616150
  • button.foreground#ffffff
  • button.hoverBackground#6087cf
  • debugConsole.errorForeground#f07178
  • debugConsole.infoForeground#89ddff
  • debugConsole.warningForeground#ffcb6b
  • debugToolBar.background#212121
  • diffEditor.insertedTextBackground#89ddff20
  • diffEditor.removedTextBackground#ff9cac20
  • dropdown.background#151515
  • dropdown.border#6087cf
  • editor.background#212836
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80cbc4
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff50
  • editor.findRangeHighlightBackground#ffcb6b30
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#ffffff0d
  • editor.selectionBackground#3f5a5e
  • editor.selectionHighlightBackground#ffcc0020
  • editor.selectionHighlightBorder#ffffff
  • editor.wordHighlightBackground#ff9cac30
  • editor.wordHighlightStrongBackground#c3e88d30
  • editorBracketMatch.background#212121
  • editorBracketMatch.border#ffd700
  • editorCursor.foreground#ffff00
  • editorError.foreground#f0717870
  • editorGroup.border#00000030
  • editorGroup.dropBackground#f0717880
  • editorGroup.focusedEmptyBorder#f07178
  • editorGroupHeader.tabsBackground#212836
  • editorGutter.addedBackground#c3e88d60
  • editorGutter.background#212836
  • editorGutter.deletedBackground#f0717860
  • editorGutter.modifiedBackground#82aaff60
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#ffffff10
  • editorIndentGuide.activeBackground#424242
  • editorIndentGuide.background#42424270
  • editorInfo.foreground#82aaff70
  • editorInlayHint.background#2c313a
  • editorInlayHint.foreground#636e83
  • editorLineNumber.activeForeground#d6801d
  • editorLineNumber.foreground#7b7b7b
  • editorLink.activeForeground#eeffff
  • editorMarkerNavigation.background#eeffff05
  • editorOverviewRuler.border#212121
  • editorOverviewRuler.errorForeground#f0717840
  • editorOverviewRuler.findMatchForeground#80cbc4
  • editorOverviewRuler.infoForeground#82aaff40
  • editorOverviewRuler.warningForeground#ffcb6b40
  • editorRuler.foreground#424242
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.border#ffffff10
  • editorSuggestWidget.foreground#eeffff
  • editorSuggestWidget.highlightForeground#80cbc4
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#ffcb6b70
  • editorWhitespace.foreground#eeffff40
  • editorWidget.background#1a1a1a
  • editorWidget.border#80cbc4
  • editorWidget.resizeBorder#80cbc4
  • extensionButton.prominentBackground#2ba143
  • extensionButton.prominentHoverBackground#37af4e
  • focusBorder#1a1a1a
  • input.background#1b1d23
  • input.border#181a1f
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#2c313a
  • list.highlightForeground#d7dae0
  • list.hoverBackground#2c313a66
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notebook.cellEditorBackground#2c313a
  • peekView.border#528bff
  • peekViewEditor.background#1b1d23
  • peekViewResult.background#21252b
  • peekViewResult.selectionBackground#2c313a
  • peekViewTitle.background#1b1d23
  • pickerGroup.border#528bff
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#212836
  • sideBar.border#2c313a
  • sideBarSectionHeader.background#333842
  • statusBar.background#212836
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#00d5ff1e
  • tab.activeForeground#d7dae0
  • tab.border#22323b
  • tab.inactiveBackground#212836
  • terminalCursor.foreground#ffff00
  • titleBar.activeBackground#212836
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#212836
  • titleBar.inactiveForeground#9da5b4
  • widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#696D77italic
comment storage.type#696D77
comment entity.name.type#B2B9BD
comment variable, comment variable.other#B2B9BD
comment keyword.codetag.notation#C39AC9
comment.git-status.header.remote#FF657A
comment.git-status.header.local#9CD1BB
comment.other.git-status.head#EAF2F1
string.quoted.docstring, string.quoted.docstring punctuation.definition#696D77
constant#C39AC9
constant.other#EAF2F1
constant.other.caps#C39AC9
constant.other.placeholder.c#FF9B5E
constant.other.property#C39AC9
constant.other.citation.latex#C39AC9
constant.other.color#a6a6a6
constant.other.character-class.escape#C39AC9
constant.other.key#C39AC9
constant.other.symbol#FF9B5E
constant.other.elm#9CD1BB
constant.numeric#fff200
constant.language#C39AC9
constant.character.escape#C39AC9
constant.numeric.line-number.find-in-files#535763
constant.numeric.line-number.match.find-in-files#FFD76D
entity.name.section#FFD76D
entity.name.function, entity.name.function.templated, entity.name.function.member.static#BAD761
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#9CD1BB
entity.name.label#C39AC9
entity.name.function.preprocessor#9CD1BB
entity.name#BAD761
entity.name.class#9CD1BB
entity.name.constant#C39AC9
entity.name.namespace#EAF2F1
entity.other.inherited-class#9CD1BBitalic
entity.name.function#BAD761
entity.name.tag#d9ed92
entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#1ff87d
entity.name.function.operator#FF657A
entity.name.tag.css#ff84d0
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator#8a9488
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#9CD1BB
entity.other.attribute-name#9CD1BBitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css#9de7ff
entity.other.attribute-name.id.css#FF9B5E
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#b87bc1italic
entity.name.function, support.function#bfff00
entity.other.git-status.hex#C39AC9
entity.other.jinja2.delimiter#888D94
entity.name.operator.custom-literal#EAF2F1
entity.name.operator.custom-literal.string#FFD76D
entity.name.operator.custom-literal.number#C39AC9
entity.name.type.rust#9CD1BB
entity.name.lifetime.rust#FF657A
invalid#FF657Aitalic underline
invalid.deprecated#FF9B5Eitalic underline
keyword#ffa200
keyword.control#0fcdd3
keyword.control.directive#FF657A
keyword.operator, keyword.operator.member, keyword.operator.new#FF657A
keyword.other.substitution#888D94
keyword.other.template.begin, keyword.other.template.end#FF657A
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#888D94
keyword.other.parenthesis.elm#888D94
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#9CD1BB
keyword.control.rust, keyword.operator.misc.rust#FF657A
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#FF657A
markup.italicitalic
markup.boldbold
markup.heading#FFD76D
markup.raw#FF9B5E
markup.underlineunderline
markup.underline.link#BAD761
markup.inserted, markup.inserted punctuation.definition.inserted#BAD761
markup.deleted, markup.deleted punctuation.definition.deleted#FF657A
markup.changed, markup.changed punctuation.definition.changed#FFD76D
markup.ignored, markup.ignored punctuation.definition.ignored#888D94
markup.untracked#888D94
markup.quoteitalic
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#888D94
meta.function-call.generic.python, support.function.builtin.python#BAD761
meta.function-call.python meta.function-call.arguments.python#EAF2F1
meta.instance.constructor#BAD761
meta.attribute-with-value.class string, meta.attribute.class.html string#BAD761
meta.attribute-with-value.id string, meta.attribute.id.html string#FF9B5E
source.json meta.mapping.key string#EAF2F1
source.yaml meta.mapping.key string#FF657A
meta.object.member#EAF2F1
meta.property-list.css variable.other#695eff
entity.name.constant.preprocessor, meta.preprocessor#C39AC9
meta.diff.git-diff.header#FFD76D
meta.type_params.rust#EAF2F1
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string#B2B9BD
punctuation#cf6814
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css#888D94
punctuation.definition.group#EAF2F1
punctuation.definition.comment#696D77
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#B2B9BD
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#FF9B5E
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF657A
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown
markup.underline.link punctuation#BAD761
region.redish#FF657A
region.orangish#FF9B5E
region.yellowish#FFD76D
region.greenish#BAD761
region.bluish#9CD1BB
region.purplish#C39AC9
region.pinkish#FF657A
region.whitish#FFFFFF
source#EAF2F1
source.scss, source.sass#888D94
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#FF9B5Eitalic
source.git-show.commit.sha#C39AC9
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file#888D94
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#C39AC9
source.git-show meta.diff.range.unified#FF9B5E
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#888D94
storage#FF657A
storage.type#9CD1BBitalic
storage.type.extends#FF657Anormal
storage.type.function.arrow#FF657Anormal
storage.modifier, storage.type.modifier#FF657Aitalic
storage.class.restructuredtext.ref#C39AC9
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#FF657A
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust#9CD1BB
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust#FF657A
string#FFD76D
string.unquoted.label#EAF2F1
string source#EAF2F1
string source punctuation.section.embedded, string punctuation.definition.string source#888D94
string.other.link.title, string.other.link.description#FF657A
string.other.link.description.title#9CD1BB
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF657A
string.other.ref, string.other.restructuredtext.ref#BAD761
string.other.git-status.help.key#B2B9BD
string.other.git-status.remote#FF657A
support.constant#fff200
support.constant.handlebars#888D94
support.type.vendor-prefix.css#B2B9BD
support.function#ffff00
support.function.delimiter.elm#888D94
support.type, entity.name.type.object.console#9CD1BBitalic
support.variable#9CD1BB
support.type.property-name#c5db97normal
support.class#9CD1BB
support.constant.core.rust#C39AC9
text#EAF2F1
text.find-in-files#EAF2F1
variable, variable.other#EAF2F1
variable.parameter, parameters variable.function#FF9B5Eitalic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#B2B9BDitalic
variable.language.arguments#C39AC9
variable.other.class#9CD1BB
variable.other.constant#29ff6d
variable.other.readwrite#EAF2F1
variable.other.member#EAF2F1
variable.other.enummember#C39AC9
variable.other.property, variable.other.property.static, variable.other.event#8dcf67
variable.function#BAD761
variable.other.substitution#FF9B5E
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#C39AC9
source.jinja2 variable.other.jinja2.block#BAD761
source.jinja2 variable.other.jinja2#FF9B5E
comment#9A9A9A
punctuation.definition.comment#9A9A9A
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
Lizadro by MPRCode - VS Code Theme