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#061019
  • activityBar.border#ffffff09
  • activityBar.foreground#6e7d9a
  • activityBarBadge.background#ffffff09
  • activityBarBadge.foreground#ff01c0
  • button.background#ff006abe
  • button.foreground#ffffff
  • checkbox.border#ffffff09
  • diffEditor.border#ffffff09
  • diffEditor.insertedLineBackground#0f0f0f0e
  • diffEditor.insertedTextBackground#09441121
  • diffEditor.insertedTextBorder#33ff001e
  • diffEditor.removedLineBackground#cc05051c
  • diffEditor.removedTextBorder#ff000036
  • dropdown.background#0a1016
  • dropdown.border#ffffff09
  • editor.background#181a1f
  • editor.foreground#ececec
  • editorBracketHighlight.foreground1#ff0080e5
  • editorBracketHighlight.foreground2#b853e7da
  • editorBracketHighlight.foreground3#6eff61ad
  • editorBracketHighlight.foreground4#03b7eeb9
  • editorBracketHighlight.foreground5#eeeb30d0
  • editorBracketHighlight.foreground6#e0eaffcb
  • editorBracketHighlight.unexpectedBracket.foreground#797979
  • editorCursor.foreground#ffffffd0
  • editorGroup.border#ffffff09
  • editorGroupHeader.tabsBackground#0e141a
  • editorGroupHeader.tabsBorder#ffffff09
  • editorIndentGuide.activeBackground#fc10106c
  • editorIndentGuide.background#49494929
  • editorInlayHint.background#79797917
  • editorInlayHint.foreground#e0eaffcb
  • editorLineNumber.foreground#5a6986aa
  • editorRuler.foreground#ffffff09
  • editorSuggestWidget.background#181a1f
  • editorSuggestWidget.selectedBackground#32436bd2
  • editorWidget.background#0e141a
  • editorWidget.border#ffffff09
  • focusBorder#ff006a44
  • gitDecoration.ignoredResourceForeground#6e7d9abb
  • gitDecoration.modifiedResourceForeground#f5af19
  • gitDecoration.untrackedResourceForeground#aaed36
  • gitlens.trailingLineForegroundColor#afa2a22a
  • icon.foreground#e420b9
  • inlineparameters.annotationBackground#79797917
  • input.background#0c1116
  • input.border#ffffff09
  • input.foreground#ffffff
  • list.activeSelectionBackground#ec050500
  • list.activeSelectionForeground#f173a8
  • list.hoverBackground#00000000
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000000
  • list.inactiveSelectionForeground#ffffff
  • menu.border#ffffff09
  • panel.background#0a1016
  • panel.border#ffffff09
  • panelTitle.activeForeground#6e7d9abb
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#ffffff09
  • scrollbarSlider.background#ffffff04
  • scrollbarSlider.hoverBackground#ffffff09
  • sideBar.background#061019
  • sideBar.border#ffffff09
  • sideBar.foreground#6e7d9a
  • sideBarTitle.foreground#6e7d9abb
  • statusBar.background#061019
  • statusBar.border#ffffff09
  • statusBar.debuggingBackground#0a1016
  • statusBar.foreground#6e7d9abb
  • statusBar.noFolderBackground#0a1016
  • tab.activeBackground#0e141a
  • tab.activeBorderTop#ff006a
  • tab.border#00000000
  • tab.inactiveBackground#0e141a
  • tab.inactiveForeground#6e7d9abb
  • terminalCursor.foreground#ffffff
  • titleBar.activeBackground#0a1016
  • titleBar.activeForeground#6e7d9a
  • titleBar.border#ffffff09
  • titleBar.inactiveBackground#060c12
  • titleBar.inactiveForeground#6e7d9aaa
  • widget.shadow#ffffff09
  • window.activeBorder#0e141a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#F8F8F2—
comment#88846F—
string, source.ini, source.dockerfile#009d71—
punctuation.definition.template-expression, punctuation.section.embedded#F92672—
meta.template.expression#F8F8F2—
constant.numeric, keyword.operator.relational.js, keyword.operator.ternary.js#AE81FF—
constant.language#AE81FF—
constant.character, constant.other#AE81FF—
variable#F8F8F2
keyword#FFFFFF—
storage#FF0055—
keyword.other.new.php#FF0055—
meta.property-value.scss#66D9EF—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#A6E22Eunderline
entity.other.inherited-class#A6E22Eitalic underline
entity.name.function, meta.at-rule.keyframes.scss#ff2eaf—
variable.parameter, variable.other.readwrite.js#FD971F—
entity.name.tag, keyword.control.import.js, keyword.control.from.js#f92688
entity.other.attribute-name, entity.other.attribute-name.html#2ee28e—
support.function, support.function.var.php#c5ee0f
support.constant#66D9EF
support.type, support.class#01D5FF—
support.other.variable—
invalid#F44747
invalid.deprecated#F44747—
meta.structure.dictionary.json string.quoted.double.json#E2E274—
meta.diff, meta.diff.header#75715E—
markup.deleted#F92672—
markup.inserted#A6E22E—
markup.changed#E6DB74—
constant.numeric.line-number.find-in-files - match, keyword.other.phpdoc.php#AE81FFA0—
entity.name.filename.find-in-files#E6DB74—
markup.quote#F92672—
markup.list, meta.paragraph.markdown#E6DB74—
markup.bold, markup.italic#66D9EF—
markup.inline.raw#FD971F
markup.heading#A6E22E—
markup.heading.setext#A6E22Ebold
markup.heading.markdown—bold
markup.quote.markdown#75715E—
markup.bold.markdown—bold
string.other.link.title.markdown,string.other.link.description.markdown, meta.object-literal.key#AE81FF—
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74—
markup.italic.markdown——
markup.strikethrough—strikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#F8F8F2—
punctuation.definition.list.begin.markdown#00FFFFFB—
keyword.operator.key.php#00FFFFFB—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
variable.language, keyword.control.import.include.php#FD1F1F—
variable.language.this.php#13a8fe—
variable.language.this.js#67ff6b—
variable.other.php#ff6565—
keyword.operator.nullable-type.php, keyword.operator.return-value.php, keyword.operator.arithmetic.php, support.variable.property.js, keyword.other.definition.ini, variable.other.assignment.shell#FF0077—
keyword.operator.ternary.php#F5078A—
variable.other.property.php#71ffe0cb—
variable.other.readwrite.alias.js, keyword.control.default.js, keyword.control.export.js, support.class.builtin.php#19CCE4—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#FD5151—
keyword.other.namespace.php, keyword.operator.new.js, keyword.control.at-rule.import.scss, punctuation.separator.key-value.scss, keyword.control.at-rule.import.css, keyword.control.yield.php, meta.embedded, keyword.operator.increment-decrement.php, keyword.control, entity.name.tag.yaml, constant.language.boolean.false.js, keyword.other.use.php#FF006A—
keyword.control.if.php, keyword.control.else.php, keyword.control.elseif.php, keyword.control.loop.js, keyword.control.conditional.js, keyword.control.for.php, keyword.control.switch.js, keyword.control.switch.php, keyword.control.default.php, keyword.control.break.php, keyword.control.case.php, keyword.control.foreach.php#A55EEA—
support.class.exception.php#FF0000E7—
keyword.operator.expression.delete.js, keyword.operator.expression.in.js#FD5151E7—
keyword.control.return.php#FD0000E7—
keyword.control.flow.js, keyword.operator.comparison.js, keyword.operator.logical.js, keyword.operator.increment.js, keyword.operator.decrement.js, keyword.operator.arithmetic.js, keyword.operator.logical.php, keyword.operator.comparison.php, keyword.operator.null-coalescing.php, punctuation.accessor.optional.js, keyword.operator.assignment.compound.js, storage.type.js, keyword.other.important.scss, keyword.control.at-rule.media.scss, keyword.operator.logical.scss, keyword.control.operator.css.scss, keyword.control.at-rule.keyframes.scss, keyword.operator.string.php, keyword.other.clone.php#FF0077—
keyword.operator.assignment.php#2AFFD1—
keyword.operator.assignment.js#2AFFD1—
keyword.operator.class.php#00FF00—
storage.modifier.async.js, keyword.control.flow.js#00FF00—
punctuation.separator.key-value.html, meta.tag.block.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.accessor.js#FFFFFF—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#e6e6e6—
punctuation.separator.delimiter.php, punctuation.terminator.expression.php#F51414—
keyword.control.exception.php, keyword.control.exception.catch.php, keyword.control.trycatch.js#FA31F0—
variable.other.property.js#FF68EBE5—
support.other.namespace.php, source.ignore#C7C5C5C9—
keyword.other.class.php, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.s.css, keyword.other.unit.percentage.css, keyword.other.unit.deg.css, keyword.other.unit.em.css#FD5724F5—
keyword.operator.type.php, keyword.other.function.use.php, keyword.operator.expression.typeof.js#F92672—
keyword.other.type.php#FF64A5E8—
variable#4BCFFA—
text.html.php#FFFFFFC7—
text.html.derivative#FFFFFFC7—
source.sql, keyword.sql, punctuation.separator.key-value.html#4BCFFA—
keyword.other.DML.sql, keyword.other.DDL.create.II.sql, keyword.other.sql, keyword.other.data-integrity.sql#F30688—
variable.other.object.js#ff5100—
keyword.other.alias.sql, keyword.other.order.sql, keyword.other.LUW.sql#F3A006—
keyword.other.DML.II.sql#EB06F3—
storage.modifier.php#FF0077—
storage.type#39BCE4—
storage.type.class.php#FF0077bold
keyword.other.special-method.dockerfile#FF0077—
support.class.php#fbff00da—
source.css#d5ff19de—
keyword.operator, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.important.css, keyword.other.unit.fr.css, meta.property-value.css#e60f8c—
NeonTheme by joaoKuchnirr - VS Code Theme