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.markdownbold
markup.quote.markdown#75715E
markup.bold.markdownbold
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.strikethroughstrikethrough
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