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#131313
  • activityBar.background#131313
  • activityBar.border#131313
  • activityBar.foreground#a580e2
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#8454d1
  • activityBarBadge.foreground#98ff59
  • badge.background#a580e2
  • badge.foreground#98ff59
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#1b1b1b
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ffb86cd7
  • button.background#a580e2
  • button.foreground#98ff59
  • button.hoverBackground#8454d1
  • button.secondaryBackground#2f3134
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#45494e
  • checkbox.background#1b1b1b
  • checkbox.border#00000000
  • checkbox.foreground#c3ff9e
  • debugExceptionWidget.background#131313
  • debugExceptionWidget.border#131313
  • debugToolBar.background#131313
  • debugToolBar.border#131313
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#1b1b1b
  • dropdown.border#00000000
  • dropdown.foreground#c3ff9e
  • editor.background#1b1b1b
  • editor.findMatchBackground#a580e25a
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#a580e21a
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#a580e22c
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#323538a3
  • editor.lineHighlightBackground#ffffff0A
  • editor.lineHighlightBorder#282828
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#a580e226
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#ffffff
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#a580e250
  • editorBracketHighlight.foreground1#fff
  • editorBracketHighlight.foreground2#98FF59
  • editorBracketHighlight.foreground3#BD93F9
  • editorBracketHighlight.foreground4#8be9fd
  • editorBracketHighlight.foreground5#ffb86c
  • editorBracketHighlight.foreground6#BD93F9
  • editorBracketHighlight.unexpectedBracket.foreground#ff5e56
  • editorBracketMatch.background#3b3b3b
  • editorBracketMatch.border#ffffff00
  • editorBracketPairGuide.activeBackground1#fff
  • editorBracketPairGuide.activeBackground2#BD93F9
  • editorBracketPairGuide.activeBackground3#98FF59
  • editorBracketPairGuide.activeBackground4#8be9fd
  • editorBracketPairGuide.activeBackground5#ffb86c
  • editorBracketPairGuide.activeBackground6#BD93F9
  • editorBracketPairGuide.background1#252525
  • editorBracketPairGuide.background2#252525
  • editorBracketPairGuide.background3#252525
  • editorBracketPairGuide.background4#252525
  • editorBracketPairGuide.background5#252525
  • editorBracketPairGuide.background6#252525
  • editorCodeLens.foreground#999999
  • editorCursor.background#000000
  • editorCursor.foreground#ffffff
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f48771
  • editorGroup.border#5c5c5c50
  • editorGroup.emptyBackground#1b1b1b
  • editorGroupHeader.border#1b1b1b
  • editorGroupHeader.tabsBackground#131313
  • editorGroupHeader.tabsBorder#ffffff00
  • editorGutter.addedBackground#587c0c
  • editorGutter.background#1b1b1b
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#94151b
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#0c7d9d
  • editorHoverWidget.background#252526
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#98FF59
  • editorLineNumber.foreground#848484
  • editorLink.activeForeground#8454d1
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#131313
  • editorSuggestWidget.border#00000000
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#bd93f9
  • editorSuggestWidget.selectedBackground#a580e24a
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#1b1b1b
  • editorWidget.foreground#c9c9c9
  • editorWidget.resizeBorder#5f5f5f
  • focusBorder#a580e2
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#bd93f9
  • gitDecoration.conflictingResourceForeground#ffb86c
  • gitDecoration.deletedResourceForeground#e25138
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#ffb86c
  • gitDecoration.stageDeletedResourceForeground#e25138
  • gitDecoration.stageModifiedResourceForeground#ffb86c
  • gitDecoration.submoduleResourceForeground#8be9fd
  • gitDecoration.untrackedResourceForeground#98ff59
  • icon.foreground#ffffff
  • input.background#1b1b1b
  • input.border#00000000
  • input.foreground#c3ff9e
  • input.placeholderForeground#8e8e8e
  • inputOption.activeBackground#a580e228
  • inputOption.activeBorder#11111100
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#a580e260
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#a580e21c
  • list.focusBackground#a580e23c
  • list.focusForeground#ffffff
  • list.highlightForeground#a580e2
  • list.hoverBackground#a580e236
  • list.hoverForeground#98FF59
  • list.inactiveSelectionBackground#a580e262
  • list.inactiveSelectionForeground#cccccc
  • listFilterWidget.background#c4592b
  • listFilterWidget.noMatchesOutline#00000000
  • listFilterWidget.outline#00000000
  • menu.background#131313
  • menu.border#00000000
  • menu.foreground#ffffff
  • menu.selectionBackground#a580e23c
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#a580e2
  • menubar.selectionBackground#a580e21a
  • menubar.selectionBorder#ffffff00
  • menubar.selectionForeground#a580e2
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#8e64d3
  • merge.currentHeaderBackground#7c4dc7
  • merge.incomingContentBackground#30284b
  • merge.incomingHeaderBackground#786cff
  • minimap.background#1b1b1b
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#a580e25a
  • minimap.selectionHighlight#a580e226
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#a46aff28
  • notificationCenterHeader.foreground#98ff59
  • notifications.background#131313
  • notifications.border#4949ff00
  • notifications.foreground#ffffff
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#131313
  • panel.background#131313
  • panel.border#5a5a5a59
  • panelSection.border#a2a1a332
  • panelTitle.activeBorder#98ff59
  • panelTitle.activeForeground#a580e2
  • panelTitle.inactiveForeground#ffffff99
  • peekView.border#190033
  • peekViewEditor.background#190033
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#190033
  • peekViewResult.background#190033
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffff
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#131313
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#98ff59
  • pickerGroup.foreground#ffb86c
  • progressBar.background#a580e2
  • scrollbar.shadow#1b1b1b
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#8454d185
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#ffffff
  • sideBar.background#131313
  • sideBar.border#131313
  • sideBar.dropBackground#a580e21c
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#ffffff12
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#a580e2
  • statusBar.background#131313
  • statusBar.border#ff000000
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#c4c2c2
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#a580e236
  • statusBarItem.remoteBackground#131313
  • statusBarItem.remoteForeground#a580e2
  • tab.activeBackground#a580e246
  • tab.activeBorder#ffffff00
  • tab.activeBorderTop#ffffff00
  • tab.activeForeground#98ff59
  • tab.border#00000030
  • tab.hoverBackground#8454d13a
  • tab.hoverBorder#98ff59
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#1b1b1b
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#a2a1a332
  • terminal.foreground#cccccc
  • terminal.selectionBackground#a580e228
  • terminalCursor.background#a580e2
  • terminalCursor.foreground#ffffff
  • textLink.foreground#98ff59
  • titleBar.activeBackground#131313
  • titleBar.activeForeground#e2e2e2
  • titleBar.border#00000000
  • titleBar.inactiveBackground#1d1d1d
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#a580e2b3
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#BD93F9
meta.diff, meta.diff.header#6272A4
markup.inserted#50FA7B
markup.deleted#FF5555
markup.changed#FFB86C
invalid#FF5555underline italic
invalid.deprecated#fffunderline italic
entity.name.filename#F1FA8C
markup.error#FF5555
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#BD93F9bold
markup.italic#F1FA8Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD
markup.inline.raw, markup.raw.restructuredtext#50FA7B
markup.underline.link, markup.underline.link.image#8BE9FD
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#BD93F9
entity.name.directive.restructuredtext, markup.quote#F1FA8Citalic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#50FA7B
punctuation.definition.constant.restructuredtext#BD93F9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#BD93F9
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F8F8F2
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F1FA8C
entity.name.type.class, entity.name.class#98FF59normal
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#98FF59italic
entity.other.inherited-class#8BE9FDitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#BD93F9
comment.block.documentation entity.name.type#fffitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#fff
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#BD93F9
constant.character.escape, constant.character.string.escape, constant.regexp#BD93F9
entity.name.tag#98FF59
entity.other.attribute-name.parent-selector#BD93F9
entity.other.attribute-name#BD93F9italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#FFB86C
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#8BE9FDitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#FFB86Citalic
meta.decorator variable.other.object#8BE9FD
keyword, punctuation.definition.keyword#BD93F9
keyword.control.new, keyword.operator.new#98FF59
meta.selector#FFB86C
support#98FF59italic
support.function.magic, support.variable, variable.other.predefined#BD93F9regular
support.function, support.type.property-name#fffregular
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#FFB86C
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#BD93F9
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#FFB86C
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8BE9FD
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#98FF59italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#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#98FF59italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#BD93F9
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F1FA8C
punctuation.definition.group.capture.regexp#FF79C6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#8BE9FD
punctuation.definition.group.regexp#FFB86C
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#50FA7B
string#FFB86C
punctuation.definition.string.begin, punctuation.definition.string.end#8BE9FD
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE
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#6272A4
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fff
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#FFB86Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fffnormal
meta.selectionset.graphql variable#F1FA8C
meta.selectionset.graphql meta.arguments variable#F8F8F2
entity.name.fragment.graphql, variable.fragment.graphql#8BE9FD
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#F8F8F2
source.shell variable.other#BD93F9
support.constant#BD93F9normal
meta.scope.prerequisites.makefile#F1FA8C
meta.attribute-selector.scss#F1FA8C
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F8F8F2
meta.preprocessor.haskell#6272A4
log.error#FF5555bold
log.warning#F1FA8Cbold
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#BD93F9
meta.object-literal.key#8BE9FD
punctuation.separator, punctuation.separator.continuation, punctuation.terminator#fff
punctuation.definition.string.begin, punctuation.definition.string.end#FFB86C
meta.class#BD93F9
id#BD93F9