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#142531
  • activityBar.border#142531
  • activityBar.foreground#e1effa
  • activityBarBadge.background#44596b
  • activityBarBadge.foreground#ffffff
  • badge.background#5f7e97
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#7d82b6
  • breadcrumbPicker.background#001122
  • button.background#374d8b
  • button.foreground#ffffff
  • button.hoverBackground#7e57c2
  • contrastBorder#122d42
  • debugExceptionWidget.background#142531
  • debugExceptionWidget.border#5f7e97
  • debugToolBar.background#142531
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#addb6733
  • diffEditor.removedTextBackground#ef535033
  • diffEditor.removedTextBorder#ef53504d
  • dropdown.background#142531
  • dropdown.border#5f7e97
  • dropdown.foreground#ffffffcc
  • editor.background#142531
  • editor.findMatchBackground#183e5e79
  • editor.findMatchHighlightBackground#14465e5d
  • editor.foreground#d6deeb
  • editor.hoverHighlightBackground#533f755a
  • editor.inactiveSelectionBackground#6254ade3
  • editor.lineHighlightBackground#0003
  • editor.rangeHighlightBackground#7e57c25a
  • editor.selectionBackground#354780ad
  • editor.selectionHighlightBackground#3a7bb1b9
  • editor.wordHighlightBackground#7c346833
  • editor.wordHighlightStrongBackground#6a357933
  • editorBracketMatch.background#5f7e974d
  • editorCodeLens.foreground#5e82ceb4
  • editorCursor.foreground#406d92
  • editorError.foreground#EF5350
  • editorGroup.border#142531
  • editorGroup.dropBackground#7e57c273
  • editorGroup.emptyBackground#142531
  • editorGroupHeader.noTabsBackground#142531
  • editorGroupHeader.tabsBackground#142531
  • editorGroupHeader.tabsBorder#262A39
  • editorGutter.addedBackground#9CCC65
  • editorGutter.background#142531
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#e2b93d
  • editorHoverWidget.background#142531
  • editorHoverWidget.border#5f7e97
  • editorIndentGuide.activeBackground#7E97AC
  • editorIndentGuide.background#5e81ce52
  • editorLineNumber.activeForeground#C5E4FD
  • editorLineNumber.foreground#294f6d
  • editorMarkerNavigation.background#31364a
  • editorMarkerNavigationError.background#EF5350
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#7e57c2
  • editorOverviewRuler.currentContentForeground#7e57c2
  • editorOverviewRuler.incomingContentForeground#7e57c2
  • editorRuler.foreground#5e81ce52
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#d6deeb
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#5f7e97
  • editorWarning.foreground#b39554
  • editorWidget.background#31364a
  • editorWidget.border#262A39
  • errorForeground#EF5350
  • extensionButton.prominentBackground#1b4f80cc
  • extensionButton.prominentForeground#ffffffcc
  • extensionButton.prominentHoverBackground#2371b9cc
  • focusBorder#122d42
  • foreground#99a2b3
  • gitDecoration.conflictingResourceForeground#b8b08ccc
  • gitDecoration.deletedResourceForeground#EF535090
  • gitDecoration.ignoredResourceForeground#395a75
  • gitDecoration.modifiedResourceForeground#a2bffc
  • gitDecoration.untrackedResourceForeground#addb67ff
  • input.background#0b253a
  • input.border#5f7e97
  • input.foreground#ffffffcc
  • input.placeholderForeground#5f7e97
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#AB0300F2
  • inputValidation.errorBorder#EF5350
  • inputValidation.infoBackground#00589EF2
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#675700F2
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#234d708c
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#2e4e64
  • list.focusBackground#455c72
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#0d4974
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#0e293f
  • list.inactiveSelectionForeground#5f7e97
  • list.invalidItemForeground#975f94
  • merge.currentHeaderBackground#5f7e97
  • merge.incomingHeaderBackground#7e57c25a
  • meta.objectliteral.js#82AAFF
  • minimap.findMatchHighlight#aae2d1
  • minimap.selectionHighlight#679e20
  • minimapSlider.activeBackground#446ba55e
  • minimapSlider.background#8897b944
  • minimapSlider.hoverBackground#767aa138
  • notificationCenter.border#262a39
  • notificationLink.foreground#80CBC4
  • notifications.background#021f35
  • notifications.border#262a39
  • notifications.foreground#ffffffcc
  • notificationToast.border#262a39
  • panel.background#142531
  • panel.border#1e2a33
  • panelTitle.activeBorder#5f7e97
  • panelTitle.activeForeground#ffffffcc
  • panelTitle.inactiveForeground#d6deeb80
  • peekView.border#5f7e97
  • peekViewEditor.background#142531
  • peekViewEditor.matchHighlightBackground#7e57c25a
  • peekViewResult.background#142531
  • peekViewResult.fileForeground#5f7e97
  • peekViewResult.lineForeground#5f7e97
  • peekViewResult.matchHighlightBackground#ffffffcc
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#5f7e97
  • peekViewTitle.background#142531
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#5f7e97
  • pickerGroup.border#142531
  • pickerGroup.foreground#d1aaff
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#4373c2
  • sideBar.background#142531
  • sideBar.border#142531
  • sideBar.foreground#5e768b
  • sideBarSectionHeader.background#142836e0
  • sideBarSectionHeader.foreground#60778b
  • sideBarTitle.foreground#546d81
  • source.elm#5f7e97
  • statusBar.background#142531
  • statusBar.border#262A39
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#7990a3
  • statusBar.noFolderBackground#142531
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#232f57
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • string.quoted.single.js#ffffff
  • symbolIcon.unitForeground#000
  • tab.activeBackground#193d5a
  • tab.activeBorder#262A39
  • tab.activeForeground#d2dee7
  • tab.border#272B3B
  • tab.inactiveBackground#152836
  • tab.inactiveForeground#728fa7
  • tab.unfocusedActiveBorder#33384d
  • tab.unfocusedActiveForeground#5f7e97
  • tab.unfocusedInactiveForeground#5f7e97
  • terminal.ansiBlack#142531
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#7fdbca
  • terminal.ansiBrightGreen#5ac585
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#500d0c
  • terminal.ansiBrightWhite#8a7373
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#03f841
  • terminal.ansiGreen#3bb19d
  • terminal.ansiMagenta#7795d6
  • terminal.ansiRed#d43532
  • terminal.ansiWhite#7e2929
  • terminal.ansiYellow#5c99ca
  • terminal.selectionBackground#5086aa4d
  • terminalCursor.background#1d7fcf
  • titleBar.activeBackground#142531
  • titleBar.activeForeground#eeefff
  • titleBar.inactiveBackground#010e1a
  • walkThrough.embeddedEditorBackground#142531
  • welcomePage.buttonBackground#142531
  • welcomePage.buttonHoverBackground#142531
  • widget.shadow#26485e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#a2bffc
markup.deleted.diff#EF535090
markup.inserted.diff#addb67ff
Global settings#d6deeb
comment#637777
string#8cdf89
string.quoted, variable.other.readwrite.js#bbf897dc
support.constant.math#addb67
constant.numeric, constant.character.numeric#F78C6C
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF
constant.character, constant.other#82AAFF
constant.character.escape#F78C6C
string.regexp, string.regexp keyword.other#5ca7e4
meta.function punctuation.separator.comma#5f7e97
variable#addb67
punctuation.accessor, keyword#7f678f
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#c792ea
storage.type#c792ea
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#658b6b
entity.other.inherited-class#addb67
entity.name.function#c792ea
punctuation.definition.tag, meta.tag#57b1db
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#f06c6c
entity.other.attribute-name#db78df
meta.selector.css#fff
entity.name.tag.custom#a4c277
support.function, support.constant#82AAFF
support.constant.meta.property-value#7fdbca
support.type, support.class#addb67
support.variable.dom#addb67
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#7fdbca
keyword.operator.relational#c792ea
keyword.operator.assignment#c792ea
keyword.operator.arithmetic#c792ea
keyword.operator.bitwise#c792ea
keyword.operator.increment#c792ea
keyword.operator.ternary#c792ea
comment.line.double-slash#637777
object#cdebf7
constant.language.null#ff5874
meta.brace#d6deeb
meta.delimiter.period#c792ea
punctuation.definition.string#d9f5dd
punctuation.definition.string.begin.markdown#c9475d
constant.language.boolean#9ce979
object.comma#ffffff
variable.parameter.function#7fdbca
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4
meta.property-list entity.name.tag.reference#57eaf1
constant.other.color.rgb-value punctuation.definition.constant#a6bee2
constant.other.color#dbdad4
keyword.other.unit#f17f63
meta.selector#c792ea
entity.other.attribute-name.id#FAD430
meta.property-name#5f9c96
entity.name.tag.doctype, meta.tag.sgml.doctype#c792ea
punctuation.definition.parameters#a6c2ab
keyword.control.operator#76aca2
keyword.operator.logical#c792ea
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#7ba79e
variable.other.object.property#faf39f
variable.other.object.js
entity.name.function#82AAFF
keyword.control.conditional.js, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#c792ea
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#cfd8d6
support.function#87a35e
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#7fdbca
support.variable.property#a1afad
variable.function#82AAFF
variable.interpolation#ec5f67
meta.function-call#82AAFF
punctuation.section.embedded#b68482
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#d6deeb
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd
string.template meta.template.expression#d3423e
string.template punctuation.definition.string#47d45f
italic#c792eaitalic
bold#addb67bold
quote#697098
raw#80CBC4
variable.assignment.coffee#31e1eb
variable.parameter.function.coffee#d6deeb
variable.assignment.coffee#7fdbca
variable.other.readwrite.cs#d6deeb
entity.name.type.class.cs, storage.type.cs#82AAFF
entity.name.type.namespace.cs#B2CCD6
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#2eee8e
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#042721
keyword.other.unit.css#726941
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#b6978e
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF
source.elixir entity.name.function#addb67
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF
source.elixir punctuation.definition.string#addb67
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#addb67
source.elixir .punctuation.binary.elixir#c792ea
constant.keyword.clojure#7fdbca
source.go meta.function-call.go#DDDDDD
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#c792ea
source.go constant.language.go, source.go constant.other.placeholder.go#ff5874
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#7fdbcaff
meta.namespace-block.cpp#e0dec6
storage.type.language.primitive.cpp#ff5874
meta.preprocessor.macro.cpp#d6deeb
variable.parameter#ffcb8b
variable.other.readwrite.powershell#82AAFF
support.function.powershell#7fdbcaff
entity.other.attribute-name.id.html#addb67
punctuation.definition.tag.html#ac8b6c
meta.tag.sgml.doctype.html#c792ea
meta.class entity.name.type.class.js#9e7849
meta.method.declaration storage.type.js#82AAFF
terminator.js#d6deeb
meta.js punctuation.definition.js#d6deeb
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#5f7e97
variable.other.jsdoc, variable.other.phpdoc#78ccf0
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#d6deeb
variable.parameter.function.js#7986E7
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#d6deeb
variable.js, variable.other.js#d6deeb
entity.name.type.js, entity.name.type.module.js#8fbaf1
support.class.js#d6deeb
support.type.property-name.json#12FDFF
support.constant.json#274d52
meta.structure.dictionary.value.json string.quoted.double#0AFA92
string.quoted.double.json punctuation.definition.string.json#bfd1cf
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#be8891
variable.other.object.js#9cd4ca
variable.other.ruby#d6deeb
entity.name.type.class.ruby#ecc48d
constant.language.symbol.hashkey.ruby#7fdbca
entity.name.tag.less#7fdbca
keyword.other.unit.css#FFEB95
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#82b1ff
markup.italic.markdown#c792eaitalic
markup.bold.markdown#addb67bold
markup.quote.markdown#697098
markup.inline.raw.markdown#80CBC4
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a
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#82b1ff
punctuation.definition.metadata.markdown#7fdbca
beginning.punctuation.definition.list.markdown#82b1ff
markup.inline.raw.string.markdown#addb67
variable.other.php#bec5d4
support.class.php#ffcb8b
meta.function-call.php punctuation#d6deeb
variable.other.global.php#addb67
variable.other.global.php punctuation.definition.variable#addb67
constant.language.python#ff5874
variable.parameter.function.python, meta.function-call.arguments.python#82AAFF
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#d6deeb
entity.name.function.decorator.python#addb67
source.python variable.language.special#8EACE3
keyword.control#c792ea
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#addb67
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C
entity.name.tag.scss, entity.name.tag.sass#7fdbca
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#d6deeb
entity.name.type.ts, entity.name.type.tsx#ffcb8b
support.class.node.ts, support.class.node.tsx#82AAFF
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#5f7e97
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#d6deeb
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF
meta.tag.js meta.jsx.children.tsx#82AAFF
entity.name.tag.yaml#7fdbca
variable.other.readwrite.js, variable.parameter#d7dbe0
support.class.component.js, support.class.component.tsx#f78c6c
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#d6deeb
meta.class entity.name.type.class.tsx#ffcb8b
entity.name.type.tsx, entity.name.type.module.tsx#ffcb8b
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#82AAFF
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Vampire Theme - Coding Theme