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.background#23262e
  • activityBar.foreground#baafc0
  • activityBarBadge.background#00b0ff
  • activityBarBadge.foreground#20232b
  • badge.background#00b0ff
  • badge.foreground#20232b
  • button.background#d3bcf6
  • button.hoverBackground#f7cae4
  • debugExceptionWidget.background#ff9f2e60
  • debugExceptionWidget.border#ff9f2e60
  • debugToolBar.background#20232a
  • diffEditor.insertedTextBackground#29bf1220
  • diffEditor.removedTextBackground#f21b3f20
  • dropdown.background#2b303b
  • dropdown.border#363c49
  • editor.background#191a1b
  • editor.findMatchBackground#59614467
  • editor.findMatchBorder#ff000000
  • editor.findMatchHighlightBackground#59b8b377
  • editor.foreground#d5ced9
  • editor.hoverHighlightBackground#373941
  • editor.lineHighlightBackground#2e323d
  • editor.lineHighlightBorder#2e323d
  • editor.rangeHighlightBackground#372f3c
  • editor.selectionBackground#000000fd
  • editor.selectionHighlightBackground#4f435580
  • editor.wordHighlightBackground#4f4355
  • editor.wordHighlightStrongBackground#db45a280
  • editorBracketHighlight.foreground1#66ff29e7
  • editorBracketHighlight.foreground2#ff7525
  • editorBracketHighlight.foreground3#dce92ce1
  • editorBracketHighlight.foreground4#7be0e7
  • editorBracketHighlight.foreground5#c39effd8
  • editorBracketHighlight.foreground6#7240fc
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#746f77
  • editorBracketMatch.border#746f77
  • editorCodeLens.foreground#746f77
  • editorCursor.foreground#5cffe4fb
  • editorError.foreground#fc644d
  • editorGroup.dropBackground#495061d7
  • editorGroupHeader.tabsBackground#23262e
  • editorGutter.addedBackground#9bc53dbb
  • editorGutter.deletedBackground#fc644dbb
  • editorGutter.modifiedBackground#5bc0ebbb
  • editorHoverWidget.background#373941
  • editorHoverWidget.border#d3bcf6
  • editorIndentGuide.activeBackground#585c66
  • editorIndentGuide.background#33384436
  • editorInlayHint.background#ffffff00
  • editorInlayHint.foreground#ffffff7c
  • editorLineNumber.foreground#746f77
  • editorLink.activeForeground#3b79c7
  • editorOverviewRuler.border#1b1d23
  • editorRuler.foreground#4f4355
  • editorSuggestWidget.background#20232a
  • editorSuggestWidget.border#372f3c
  • editorSuggestWidget.selectedBackground#373941
  • editorWarning.foreground#ff9f2e
  • editorWhitespace.foreground#333844
  • editorWidget.background#20232a
  • errorForeground#fc644d
  • extensionButton.prominentBackground#f7cae4
  • extensionButton.prominentHoverBackground#07d4b5b0
  • focusBorder#746f77
  • foreground#d5ced9
  • gitDecoration.ignoredResourceForeground#555555
  • input.background#2b303b
  • input.placeholderForeground#746f77
  • inputOption.activeBorder#c668ba
  • inputValidation.errorBackground#d65343
  • inputValidation.errorBorder#d65343
  • inputValidation.infoBackground#3a6395
  • inputValidation.infoBorder#3a6395
  • inputValidation.warningBackground#de9237
  • inputValidation.warningBorder#de9237
  • list.activeSelectionBackground#23262e
  • list.activeSelectionForeground#f79ae5
  • list.dropBackground#3a404e
  • list.focusBackground#282b35
  • list.focusForeground#eeeeee
  • list.hoverBackground#23262e
  • list.hoverForeground#eeeeee
  • list.inactiveSelectionBackground#23262e
  • list.inactiveSelectionForeground#f79ae5
  • merge.currentContentBackground#f9267240
  • merge.currentHeaderBackground#f92672
  • merge.incomingContentBackground#3b79c740
  • merge.incomingHeaderBackground#3b79c7bb
  • minimapSlider.activeBackground#60698060
  • minimapSlider.background#58607460
  • minimapSlider.hoverBackground#60698060
  • panel.background#23262e
  • panel.border#1b1d23
  • panelTitle.activeBorder#23262e
  • panelTitle.inactiveForeground#746f77
  • peekView.border#23262e
  • peekViewEditor.background#1a1c22
  • peekViewEditor.matchHighlightBackground#ff9f2e60
  • peekViewResult.background#1a1c22
  • peekViewResult.matchHighlightBackground#ff9f2e60
  • peekViewResult.selectionBackground#23262e
  • peekViewTitle.background#1a1c22
  • peekViewTitleDescription.foreground#746f77
  • phpParameterHint.hintBackground#18181800
  • phpParameterHint.hintForeground#ffffffb9
  • pickerGroup.border#4f4355
  • pickerGroup.foreground#746f77
  • progressBar.background#c668ba
  • scrollbar.shadow#23262e
  • scrollbarSlider.activeBackground#3a3f4ccc
  • scrollbarSlider.background#3a3f4c77
  • scrollbarSlider.hoverBackground#3a3f4caa
  • selection.background#746f77
  • sideBar.background#191a1b
  • sideBar.foreground#999999
  • sideBarSectionHeader.background#23262e
  • sideBarTitle.foreground#f79ae5
  • statusBar.background#23262e
  • statusBar.debuggingBackground#fc644d
  • statusBar.noFolderBackground#23262e
  • statusBarItem.activeBackground#d3bcf6
  • statusBarItem.hoverBackground#07d4b5b0
  • statusBarItem.prominentBackground#07d4b5b0
  • statusBarItem.prominentHoverBackground#d3bcf6
  • tab.activeBackground#23262e
  • tab.activeForeground#f79ae5
  • tab.inactiveBackground#23262e
  • tab.inactiveForeground#746f77
  • terminal.ansiBlue#7cb7ff
  • terminal.ansiBrightBlue#7cb7ff
  • terminal.ansiBrightCyan#f79ae5
  • terminal.ansiBrightGreen#96e072
  • terminal.ansiBrightMagenta#ff00aa
  • terminal.ansiBrightRed#ee5d43
  • terminal.ansiBrightYellow#ffe66d
  • terminal.ansiCyan#f79ae5
  • terminal.ansiGreen#96e072
  • terminal.ansiMagenta#ff00aa
  • terminal.ansiRed#ee5d43
  • terminal.ansiYellow#ffe66d
  • terminalCursor.background#23262e
  • terminalCursor.foreground#ffffff
  • titleBar.activeBackground#23262e
  • walkThrough.embeddedEditorBackground#23262e
  • widget.shadow#14151a

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#fdfd96
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#e0a2eb
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#f6cbffe7
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#c2ff05
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
entity.name.type.class, storage.modifier, storage.type.class.js, keyword, entity.other.attribute-name.html, meta.var.expr.js, variable.parameter.js, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.id.css, entity.name.tag.css, entity.other.attribute-name.class.css, storage.type.js, storage.type.function.php
invalid, keyword.operator, constant.numeric.css, keyword.other.unit.px.css, constant.numeric.decimal.js, constant.numeric.json, storage.type.function.arrow.js, source.js, entity.name.function, meta.var.expr.js, comment, source.ini, keyword.other.definition.ini, keyword.other.special-method.dockerfile, keyword.other.class.php, keyword.other.type.php
Darkness Theme Color by joaoKuchnirr - VS Code Theme