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