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#2e2130
  • activityBar.border#39293B
  • activityBar.foreground#ff9387
  • activityBarBadge.background#ba4a75
  • activityBarBadge.foreground#FFD6D1
  • badge.background#ba4a75
  • breadcrumb.activeSelectionForeground#f58989
  • breadcrumb.background#342536
  • breadcrumb.foreground#e6aeae
  • breadcrumbPicker.background#2C1F2D
  • button.background#d55385
  • button.foreground#FFD6D1
  • checkbox.background#2C1F2D
  • checkbox.border#ffffff00
  • checkbox.foreground#ffacaa
  • debugExceptionWidget.background#342536
  • debugExceptionWidget.border#e6aeae
  • debugToolBar.background#342536
  • descriptionForeground#FFBCB4
  • diffEditor.diagonalFill#5c405e
  • diffEditor.insertedTextBackground#b2dc6616
  • diffEditor.removedTextBackground#f53c6116
  • dropdown.background#2C1F2D
  • dropdown.foreground#FFD6D1
  • editor.background#3C2A3E
  • editor.findMatchBackground#a8abff3f
  • editor.findMatchHighlightBackground#ffa8ee51
  • editor.foreground#FFD6D1
  • editor.hoverHighlightBackground#85607e68
  • editor.lineHighlightBackground#342536
  • editor.lineHighlightBorder#4f335200
  • editor.rangeHighlightBackground#ffb0e935
  • editor.selectionBackground#673e67
  • editor.wordHighlightBackground#ffb0e927
  • editor.wordHighlightStrongBackground#ffb0e935
  • editorBracketMatch.background#ff000000
  • editorBracketMatch.border#965f90
  • editorCodeLens.foreground#ffcab6cc
  • editorCursor.background#FFD6D1
  • editorCursor.foreground#bd62ae
  • editorError.foreground#ef4581
  • editorGroup.border#583a64
  • editorGroup.dropBackground#3f2e41
  • editorGroupHeader.tabsBackground#342536
  • editorGutter.addedBackground#A7C966
  • editorGutter.background#3C2A3E
  • editorGutter.deletedBackground#EF4568
  • editorGutter.modifiedBackground#756ADE
  • editorHoverWidget.background#32212e
  • editorHoverWidget.border#54364c
  • editorHoverWidget.foreground#FFB0B0
  • editorIndentGuide.activeBackground#7b4d80
  • editorIndentGuide.background#513354
  • editorLightBulb.foreground#F9CD5F
  • editorLightBulbAutoFix.foreground#F9CD5F
  • editorLineNumber.activeForeground#FF8372
  • editorLineNumber.foreground#745074
  • editorLink.activeForeground#56c7ff
  • editorMarkerNavigation.background#3f2c3729
  • editorMarkerNavigationError.background#EF4568
  • editorMarkerNavigationWarning.background#F9CD5F
  • editorOverviewRuler.addedForeground#A7C966
  • editorOverviewRuler.border#ff000000
  • editorOverviewRuler.deletedForeground#E54386
  • editorOverviewRuler.errorForeground#EF4568
  • editorOverviewRuler.findMatchForeground#87DDEE
  • editorOverviewRuler.modifiedForeground#756ADE
  • editorOverviewRuler.rangeHighlightForeground#ff70c650
  • editorOverviewRuler.selectionHighlightForeground#ff70c650
  • editorOverviewRuler.warningForeground#F9B975
  • editorPane.background#39293B
  • editorRuler.foreground#583a64
  • editorSuggestWidget.background#291b26
  • editorSuggestWidget.border#54364c
  • editorSuggestWidget.foreground#ffcaca
  • editorSuggestWidget.highlightForeground#ffdfdf
  • editorWarning.foreground#f9cd5f
  • editorWhitespace.foreground#6c4a6f
  • editorWidget.background#291b26
  • editorWidget.foreground#FFB0B0
  • editorWidget.resizeBorder#b27d7d
  • extensionBadge.remoteBackground#ba4a75
  • extensionButton.prominentBackground#d55385
  • extensionButton.prominentForeground#FFD6D1
  • extensionButton.prominentHoverBackground#8a4cd0
  • focusBorder#e29962
  • foreground#FFBCB4
  • gitDecoration.addedResourceForeground#A7C966
  • gitDecoration.deletedResourceForeground#EF4568
  • gitDecoration.ignoredResourceForeground#674769
  • gitDecoration.modifiedResourceForeground#8478f0
  • gitDecoration.stageModifiedResourceForeground#756ADE
  • gitDecoration.untrackedResourceForeground#9BDDEA
  • icon.foreground#8f6386
  • imagePreview.border#e2996200
  • input.background#2C1F2D
  • input.foreground#ffb3aa
  • input.placeholderForeground#946969
  • inputOption.activeBackground#4d469a
  • inputValidation.errorBackground#42232f
  • inputValidation.errorBorder#FF4A8A
  • inputValidation.errorForeground#ffc8d9
  • inputValidation.warningBackground#3b3425
  • inputValidation.warningBorder#F9CD5F
  • inputValidation.warningForeground#ffdf8f
  • list.activeSelectionBackground#d1977825
  • list.activeSelectionForeground#ff8181
  • list.dropBackground#43303d
  • list.errorForeground#f1528a
  • list.focusBackground#4f373e
  • list.focusForeground#FF8372
  • list.highlightForeground#ffdada
  • list.hoverBackground#3f2c39
  • list.hoverForeground#ffa2a2
  • list.inactiveSelectionBackground#4b3543
  • list.inactiveSelectionForeground#ff8372
  • list.invalidItemForeground#975f94
  • list.warningForeground#efc762
  • menu.selectionForeground#856085
  • merge.border#1f152900
  • merge.commonContentBackground#ee702c22
  • merge.commonHeaderBackground#f95d2444
  • merge.currentContentBackground#39213622
  • merge.currentHeaderBackground#39213944
  • merge.incomingContentBackground#8990de22
  • merge.incomingHeaderBackground#7c90e144
  • minimap.errorHighlight#EF456875
  • minimap.findMatchHighlight#F9B97575
  • minimap.selectionHighlight#8d9affd4
  • minimap.warningHighlight#F9B97575
  • minimapGutter.addedBackground#A7C966
  • minimapGutter.deletedBackground#EF4568
  • minimapGutter.modifiedBackground#756ADE
  • notificationCenterHeader.foreground#FFD6D1
  • panel.border#2d202e
  • panelSection.dropBackground#9d75a030
  • panelTitle.activeForeground#FF8372
  • panelTitle.inactiveForeground#8c4e61
  • peekView.border#e29962
  • peekViewEditor.background#2C1F2D
  • peekViewEditor.matchHighlightBackground#ff49e443
  • peekViewResult.background#342536
  • peekViewResult.fileForeground#ffd1d1
  • peekViewResult.lineForeground#c7a1a1
  • peekViewResult.matchHighlightBackground#d292bb43
  • peekViewResult.selectionBackground#59403d
  • peekViewTitleDescription.foreground#ceb6a3
  • peekViewTitleLabel.foreground#ffb186
  • progressBar.background#d55385
  • scrollbar.shadow#ff000000
  • scrollbarSlider.activeBackground#985d9885
  • scrollbarSlider.background#67446760
  • scrollbarSlider.hoverBackground#764d7665
  • searchEditor.findMatchBackground#a8abff2e
  • selection.background#db9ab3
  • settings.checkboxBackground#2C1F2D
  • settings.checkboxBorder#ffffff00
  • settings.checkboxForeground#ffacaa
  • settings.dropdownBackground#2C1F2D
  • settings.dropdownBorder#ffffff00
  • settings.dropdownForeground#ffacaa
  • settings.dropdownListBorder#34294f
  • settings.headerForeground#ff7a7a
  • settings.modifiedItemIndicator#9994FF
  • settings.numberInputBackground#2C1F2D
  • settings.numberInputBorder#ffffff00
  • settings.numberInputForeground#ffacaa
  • settings.textInputBackground#2C1F2D
  • settings.textInputBorder#ffffff00
  • settings.textInputForeground#ffacaa
  • sideBar.background#342536
  • sideBar.border#39293B
  • sideBar.foreground#d8a59f
  • sideBarSectionHeader.background#342536
  • sideBarSectionHeader.foreground#FFBCB4
  • sideBarTitle.foreground#8c4e61
  • statusBar.background#342536
  • statusBar.debuggingBackground#ba4a75
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#FFBCB4
  • statusBarItem.activeBackground#ffa6c640
  • statusBarItem.errorBackground#ffdbdb
  • statusBarItem.errorForeground#e54d7f
  • statusBarItem.hoverBackground#ffa6c626
  • statusBarItem.prominentBackground#39222e
  • statusBarItem.prominentHoverBackground#4b3248
  • statusBarItem.remoteBackground#E97869
  • statusBarItem.remoteForeground#2a1d25
  • tab.activeBackground#4b3543
  • tab.activeForeground#FF8372
  • tab.border#3f2e4100
  • tab.inactiveBackground#342536
  • tab.inactiveForeground#e6aeae
  • terminal.ansiBlack#9c6f9f
  • terminal.ansiBlue#8078D1
  • terminal.ansiBrightBlack#9c6f9f
  • terminal.ansiBrightBlue#9994FF
  • terminal.ansiBrightCyan#87DDEE
  • terminal.ansiBrightGreen#A7C966
  • terminal.ansiBrightMagenta#E54386
  • terminal.ansiBrightRed#EF4568
  • terminal.ansiBrightWhite#FFF0F0
  • terminal.ansiBrightYellow#F9B975
  • terminal.ansiCyan#9AE0F0
  • terminal.ansiGreen#A4BC77
  • terminal.ansiMagenta#EB579C
  • terminal.ansiRed#E05470
  • terminal.ansiWhite#FFD6D1
  • terminal.ansiYellow#EBB984
  • terminal.background#342536
  • terminal.foreground#FFD6D1
  • terminalCursor.background#FFD6D1
  • terminalCursor.foreground#bd62ae
  • textBlockQuote.background#39293B
  • textLink.activeForeground#56c7ff
  • textLink.foreground#62B8E2
  • textPreformat.foreground#FFD6D1
  • titleBar.activeBackground#2d202e
  • titleBar.activeForeground#FFB0B0
  • titleBar.inactiveBackground#3b2a3c
  • titleBar.inactiveForeground#8e5a94
  • tree.indentGuidesStroke#643f68
  • widget.shadow#ff000000
  • window.activeBorder#634267

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, source.ocaml comment constant.regexp meta.separator#856085—
string, punctuation.definition.string, source.css support.constant, entity.name.import.go, markup.raw.texttt, markup.inserted.diff, source.scala punctuation.definition.character, constant.character.literal.scala, source.tf entity.name#a3e2f0—
constant.numeric, constant.language, punctuation.separator.decimal.period.php, keyword.operator.null-conditional.cs, punctuation.separator.question-mark.cs, constant.integer.apacheconf, keyword.operator.nullable-type, constant.language punctuation.definition.variable, constant.others.fsharp, keyword.other.unit, string.quoted.double.skinparam.value, source.toml constant, constant.other.color.rgb-value.hex#a586ff—
constant, variable.other.constant, support.constant, punctuation.definition.entity, constant.character.entity, support.variable.magic, markup.quote, entity.name.type.type-parameter.cs, punctuation.bracket.angle, entity.name.function.preprocessor.c, storage.type.scala, entity.helper.apacheconf, variable.language.crystal, punctuation.definition.constant, support.constant punctuation.definition.variable, constant.character.math, support.class.math, source.graphql constant.character, source.reason constant.language.list, source.cpp variable.other.enummember, support.variable.class.hideshow, entity.other.attribute-name.class, meta.attribute.id entity.other.attribute-name, text.html entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name, text.xml entity.other.attribute-name, source.cs entity.other.attribute-name, constant.character.format.placeholder, constant.other.placeholder, source.vue entity.other.attribute-name, entity.other.attribute-name.mjml, source.vue meta.directive punctuation.separator.key-value, meta.definition.attribute-entry punctuation.separator, constant.character, constant.other#bd8bf3—
punctuation.accessor#FFC3C3—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#eb70d7—
keyword, keyword.control, keyword.other.template, keyword.other.substitution, storage.modifier, meta.tag.sgml, constant.other.color, entity.name.section, markup.heading, markup.heading punctuation.definition, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.type.function.pug, text.pug storage.type, text.pug meta.tag.other, source.clojure storage.control, meta.expression.clojure, punctuation.separator.slice.python, punctuation.separator.question-mark.cs, punctuation.definition.parameters.varargs, source.go keyword.operator, punctuation.separator.pointer-access, punctuation.separator.other.ruby, keyword.package, keyword.import, punctuation.definition.keyword, punctuation.separator.hash.cs, variable.parameter.rest.lua, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, source.kotlin storage.type.import, source.kotlin storage.type.package, constant.string.documentation.powershell, punctuation.section.directive, storage.type.rust, punctuation.definition.attribute, punctuation.definition.preprocessor, punctuation.separator.namespace, punctuation.separator.method, keyword.control punctuation.definition.function, source.ocaml variable.interpolation string, source.reason variable.interpolation, punctuation.definition.directive, storage.type.modifier, keyword.other.class.fileds, source.toml entity.other.attribute-name, sharing.modifier, keyword.control.class.ruby, keyword.control.def.ruby, keyword.other.unit, punctuation.definition.constant#F24B99—
variable.language, variable.parameter.function.language.special, markup.bold, markup.italic, punctuation.definition.italic, punctuation.definition.bold, entity.name.tag, variable.language punctuation.definition.variable, keyword.control.clojure, support.type.exception.python, keyword.other.this.cs, keyword.other.base.cs, keyword.other.var.cs, storage.modifier.super, source.go keyword, keyword.function.go, meta.separator, keyword.other.fn.rust, storage.modifier.static.rust, source.r meta.function.r keyword.control.r, storage.type.def, meta.class.identifier storage.modifier, source.scala keyword.declaration, storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation punctuation.definition.inline.tag, entity.tag.apacheconf, keyword.other.julia, source.julia storage.modifier, constant.language.empty-list.haskell, meta.function.powershell storage.type.powershell, keyword.control.fun, punctuation.terminator.function, keyword.other.rust, keyword.other.declaration-specifier.swift, keyword.control.class, keyword.control.def, source.ocaml keyword markup.underline, source.ocaml storage.type markup.underline, binding.fsharp keyword, function.anonymous keyword, function.anonymous keyword.symbol.fsharp, meta.embedded.block variable.language punctuation.definition.variable.php, keyword.declaration.dart, source.wsd keyword.other.class, source.wsd keyword.other.linebegin, keyword.other.skinparam.keyword, keyword.other.nim, markup.deleted.diff, source.tf support.class.variable, meta.function.lua keyword.control.lua, markup.italic punctuation.definition, markup.bold punctuation.definition, markup.block entity.name.tag, storage.modifier.async#F24B99—
storage, storage.type, meta.var.expr, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#FFD6D1
storage.type#9994FFitalic
storage.modifier#9994FFitalic
entity.name.class, meta.class entity.name.type.class#EB579C—
entity.other.inherited-class#EB579C—
variable.function, support.type.property-name, entity.name.function, string.other.link, markup.link, support.type.vendored, support.other.variable, meta.function-call.generic.python, meta.method-call.groovy meta.method.groovy, meta.class.body.groovy meta.method.body.java storage.type.groovy, punctuation.definition.decorator, support.function.any-method, text.tex support.function, text.tex punctuation.definition.function, entity.name.section.fsharp entity.name.section.fsharp, support.variable.class.function, keyword.control.cucumber.table, punctuation.decorator, source.tf support.class#ff7e75
variable.parameter, meta.property-value.css#c79af4—
entity.name.tag#ff7e75—
entity.other.attribute-name#B080E3
support.function, support.type, support.class#7ac3f4
support.constant#f08181
support.other.variable—
invalid#F8F8F0
invalid.deprecated#F8F8F0—
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.builtin.ts#F9B975—
meta.object-literal.key.js, variable.object.property#D894E6—
#FFC3C3—
variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#FFD6D1—
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#A3E2F0—
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF—
meta.tag.js meta.jsx.children.tsx#82AAFF—
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#f0726f—
markup.italic.markdown#c792eaitalic
markup.bold.markdown#e6bd75bold
markup.quote.markdown#697098italic
markup.inline.raw.markdown#80CBC4—
markup.underline.link.markdown, markup.underline.link.image.markdown#94d0fe—
string.other.link.title.markdown, string.other.link.description.markdown#d6deeb—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#89d3ee—
punctuation.definition.metadata.markdown#89d3ee—
beginning.punctuation.definition.list.markdown#82b1ff—
markup.inline.raw.string.markdown#c5e478—
Velvet Mango by miles-crighton - VS Code Theme