Skip to main content
CodingTheme

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.activeBorder#BD93F9
  • activityBar.background#222530
  • activityBar.border#BD93F920
  • activityBar.dropBorder#BD93F920
  • activityBar.foreground#BD93F9
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#BD93F9
  • activityBarBadge.foreground#222530
  • activityBarTop.activeBorder#BD93F920
  • activityBarTop.dropBorder#BD93F920
  • badge.background#BD93F9
  • badge.foreground#222530
  • breadcrumb.activeSelectionForeground#BD93F9
  • breadcrumb.background#222530
  • breadcrumb.focusForeground#BD93F9
  • breadcrumb.foreground#95A5D7
  • breadcrumbPicker.background#151824
  • button.background#44475A
  • button.foreground#E8E8E2
  • button.secondaryBackground#222530
  • button.secondaryForeground#E8E8E2
  • button.secondaryHoverBackground#343746
  • checkbox.background#222530
  • commandCenter.background#151824
  • debugToolBar.background#222530
  • diffEditor.insertedTextBackground#40D85920
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#191A2100
  • dropdown.foreground#E8E8E2
  • editor.background#222530
  • editor.findMatchBackground#FFB86C40
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C80
  • editor.foreground#E8E8E2
  • editor.hoverHighlightBackground#8BE9FD50
  • editor.lineHighlightBackground#151824
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#44475A90
  • editor.selectionHighlightBackground#424450ee
  • editor.snippetFinalTabstopHighlightBackground#222530
  • editor.snippetFinalTabstopHighlightBorder#40D859
  • editor.snippetTabstopHighlightBackground#222530
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#40D85950
  • editorBracketHighlight.foreground1#E8E8E2
  • editorBracketHighlight.foreground2#FF79C6
  • editorBracketHighlight.foreground3#8BE9FD
  • editorBracketHighlight.foreground4#40D859
  • editorBracketHighlight.foreground5#BD93F9
  • editorBracketHighlight.foreground6#FFB86C
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorCodeLens.foreground#6272A4
  • editorCursor.background#222530
  • editorCursor.foreground#8BE9FD
  • editorError.foreground#FF5555
  • editorGroup.border#BD93F930
  • editorGroup.dropBackground#BD93F915
  • editorGroup.dropIntoPromptBorder#BD93F920
  • editorGroupHeader.border#222530
  • editorGroupHeader.tabsBackground#222530
  • editorGroupHeader.tabsBorder#BD93F920
  • editorGutter.addedBackground#40D85980
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHint.border#222530
  • editorHoverWidget.background#222530
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground1#D6ACFF28
  • editorIndentGuide.activeBackground2#D6ACFF28
  • editorIndentGuide.activeBackground3#D6ACFF28
  • editorIndentGuide.activeBackground4#D6ACFF28
  • editorIndentGuide.activeBackground5#D6ACFF28
  • editorIndentGuide.activeBackground6#D6ACFF28
  • editorIndentGuide.background1#D6ACFF15
  • editorIndentGuide.background2#D6ACFF15
  • editorIndentGuide.background3#D6ACFF15
  • editorIndentGuide.background4#D6ACFF15
  • editorIndentGuide.background5#D6ACFF15
  • editorIndentGuide.background6#D6ACFF15
  • editorLightBulb.foreground#8BE9FD
  • editorLightBulbAi.foreground#8BE9FD
  • editorLightBulbAutoFix.foreground#8BE9FD
  • editorLineNumber.activeForeground#8BE9FD
  • editorLineNumber.foreground#6272A4AA
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#40D85980
  • editorOverviewRuler.border#22253000
  • editorOverviewRuler.currentContentForeground#40D859
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#BD93F9ee
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#8BE9FD80
  • editorOverviewRuler.selectionHighlightForeground#FFB86Cee
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#8BE9FDee
  • editorOverviewRuler.wordHighlightStrongForeground#40D859ee
  • editorPane.background#151824
  • editorRuler.foreground#FFFFFF1A
  • editorStickyScroll.shadow#ff000000
  • editorSuggestWidget.background#222530
  • editorSuggestWidget.foreground#E8E8E2
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#8BE9FD
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#222530
  • editorWidget.border#BD93F930
  • errorForeground#FF5555
  • extensionButton.prominentBackground#40D85990
  • extensionButton.prominentForeground#E8E8E2
  • extensionButton.prominentHoverBackground#40D85960
  • focusBorder#BD93F930
  • foreground#E8E8E2
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4cc
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#40D859
  • icon.foreground#BD93F9
  • input.background#222530
  • input.border#BD93F930
  • input.foreground#E8E8E2
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#BD93F9
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#FF79C6
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#44475A80
  • list.activeSelectionForeground#8BE9FD
  • list.dropBackground#BD93F915
  • list.errorForeground#FF5555
  • list.focusBackground#44475A75
  • list.highlightForeground#8BE9FD
  • list.hoverBackground#44475A55
  • list.inactiveSelectionBackground#44475A75
  • list.inactiveSelectionForeground#BD93F9
  • list.inactiveSelectionIconForeground#BD93F9
  • list.warningForeground#FFB86C
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#424450
  • menu.background#222530
  • menu.border#BD93F930
  • menu.separatorBackground#BD93F930
  • merge.currentHeaderBackground#40D85990
  • merge.incomingHeaderBackground#BD93F990
  • notificationCenter.border#BD93F930
  • notificationCenterHeader.background#222530
  • notifications.background#222530
  • notifications.border#BD93F930
  • notificationToast.border#BD93F930
  • panel.background#222530
  • panel.border#BD93F930
  • panel.dropBorder#BD93F920
  • panelInput.border#BD93F920
  • panelSection.border#BD93F930
  • panelSection.dropBackground#BD93F915
  • panelSectionHeader.background#151824
  • panelTitle.activeBorder#BD93F9
  • panelTitle.activeForeground#BD93F9
  • panelTitle.inactiveForeground#95A5D7
  • peekView.border#44475A
  • peekViewEditor.background#222530
  • peekViewEditor.matchHighlightBackground#F1FA8C80
  • peekViewResult.background#222530
  • peekViewResult.fileForeground#E8E8E2
  • peekViewResult.lineForeground#E8E8E2
  • peekViewResult.matchHighlightBackground#F1FA8C80
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#E8E8E2
  • peekViewTitle.background#222530
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#8BE9FD
  • pickerGroup.border#BD93F9
  • pickerGroup.foreground#8BE9FD
  • progressBar.background#FF79C6
  • quickInput.background#151824
  • scrollbar.shadow#ff000000
  • scrollbarSlider.activeBackground#BD93F930
  • scrollbarSlider.background#BD93F915
  • scrollbarSlider.hoverBackground#BD93F925
  • selection.background#BD93F9
  • settings.checkboxBackground#222530
  • settings.checkboxBorder#BD93F930
  • settings.checkboxForeground#E8E8E2
  • settings.dropdownBackground#222530
  • settings.dropdownBorder#BD93F930
  • settings.dropdownForeground#E8E8E2
  • settings.headerBorder#BD93F930
  • settings.headerForeground#BD93F9
  • settings.modifiedItemIndicator#BD93F9
  • settings.numberInputBackground#222530
  • settings.numberInputBorder#BD93F930
  • settings.numberInputForeground#E8E8E2
  • settings.textInputBackground#222530
  • settings.textInputBorder#BD93F930
  • settings.textInputForeground#E8E8E2
  • sideBar.background#222530
  • sideBar.border#BD93F920
  • sideBar.dropBackground#BD93F915
  • sideBar.foreground#95A5D7
  • sideBarSectionHeader.background#222530
  • sideBarSectionHeader.border#191A2100
  • sideBarTitle.foreground#BD93F9
  • statusBar.background#222530
  • statusBar.border#BD93F920
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#95A5D7
  • statusBar.noFolderBackground#222530
  • statusBar.noFolderForeground#E8E8E2
  • statusBarItem.compactHoverBackground#222530
  • statusBarItem.hoverBackground#222530AA
  • statusBarItem.hoverForeground#BD93F9
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#222530
  • statusBarItem.remoteForeground#BD93F9
  • statusBarItem.remoteHoverBackground#222530
  • statusBarItem.remoteHoverForeground#8BE9FD
  • tab.activeBackground#222530
  • tab.activeBorder#BD93F9cc
  • tab.activeBorderTop#BD93F9
  • tab.activeForeground#BD93F9cc
  • tab.border#191A2100
  • tab.inactiveBackground#222530
  • tab.inactiveForeground#95A5D7
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#40D859
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#E8E8E2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#222530
  • terminal.border#BD93F920
  • terminal.dropBackground#BD93F915
  • terminal.foreground#E8E8E2
  • terminal.tab.activeBorder#BD93F9
  • terminalCommandDecoration.defaultBackground#8BE9FD
  • terminalCommandDecoration.errorBackground#FF5555
  • terminalCommandDecoration.successBackground#69FF94
  • terminalCursor.background#222530
  • terminalCursor.foreground#8BE9FD
  • terminalOverviewRuler.cursorForeground#8BE9FD
  • textBlockQuote.background#181A21
  • textBlockQuote.border#BD93F9
  • textCodeBlock.background#181A21
  • textLink.activeForeground#FF92DF
  • textLink.foreground#8BE9FD
  • textPreformat.background#181A21
  • textPreformat.foreground#BD93F9
  • titleBar.activeBackground#222530
  • titleBar.activeForeground#95A5D7
  • titleBar.border#BD93F920
  • titleBar.inactiveBackground#222530
  • tree.indentGuidesStroke#BD93F960
  • walkThrough.embeddedEditorBackground#222530
  • welcomePage.progress.background#c3c3c340
  • welcomePage.progress.foreground#8BE9FD
  • welcomePage.tileBackground#8BE9FD10
  • widget.border#BD93F930
  • widget.shadow#ff000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment storage.typeitalic
invalid, invalid.illegalitalic
variable.parameter, parameters variable.functionitalic
keyword.control.export, keyword.control.import, keyword.control.type, keyword.control.as, keyword.control.conditional, keyword.control.flow, keyword.control.or, keyword.control.and, keyword.control.loop, keyword.operator.new, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.delete, keyword.control.trycatch, keyword.control.from, variable.language.this, storage.modifier.async, keyword.control.default, keyword.import, entity.name.function.operatoritalic
entity.other.attribute-name, storage.modifieritalic
comment, invalid, invalid.deprecated, invalid.illegalitalic
comment storage.typeitalic
invalid, invalid.illegalitalic
variable.parameter, parameters variable.functionitalic
keyword.control.export, keyword.control.import, keyword.control.type, keyword.control.as, keyword.control.conditional, keyword.control.flow, keyword.control.or, keyword.control.and, keyword.control.loop, keyword.operator.new, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.delete, keyword.control.trycatch, keyword.control.from, variable.language.this, storage.modifier.async, keyword.control.default, keyword.import, entity.name.function.operatoritalic
entity.other.attribute-name, storage.modifieritalic
comment, invalid, invalid.deprecated, invalid.illegalitalic
emphasisitalic
strongbold
header#BD93F9
meta.diff, meta.diff.header#6272A4
markup.inserted#40D859
markup.deleted#FF5555
markup.changed#FFB86C
invalid#FF5555
invalid.deprecated#FF5555
entity.name.filename#F1FA8C
markup.error#FF5555
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#BD93F9
markup.strikethroughstrikethrough
markup.italic#F1FA8Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD
markup.inline.raw, markup.raw.restructuredtext#40D859
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#FF79C6
entity.name.directive.restructuredtext, markup.quote#F1FA8C
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#40D859
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#E8E8E2
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#8BE9FD
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#BD93F9
entity.other.inherited-class#8BE9FD
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF79C6
comment.block.documentation entity.name.type#8BE9FD
comment.block.documentation entity.name.type punctuation.definition.bracket#8BE9FD
comment.block.documentation variable#FFB86C
constant, variable.other.constant#BD93F9
constant.character.escape, constant.character.string.escape, constant.regexp#FF79C6
entity.name.tag#FF79C6
entity.other.attribute-name.parent-selector#FF79C6
entity.other.attribute-name#40D859
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#40D859
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selection.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#FFB86C
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#40D859
meta.decorator variable.other.object#40D859
keyword, punctuation.definition.keyword#FF79C6
meta.selector#FF79C6
support#8BE9FD
support.function.magic, support.variable, variable.other.predefined#BD93F9
support.function, support.type.property-name
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.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#FF79C6
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#E8E8E2
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#FF79C6
constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace.round, meta.brace.square, meta.brace.curly, constant.other.color, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js, punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.html source.css#BFD5DE60
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#40D859
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF79C6
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.object, meta.return-type.object, 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.object, storage.type.php, storage.type.haskell, storage.type.ocaml#8BE9FD
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#FF79C6
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#40D859
string#F1FA8C
punctuation.definition.string.begin, punctuation.definition.string.end#BFD5DE60
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#E8E8E2
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#FFB86C
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#E8E8E2
meta.selection.graphql variable#F1FA8C
meta.selection.graphql meta.arguments variable#E8E8E2
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#BFD5DE60
source.shell variable.other#BD93F9
support.constant#BD93F9
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#BFD5DE60
meta.preprocessor.haskell#6272A4
log.error#FF5555
log.warning#F1FA8C
keyword.control.export, keyword.control.default#BD93F9

Shiki preview

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

Loading...