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#74f9ff
meta.tag, punctuation.terminator.statement.js#f6efeb
source.vue entity.name.tag#1bf5af
source.vue entity.other.attribute-name.html#ff75a0
expression.embedded.vue, source.directive.vue#1bf5af
support.class.builtin.js#74f9ff
string.json#EAD3CB
source.json#f6efeb
constant.language.json.comments#c2fcd9
meta.tag.xml#f6efeb
entity.name.tag.xml, entity.other.attribute-name.xml, punctuation.definition.tag.xml#f6efeb
entity.name.tag.localname.xml#fa7f7f
entity.other.attribute-name.localname.xml#1bf5af
meta.tag.metadata.doctype.html, punctuation.definition.entity.html, variable.control.import.include.pug, meta.tag.sgml.doctype.html#ff75a0
entity.name.tag.html#fa7f7f
entity.other.attribute-name.html, entity.other.attribute-name.tag.pug#1bf5af
text.html.jinja#f6efeb
comment.block.html#EAD3CB
constant.character.entity.named.nbsp.html#f5b5fc
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#fa7f7f
entity.other.attribute-name.attribute#845EC2
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#1bf5af
support.constant.property-value.css#fa7f7fnormal
keyword.other.unit#d2e603
variable.css, variable.argument.css#E3F8FF
variable.scss#f5b5fc
comment.line.scss#EAD3CB
meta.attribute-selector#fff76a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f6efeb
support.function#94fc13
source.ignore, source.ini#ff8b00
comment.line.number-sign.ignore, comment.line.number-sign.ini#fa7f7f
markup.inserted#1bf5af
markup.deleted#e84a5f
markup.changed#ff8b00
invalid#EAD3CBunderline italic
invalid.deprecated#fa7f7funderline italic
entity.name.filename#fff76a
markup.error#e84a5f
markup.underlineunderline
markup.bold#f5b5fcbold
markup.heading#f5b5fcbold
markup.italic#fff76aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#d2e603
markup.inline.raw, markup.raw.restructuredtext#1bf5af
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#1bf5af
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#ff75a0
punctuation.definition.constant.restructuredtext#BD93F9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#f6efeb
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#f6efeb
emphasisitalic
strongbold
header#ffc93c
source#f6efeb
meta.diff, meta.diff.header#845EC2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fff76a
punctuation.definition.group.capture.regexp#f5b5fc
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e84a5f
constant.character.escape, constant.character.string.escape, constant.regexp#BD93F9
punctuation.definition.character-class.regexp#74f9ff
punctuation.definition.group.regexp#ffc93c
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e84a5f
meta.assertion.look-ahead.regexp#94fc13
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#94fc13underline 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#f5b5fc
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#f5b5fc
storage.modifier#f5b5fc
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f5b5fcregular
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#BD93F9italic
variable.object.property, meta.object-literal.key#1bf5af
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#1bf5af
entity.name.function#94fc13
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#BD93F9italic
meta.decorator variable.other.object#BD93F9
keyword, punctuation.definition.keyword#f5b5fc
keyword.control.new, keyword.operator.new#f5b5fcbold
support#74f9ffitalic
support.function, support.type.property-nameregular
support.function.magic, support.variable, variable.other.predefined#BD93F9regular
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#f6efeb
comment#EAD3CB
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#BD93F9
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#BD93F9
constant, variable.other.constant#BD93F9
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#f6efeb
source.shell variable.other#E3F8FF
meta.scope.prerequisites.makefile#fff76a
meta.preprocessor.haskell#BD93F9
Triage theme by Max Miliano - VS Code Theme