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.activeBackground#2b2e4a
  • activityBar.background#2b2e4a
  • activityBar.border#000000
  • activityBar.foreground#f5b5fc
  • activityBar.inactiveForeground#EAD3CB
  • activityBarBadge.background#f5b5fc
  • activityBarBadge.foreground#f6efeb
  • badge.background#4d4d4d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#f6efeb
  • breadcrumb.background#2d334a
  • breadcrumb.focusForeground#f6efeb
  • breadcrumb.foreground#f6efeb
  • button.background#7C6FFF
  • button.foreground#f6efeb
  • button.hoverBackground#ff75a0
  • button.secondaryBackground#2d334a
  • button.secondaryForeground#f5b5fc
  • button.secondaryHoverBackground#2d334a
  • checkbox.background#2d334a
  • checkbox.border#000000
  • checkbox.foreground#cccccc
  • debugExceptionWidget.background#2d334a
  • debugExceptionWidget.border#000000
  • debugToolBar.background#2d334a
  • debugToolBar.border#000000
  • diffEditor.border#f5b5fc
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2d334a
  • dropdown.border#000000
  • dropdown.foreground#cccccc
  • editor.background#2b2e4a
  • editor.findMatchBackground#515c6a
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#f6efeb
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#ffffff0A
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#343a6d
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#f5b5fc
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.background#000000
  • editorCursor.foreground#f5b5fc
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#e84a5f
  • editorGroup.border#444444
  • editorGroupHeader.tabsBackground#2b2e4a
  • editorGutter.addedBackground#94fc13
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#e84a5f
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#00bcd4
  • editorHoverWidget.background#2b2e4a
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#f6efeb
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#74f9ff
  • editorLineNumber.activeForeground#f5b5fc
  • editorLineNumber.foreground#f6efeb
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#2d334a
  • editorMarkerNavigationError.background#f5b5fc
  • editorMarkerNavigationInfo.background#f5b5fc
  • editorMarkerNavigationWarning.background#f5b5fc
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#252526
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#0097fb
  • editorSuggestWidget.selectedBackground#062f4a
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#fff76a
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#2b2e4a
  • editorWidget.foreground#f6efeb
  • editorWidget.resizeBorder#f5b5fc
  • focusBorder#000000
  • foreground#f6efeb
  • gitDecoration.addedResourceForeground#94fc13
  • gitDecoration.conflictingResourceForeground#7C6FFF
  • gitDecoration.deletedResourceForeground#e84a5f
  • gitDecoration.ignoredResourceForeground#EAD3CB
  • gitDecoration.modifiedResourceForeground#74f9ff
  • gitDecoration.stageDeletedResourceForeground#f5b5fc
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#74f9ff
  • gitDecoration.untrackedResourceForeground#1bf5af
  • icon.foreground#f6efeb
  • input.background#2d334a
  • input.border#000000
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#f5b5fc
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#262525
  • list.activeSelectionForeground#f5b5fc
  • list.dropBackground#383b3d
  • list.focusBackground#2d334a
  • list.focusForeground#cccccc
  • list.highlightForeground#f5b5fc
  • list.hoverBackground#2d334a
  • list.hoverForeground#f5b5fc
  • list.inactiveSelectionBackground#2d334a
  • list.inactiveSelectionForeground#ead3cb
  • listFilterWidget.background#e84a5f
  • listFilterWidget.noMatchesOutline#e84a5f
  • listFilterWidget.outline#00000000
  • menu.background#2b2e4a
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#2d334a
  • menu.selectionBorder#00000000
  • menu.selectionForeground#f5b5fc
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#2d334a
  • minimap.errorHighlight#e84a5f
  • minimap.findMatchHighlight#515c6a
  • minimap.selectionHighlight#343a6d
  • minimap.warningHighlight#fff76a
  • minimapGutter.addedBackground#94fc13
  • minimapGutter.deletedBackground#e84a5f
  • minimapGutter.modifiedBackground#00bcd4
  • notificationCenter.border#f5b5fc
  • notificationCenterHeader.background#2b2e4a
  • notificationCenterHeader.foreground#f5b5fc
  • notifications.background#2d334a
  • notifications.border#f5b5fc
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#e84a5f
  • notificationsInfoIcon.foreground#74f9ff
  • notificationsWarningIcon.foreground#fff76a
  • notificationToast.border#f5b5fc
  • panel.background#2b2e4a
  • panel.border#000000
  • panelSection.border#80808059
  • panelTitle.activeBorder#f5b5fc
  • panelTitle.activeForeground#f5b5fc
  • panelTitle.inactiveForeground#f5b5fc
  • peekView.border#f5b5fc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#2b2e4a
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#2b2e4a
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#f5b5fc
  • progressBar.background#f5b5fc
  • scrollbar.shadow#f5b5fc
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#993d59
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#f6efeb
  • sideBar.background#2b2e4a
  • sideBar.border#000000
  • sideBar.dropBackground#383b3d
  • sideBar.foreground#f6efeb
  • sideBarSectionHeader.background#2d334a
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#f5b5fc
  • sideBarTitle.foreground#f5b5fc
  • statusBar.background#ff75a0
  • statusBar.border#000000
  • statusBar.debuggingBackground#e84a5f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#f6efeb
  • statusBar.noFolderBackground#f5b5fc
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#ff75a0
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#2d334a
  • tab.activeBorder#f5b5fc
  • tab.activeBorderTop#00000000
  • tab.activeForeground#f5b5fc
  • tab.border#000000
  • tab.inactiveBackground#2b2e4a
  • tab.inactiveForeground#f6efeb
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7c6fff
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#b2ebf2
  • terminal.ansiBrightCyan#e3f8ff
  • terminal.ansiBrightGreen#94fc13
  • terminal.ansiBrightMagenta#f5b5fc
  • terminal.ansiBrightRed#fa7f7f
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#fff76a
  • terminal.ansiCyan#74f9ff
  • terminal.ansiGreen#d2e603
  • terminal.ansiMagenta#f5b5fc
  • terminal.ansiRed#e84a5f
  • terminal.ansiWhite#74f9ff
  • terminal.ansiYellow#ffc93c
  • terminal.border#80808059
  • terminal.foreground#1bf5af
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#f5b5fc
  • terminalCursor.foreground#ffffff
  • textLink.foreground#f5b5fc
  • titleBar.activeBackground#2b2e4a
  • titleBar.activeForeground#f6efeb
  • titleBar.border#00000000
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.class.component#82ecf1
meta.tag, punctuation.terminator.statement.js#f3f0ee
source.vue entity.name.tag#33dda6
source.vue entity.other.attribute-name.html#f183a5
expression.embedded.vue, source.directive.vue#33dda6
support.class.builtin.js#82ecf1
string.json#e3d7d2
source.json#f3f0ee
constant.language.json.comments#c8f6da
meta.tag.xml#f3f0ee
entity.name.tag.xml, entity.other.attribute-name.xml, punctuation.definition.tag.xml#f3f0ee
entity.name.tag.localname.xml#ed8c8c
entity.other.attribute-name.localname.xml#33dda6
meta.tag.metadata.doctype.html, punctuation.definition.entity.html, variable.control.import.include.pug, meta.tag.sgml.doctype.html#f183a5
entity.name.tag.html#ed8c8c
entity.other.attribute-name.html, entity.other.attribute-name.tag.pug#33dda6
text.html.jinja#f3f0ee
comment.block.html#e3d7d2
constant.character.entity.named.nbsp.html#efbdf4
string.quoted.pug#f0ea79
keyword.other, variable.interpolation.scss, support.constant.media#f183a5normal
support.type.vendored.property-name.css#f183a5
meta.selector, meta.property-list.css, meta.at-rule.media.header, meta.definition.variable.css, punctuation.separator.list.comma.css, punctuation.separator.key-value.css, entity.other.keyframe-offset.css#f183a5
meta.selector, meta.property-list.scss, meta.at-rule.media.header, meta.definition.variable.scss, punctuation.separator.list.comma.scss, punctuation.separator.key-value.scss, entity.other.keyframe-offset.scss#f183a5
entity.name.tag#ed8c8c
entity.other.attribute-name.attribute#8974ac
entity.other.attribute-name.id#ebc04f
entity.other.attribute-name.class#82ecf1
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#887df1
support.type.property-name#33dda6
support.constant.property-value.css#ed8c8cnormal
keyword.other.unit#bfcf1a
variable.css, variable.argument.css#e6f7fc
variable.scss#efbdf4
comment.line.scss#e3d7d2
meta.attribute-selector#f0ea79
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f3f0ee
support.function#91e42b
source.ignore, source.ini#e68919
comment.line.number-sign.ignore, comment.line.number-sign.ini#ed8c8c
markup.inserted#33dda6
markup.deleted#d45e6e
markup.changed#e68919
invalid#e3d7d2underline italic
invalid.deprecated#ed8c8cunderline italic
entity.name.filename#f0ea79
markup.error#d45e6e
markup.underlineunderline
markup.bold#efbdf4bold
markup.heading#efbdf4bold
markup.italic#f0ea79italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#bfcf1a
markup.inline.raw, markup.raw.restructuredtext#33dda6
markup.underline.link, markup.underline.link.image#82ecf1
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#82ecf1
entity.name.directive.restructuredtext, markup.quote#82ecf1italic
meta.separator.markdown#33dda6
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#f183a5
punctuation.definition.constant.restructuredtext#bf9eee
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#f3f0ee
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#82ecf1
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f3f0ee
emphasisitalic
strongbold
header#ebc04f
source#f3f0ee
meta.diff, meta.diff.header#8974ac
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f0ea79
punctuation.definition.group.capture.regexp#efbdf4
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d45e6e
constant.character.escape, constant.character.string.escape, constant.regexp#bf9eee
punctuation.definition.character-class.regexp#82ecf1
punctuation.definition.group.regexp#ebc04f
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d45e6e
meta.assertion.look-ahead.regexp#91e42b
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#82ecf1
constant.other.date, constant.other.timestamp#ebc04f
variable.other.alias.yaml#91e42bunderline italic
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#efbdf4
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#efbdf4
storage.modifier#efbdf4
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#efbdf4regular
entity.name.type.class, entity.name.class#82ecf1normal
entity.other.inherited-class#82ecf1italic
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#bf9eeeitalic
variable.object.property, meta.object-literal.key#33dda6
entity.name.function.member, meta.tag.attributes, meta.function-call.generic, meta.function-call.object, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#33dda6
entity.name.function#91e42b
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.function.parameter.no-default.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#ebc04fitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#bf9eeeitalic
meta.decorator variable.other.object#bf9eee
keyword, punctuation.definition.keyword#efbdf4
keyword.control.new, keyword.operator.new#efbdf4bold
support#82ecf1italic
support.function, support.type.property-nameregular
support.function.magic, support.variable, variable.other.predefined#bf9eeeregular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#82ecf1italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ebc04f
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#f3f0ee
comment#e3d7d2
string.quoted.double, string.quoted.single, string.template, punctuation.definition.string#f0ea79
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#bf9eee
meta.definition.variable, meta.function variable.other.readwrite#e6f7fc
constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e6f7fc
variable.other.php#bf9eee
constant, variable.other.constant#bf9eee
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ebc04fitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e6f7fcnormal
meta.selectionset.graphql variable#f0ea79
meta.selectionset.graphql meta.arguments variable#ebc04f
entity.name.fragment.graphql, variable.fragment.graphql#82ecf1
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#f3f0ee
source.shell variable.other#e6f7fc
meta.scope.prerequisites.makefile#f0ea79
meta.preprocessor.haskell#bf9eee