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#131313
  • activityBar.border#131313
  • activityBar.foreground#88888f
  • activityBarBadge.background#88bb44
  • activityBarBadge.foreground#222222
  • badge.background#88bb44
  • badge.foreground#222222
  • button.background#363537
  • button.foreground#d0d0d1
  • button.hoverBackground#87bb448f
  • debugExceptionWidget.background#363537
  • debugExceptionWidget.border#222222
  • debugToolBar.background#363537
  • diffEditor.insertedTextBackground#ffdd440c
  • diffEditor.insertedTextBorder#ffdd44
  • diffEditor.removedTextBackground#99bbfe0c
  • diffEditor.removedTextBorder#99bbfe
  • dropdown.background#222222
  • dropdown.border#222222
  • dropdown.foreground#88888f
  • editor.background#222222
  • editor.findMatchBackground#525053
  • editor.findMatchHighlightBackground#363537
  • editor.findRangeHighlightBackground#ffffff0c
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#363537
  • editor.inactiveSelectionBackground#ffffff0c
  • editor.lineHighlightBackground#ffffff0c
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#363537
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#525053
  • editor.wordHighlightBackground#000000
  • editor.wordHighlightStrongBackground#000000
  • editorBracketMatch.background#222222
  • editorBracketMatch.border#69676c
  • editorCodeLens.foreground#69676c
  • editorCursor.foreground#fdff86d0
  • editorError.border#00000000
  • editorError.foreground#99bbfe
  • editorGroup.border#191919
  • editorGroup.dropBackground#191919bf
  • editorGroupHeader.noTabsBackground#222222
  • editorGroupHeader.tabsBackground#222222
  • editorGroupHeader.tabsBorder#222222
  • editorGutter.addedBackground#ffdd44
  • editorGutter.background#222222
  • editorGutter.deletedBackground#99bbfe
  • editorGutter.modifiedBackground#99bbfe
  • editorHoverWidget.background#363537
  • editorHoverWidget.border#222222
  • editorIndentGuide.activeBackground1#87bb4467
  • editorIndentGuide.background1#49494929
  • editorInlayHint.background#79797917
  • editorInlayHint.foreground#e0eaffcb
  • editorLineNumber.foreground#525053
  • editorLink.activeForeground#ddaaff
  • editorMarkerNavigation.background#363537
  • editorMarkerNavigationError.background#99bbfe
  • editorMarkerNavigationWarning.background#99bbfe
  • editorOverviewRuler.addedForeground#ffdd44
  • editorOverviewRuler.border#222222
  • editorOverviewRuler.currentContentForeground#363537
  • editorOverviewRuler.deletedForeground#99bbfe
  • editorOverviewRuler.errorForeground#99bbfe
  • editorOverviewRuler.findMatchForeground#525053
  • editorOverviewRuler.incomingContentForeground#363537
  • editorOverviewRuler.infoForeground#ddaaff
  • editorOverviewRuler.modifiedForeground#99bbfe
  • editorOverviewRuler.rangeHighlightForeground#363537
  • editorOverviewRuler.selectionHighlightForeground#535350
  • editorOverviewRuler.warningForeground#99bbfe
  • editorOverviewRuler.wordHighlightForeground#363537
  • editorOverviewRuler.wordHighlightStrongForeground#525053
  • editorRuler.foreground#50505057
  • editorSuggestWidget.background#363537
  • editorSuggestWidget.border#363537
  • editorSuggestWidget.foreground#bab6c0
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#69676c
  • editorWarning.border#00000000
  • editorWarning.foreground#99bbfe
  • editorWhitespace.foreground#363537
  • editorWidget.background#363537
  • editorWidget.border#363537
  • errorForeground#99bbfe
  • extensionButton.prominentBackground#363537
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#525053
  • focusBorder#69676c
  • foreground#ffffff
  • inlineparameters.annotationBackground#79797917
  • input.background#363537
  • input.border#363537
  • input.foreground#ffffff
  • input.placeholderForeground#525053
  • inputOption.activeBorder#525053
  • inputValidation.errorBackground#363537
  • inputValidation.errorBorder#99bbfe
  • inputValidation.infoBackground#363537
  • inputValidation.infoBorder#ddaaff
  • inputValidation.warningBackground#363537
  • inputValidation.warningBorder#99bbfe
  • list.activeSelectionBackground#191919
  • list.activeSelectionForeground#88bb44
  • list.dropBackground#191919bf
  • list.focusBackground#191919
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#191919
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#191919
  • list.inactiveSelectionForeground#88bb44
  • merge.border#222222
  • merge.currentContentBackground#363537
  • merge.currentHeaderBackground#525053
  • merge.incomingContentBackground#525053
  • merge.incomingHeaderBackground#69676c
  • panel.background#2e2e2e
  • panel.border#222222
  • panelTitle.activeBorder#88bb44
  • panelTitle.activeForeground#88bb44
  • panelTitle.inactiveForeground#88888f
  • peekView.border#222222
  • peekViewEditor.background#363537
  • peekViewEditor.matchHighlightBackground#525053
  • peekViewEditorGutter.background#363537
  • peekViewResult.background#363537
  • peekViewResult.fileForeground#88888f
  • peekViewResult.lineForeground#88888f
  • peekViewResult.matchHighlightBackground#525053
  • peekViewResult.selectionBackground#363537
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#363537
  • peekViewTitleDescription.foreground#88888f
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#222222
  • pickerGroup.foreground#525053
  • progressBar.background#363537
  • scrollbar.shadow#222222
  • scrollbarSlider.activeBackground#ffffff12
  • scrollbarSlider.background#ffffff12
  • scrollbarSlider.hoverBackground#ffffff12
  • selection.background#8f7193
  • sideBar.background#191919
  • sideBar.border#131313
  • sideBar.foreground#88888f
  • sideBarSectionHeader.background#191919
  • sideBarSectionHeader.foreground#69676c
  • sideBarTitle.foreground#525053
  • statusBar.background#191919
  • statusBar.border#131313
  • statusBar.debuggingBackground#69676c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#69676c
  • statusBar.noFolderBackground#191919
  • statusBar.noFolderForeground#69676c
  • statusBarItem.activeBackground#222222
  • statusBarItem.hoverBackground#222222
  • statusBarItem.prominentBackground#363537
  • statusBarItem.prominentHoverBackground#363537
  • tab.activeBackground#222222
  • tab.activeBorder#88bb44
  • tab.activeForeground#88bb44
  • tab.border#222222
  • tab.inactiveBackground#222222
  • tab.inactiveForeground#88888f
  • tab.unfocusedActiveBorder#88888f
  • tab.unfocusedActiveForeground#bab6c0
  • tab.unfocusedInactiveForeground#88888f
  • terminal.ansiBlack#363537
  • terminal.ansiBlue#99bbfe
  • terminal.ansiBrightBlack#69676c
  • terminal.ansiBrightBlue#99bbfe
  • terminal.ansiBrightCyan#ddaaff
  • terminal.ansiBrightGreen#ff6044
  • terminal.ansiBrightMagenta#99bbff
  • terminal.ansiBrightRed#99bbfe
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#88bb44
  • terminal.ansiCyan#ddaaff
  • terminal.ansiGreen#ff9844
  • terminal.ansiMagenta#99bbff
  • terminal.ansiRed#99bbfe
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#88bb44
  • terminal.background#202020
  • terminal.foreground#efbbff
  • terminal.tab.activeBorder#ff0000
  • terminalCursor.foreground#ffffff
  • titleBar.activeBackground#131313
  • titleBar.activeForeground#88888f
  • titleBar.inactiveBackground#191919
  • titleBar.inactiveForeground#525053
  • walkThrough.embeddedEditorBackground#191919
  • widget.shadow#131313

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.decimal.js#fa5f49—
constant.numeric, keyword.operator.relational.js, keyword.operator.ternary.js#AE81FF—
constant.language#AE81FF—
constant.character, constant.other#AE81FF—
variable#F8F8F2
keyword#FFFFFF—
storage#f45572—
keyword.other.new.php#f0a2f6—
meta.property-value.scss#66D9EF—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#77dd77underline
entity.other.inherited-class#A6E22Eitalic underline
entity.name.function, meta.at-rule.keyframes.scss, keyword.other.definition.ini#bc4ed8—
variable.parameter, variable.other.readwrite.js#FD971F—
keyword.control.import.js, keyword.control.from.js#ff85d5
entity.name.tag,#f45572
entity.other.attribute-name, entity.other.attribute-name.html#a6fab5d7—
support.function, support.function.var.php#64c27b—
support.constant#b2e2f2
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#e4717a—
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, variable.language.this.js#c2fa33e3—
variable.other.php#f36565—
keyword.operator.nullable-type.php, keyword.operator.return-value.php, keyword.operator.arithmetic.php, support.variable.property.js, variable.other.assignment.shell#FF0077—
keyword.operator.ternary.php#F5078A—
variable.other.property.php#d3bcf6—
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#ff85d5—
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#f74fd0—
support.class.exception.php#FF0000E7—
keyword.operator.expression.delete.js, keyword.operator.expression.in.js#FD5151E7—
keyword.control.return.php, keyword.control.flow.js#FD0000E7—
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#f064a5—
keyword.operator.assignment.php#2AFFD1—
keyword.operator.assignment.js#2AFFD1—
keyword.operator.class.php#00FF00—
storage.modifier.async.js#8cfca4de—
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#CCCCCC—
punctuation.separator.delimiter.php, punctuation.terminator.expression.php#F51414—
keyword.control.exception.php, keyword.control.exception.catch.php, keyword.control.trycatch.js#42ab49—
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#eb9cff—
variable#4BCFFA—
text.html.php#FFFFFFC7—
text.html.derivative#fffffffd—
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, storage.modifier.extends.php#fa34df—
storage.type#84b6f4—
storage.type.class.php#f45572bold
keyword.other.special-method.dockerfile#FF0077—
support.class.php#84b6f4—
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