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#282c4d
  • 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#74f9ff
meta.tag, punctuation.terminator.statement.js#f7efea
source.vue entity.name.tag#11ffb3
source.vue entity.other.attribute-name.html#ff75a0
expression.embedded.vue, source.directive.vue#11ffb3
support.class.builtin.js#74f9ff
string.json#eed1c7
source.json#f7efea
constant.language.json.comments#bfffd8
meta.tag.xml#f7efea
entity.name.tag.xml, entity.other.attribute-name.xml, punctuation.definition.tag.xml#f7efea
entity.name.tag.localname.xml#ff7a7a
entity.other.attribute-name.localname.xml#11ffb3
meta.tag.metadata.doctype.html, punctuation.definition.entity.html, variable.control.import.include.pug, meta.tag.sgml.doctype.html#ff75a0
entity.name.tag.html#ff7a7a
entity.other.attribute-name.html, entity.other.attribute-name.tag.pug#11ffb3
text.html.jinja#f7efea
comment.block.html#eed1c7
constant.character.entity.named.nbsp.html#f7b2ff
string.quoted.pug#fff76a
keyword.other, variable.interpolation.scss, support.constant.media#ff75a0normal
support.type.vendored.property-name.css#ff75a0
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#ff75a0
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#ff75a0
entity.name.tag#ff7a7a
entity.other.attribute-name.attribute#8153cd
entity.other.attribute-name.id#ffc93c
entity.other.attribute-name.class#74f9ff
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#7c6fff
support.type.property-name#11ffb3
support.constant.property-value.css#ff7a7anormal
keyword.other.unit#d4e900
variable.css, variable.argument.css#e3f8ff
variable.scss#f7b2ff
comment.line.scss#eed1c7
meta.attribute-selector#fff76a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f7efea
support.function#94ff10
source.ignore, source.ini#ff8b00
comment.line.number-sign.ignore, comment.line.number-sign.ini#ff7a7a
markup.inserted#11ffb3
markup.deleted#f24058
markup.changed#ff8b00
invalid#eed1c7underline italic
invalid.deprecated#ff7a7aunderline italic
entity.name.filename#fff76a
markup.error#f24058
markup.underlineunderline
markup.bold#f7b2ffbold
markup.heading#f7b2ffbold
markup.italic#fff76aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#d4e900
markup.inline.raw, markup.raw.restructuredtext#11ffb3
markup.underline.link, markup.underline.link.image#74f9ff
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#74f9ff
entity.name.directive.restructuredtext, markup.quote#74f9ffitalic
meta.separator.markdown#11ffb3
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ff75a0
punctuation.definition.constant.restructuredtext#bc8dff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#f7efea
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#74f9ff
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f7efea
emphasisitalic
strongbold
header#ffc93c
source#f7efea
meta.diff, meta.diff.header#8153cd
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fff76a
punctuation.definition.group.capture.regexp#f7b2ff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f24058
constant.character.escape, constant.character.string.escape, constant.regexp#bc8dff
punctuation.definition.character-class.regexp#74f9ff
punctuation.definition.group.regexp#ffc93c
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f24058
meta.assertion.look-ahead.regexp#94ff10
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#74f9ff
constant.other.date, constant.other.timestamp#ffc93c
variable.other.alias.yaml#94ff10underline 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#f7b2ff
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#f7b2ff
storage.modifier#f7b2ff
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f7b2ffregular
entity.name.type.class, entity.name.class#74f9ffnormal
entity.other.inherited-class#74f9ffitalic
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#bc8dffitalic
variable.object.property, meta.object-literal.key#11ffb3
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#11ffb3
entity.name.function#94ff10
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#ffc93citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#bc8dffitalic
meta.decorator variable.other.object#bc8dff
keyword, punctuation.definition.keyword#f7b2ff
keyword.control.new, keyword.operator.new#f7b2ffbold
support#74f9ffitalic
support.function, support.type.property-nameregular
support.function.magic, support.variable, variable.other.predefined#bc8dffregular
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#74f9ffitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffc93c
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#f7efea
comment#eed1c7
string.quoted.double, string.quoted.single, string.template, punctuation.definition.string#fff76a
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#bc8dff
meta.definition.variable, meta.function variable.other.readwrite#e3f8ff
constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e3f8ff
variable.other.php#bc8dff
constant, variable.other.constant#bc8dff
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffc93citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e3f8ffnormal
meta.selectionset.graphql variable#fff76a
meta.selectionset.graphql meta.arguments variable#ffc93c
entity.name.fragment.graphql, variable.fragment.graphql#74f9ff
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#f7efea
source.shell variable.other#e3f8ff
meta.scope.prerequisites.makefile#fff76a
meta.preprocessor.haskell#bc8dff
Triage theme by Max Miliano - VS Code Theme