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#31285532
  • activityBar.activeBorder#FF79C650
  • activityBar.background#140c21
  • activityBar.border#000000
  • activityBar.foreground#e2e2ea
  • activityBar.inactiveForeground#5A4B81
  • activityBarBadge.background#FF79C6
  • activityBarBadge.foreground#15121E
  • badge.background#312855
  • badge.foreground#e2e2ea
  • breadcrumb.activeSelectionForeground#e2e2ea
  • breadcrumb.background#140c21
  • breadcrumb.focusForeground#e2e2ea
  • breadcrumb.foreground#988bc7
  • breadcrumbPicker.background#15121E
  • button.background#312855
  • button.foreground#e2e2ea
  • contrastBorder#15121E
  • debugToolBar.background#0f0918
  • diffEditor.insertedTextBackground#67e48010
  • diffEditor.removedTextBackground#E9637932
  • dropdown.background#201B2D
  • dropdown.border#15121E
  • dropdown.foreground#e2e2ea
  • editor.background#0f0918
  • editor.findMatchBackground#E89E6450
  • editor.findMatchHighlightBackground#E1E1E628
  • editor.findRangeHighlightBackground#4b5a4475
  • editor.foldBackground#0f0918
  • editor.foreground#e2e2ea
  • editor.hoverHighlightBackground#15121E
  • editor.lineHighlightBackground#201B2D
  • editor.lineHighlightBorder#0f0918
  • editor.rangeHighlightBackground#78D1E110
  • editor.selectionBackground#312855
  • editor.selectionHighlightBackground#3c3550
  • editor.selectionHighlightBorder#E1E1E614
  • editor.snippetFinalTabstopHighlightBackground#0f0918
  • editor.snippetFinalTabstopHighlightBorder#67e480
  • editor.snippetTabstopHighlightBackground#0f0918
  • editor.snippetTabstopHighlightBorder#5A4B81
  • editor.wordHighlightBackground#988bc732
  • editor.wordHighlightBorder#E1E1E614
  • editor.wordHighlightStrongBackground#67e48032
  • editor.wordHighlightStrongBorder#E1E1E614
  • editorCodeLens.foreground#5A4B81
  • editorError.foreground#E96379
  • editorGroup.border#312855
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#15121E
  • editorGutter.addedBackground#67e48050
  • editorGutter.deletedBackground#E9637950
  • editorGutter.modifiedBackground#988bc750
  • editorHoverWidget.background#0f0918
  • editorHoverWidget.border#5A4B81
  • editorIndentGuide.activeBackground#E1E1E62d
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#544776
  • editorLink.activeForeground#988bc7
  • editorMarkerNavigation.background#0f0918
  • editorOverviewRuler.addedForeground#67e48050
  • editorOverviewRuler.border#15121E
  • editorOverviewRuler.currentContentForeground#67e480
  • editorOverviewRuler.deletedForeground#E9637950
  • editorOverviewRuler.errorForeground#E9637950
  • editorOverviewRuler.incomingContentForeground#78D1E1
  • editorOverviewRuler.infoForeground#988bc750
  • editorOverviewRuler.modifiedForeground#988bc750
  • editorOverviewRuler.selectionHighlightForeground#E89E64
  • editorOverviewRuler.warningForeground#E89E6450
  • editorOverviewRuler.wordHighlightForeground#988bc7
  • editorOverviewRuler.wordHighlightStrongForeground#67e480
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#0f0918
  • editorSuggestWidget.foreground#e2e2ea
  • editorSuggestWidget.selectedBackground#312855
  • editorWarning.foreground#988bc7
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#0f0918
  • errorForeground#E96379
  • extensionButton.prominentBackground#67e4805a
  • extensionButton.prominentForeground#e2e2ea
  • extensionButton.prominentHoverBackground#67e4803c
  • focusBorder#312855
  • foreground#e2e2ea
  • gitDecoration.conflictingResourceForeground#E89E64
  • gitDecoration.deletedResourceForeground#E96379
  • gitDecoration.ignoredResourceForeground#988bc780
  • gitDecoration.modifiedResourceForeground#988bc7
  • gitDecoration.untrackedResourceForeground#67e480
  • input.background#0f0918
  • input.border#15121E
  • input.foreground#e2e2ea
  • input.placeholderForeground#5A4B81
  • inputOption.activeBorder#78D1E1
  • inputValidation.errorBorder#E96379
  • inputValidation.infoBorder#FF79C6
  • inputValidation.warningBorder#E89E64
  • list.activeSelectionBackground#3128555a
  • list.activeSelectionForeground#e2e2ea
  • list.dropBackground#312855
  • list.errorForeground#E96379
  • list.focusBackground#4b5a4475
  • list.highlightForeground#988bc7
  • list.hoverBackground#3128553c
  • list.hoverForeground#67e480
  • list.inactiveSelectionBackground#3128555a
  • list.warningForeground#E89E64
  • listFilterWidget.background#201B2D
  • listFilterWidget.noMatchesOutline#E96379
  • listFilterWidget.outline#3c3550
  • merge.currentHeaderBackground#67e4805a
  • merge.incomingHeaderBackground#78D1E15a
  • panel.background#0c0714
  • panel.border#000000
  • panelTitle.activeBorder#FF79C650
  • panelTitle.activeForeground#e2e2ea
  • panelTitle.inactiveForeground#5A4B81
  • peekView.border#312855
  • peekViewEditor.background#0f0918
  • peekViewEditor.matchHighlightBackground#e7de7950
  • peekViewResult.background#0f0918
  • peekViewResult.fileForeground#e2e2ea
  • peekViewResult.lineForeground#e2e2ea
  • peekViewResult.matchHighlightBackground#e7de7950
  • peekViewResult.selectionBackground#312855
  • peekViewResult.selectionForeground#e2e2ea
  • peekViewTitle.background#15121E
  • peekViewTitleDescription.foreground#5A4B81
  • peekViewTitleLabel.foreground#e2e2ea
  • pickerGroup.border#78D1E1
  • pickerGroup.foreground#988bc7
  • progressBar.background#FF79C6
  • scrollbarSlider.activeBackground#312855
  • scrollbarSlider.background#31285564
  • scrollbarSlider.hoverBackground#312855c8
  • selection.background#78D1E1
  • settings.checkboxBackground#0f0918
  • settings.checkboxBorder#15121E
  • settings.checkboxForeground#e2e2ea
  • settings.dropdownBackground#0f0918
  • settings.dropdownBorder#15121E
  • settings.dropdownForeground#e2e2ea
  • settings.headerForeground#e2e2ea
  • settings.modifiedItemIndicator#E89E64
  • settings.numberInputBackground#0f0918
  • settings.numberInputBorder#15121E
  • settings.numberInputForeground#e2e2ea
  • settings.textInputBackground#0f0918
  • settings.textInputBorder#15121E
  • settings.textInputForeground#e2e2ea
  • sideBar.background#0a0510
  • sideBar.border#000000
  • sideBarSectionHeader.background#0f0918
  • sideBarSectionHeader.border#312855
  • sideBarTitle.foreground#e2e2ea
  • statusBar.background#140c21
  • statusBar.border#140c21
  • statusBar.debuggingBackground#FF79C6
  • statusBar.debuggingForeground#15121E
  • statusBar.foreground#e2e2ea
  • statusBar.noFolderBackground#15121E
  • statusBar.noFolderForeground#e2e2ea
  • statusBarItem.hoverBackground#312855
  • statusBarItem.prominentBackground#FF79C6
  • statusBarItem.prominentForeground#15121E
  • statusBarItem.prominentHoverBackground#E89E64
  • statusBarItem.remoteBackground#312855
  • statusBarItem.remoteForeground#e2e2ea
  • tab.activeBackground#140c21
  • tab.activeBorderTop#FF79C650
  • tab.activeForeground#e2e2ea
  • tab.border#15121E
  • tab.inactiveBackground#0f0918
  • tab.inactiveForeground#988bc7aa
  • terminal.ansiBlack#1e0f39
  • terminal.ansiBlue#194ab3
  • terminal.ansiBrightBlack#626483
  • terminal.ansiBrightBlue#78D1E1
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#00F769
  • terminal.ansiBrightMagenta#231548
  • terminal.ansiBrightRed#ff2828
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#E0A91D
  • terminal.ansiCyan#2b243c
  • terminal.ansiGreen#70e27a
  • terminal.ansiMagenta#988bc7
  • terminal.ansiRed#ff5b5b
  • terminal.ansiWhite#e9e9e9
  • terminal.ansiYellow#40c263
  • terminal.background#0c0714
  • terminal.foreground#e2e2ea
  • terminal.selectionBackground#31285532
  • terminalCursor.background#1e0f39
  • terminalCursor.foreground#e2e2ea
  • textLink.activeForeground#67e480
  • textLink.foreground#67e480
  • titleBar.activeBackground#0f0918
  • titleBar.activeForeground#e2e2ea
  • titleBar.inactiveBackground#15121E
  • titleBar.inactiveForeground#5A4B81
  • walkThrough.embeddedEditorBackground#0f0918

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strong—bold
header#78D1E1—
source#e2e2ea—
meta.diff, meta.diff.header#5A4B81—
markup.inserted#67e480—
markup.deleted#E96379—
markup.changed#E89E64—
invalid#E96379underline
invalid.deprecated#e2e2eaunderline
entity.name.filename#e7de79—
markup.error#E96379—
markup.underline—underline
markup.bold#E89E64bold
markup.heading#78D1E1bold
markup.italic#e7de79—
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#988bc7—
markup.inline.raw, markup.raw.restructuredtext#67e480—
markup.underline.link, markup.underline.link.image#988bc7—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF79C6—
entity.name.directive.restructuredtext, markup.quote#e7de79—
meta.separator.markdown#5A4B81—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#67e480—
punctuation.definition.constant.restructuredtext#78D1E1—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#78D1E1—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#e2e2ea—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e7de79—
entity.name.type.class, entity.name.class#988bc7normal
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#78D1E1—
entity.other.inherited-class#988bc7—
comment, punctuation.definition.comment, unused.comment, wildcard.comment#746699—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF79C6—
comment.block.documentation entity.name.type#988bc7—
comment.block.documentation entity.name.type punctuation.definition.bracket#988bc7—
comment.block.documentation variable#E89E64—
constant, variable.other.constant#78D1E1—
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.id#e7de79—
entity.other.attribute-name#67e480—
meta.tag.inline source#e7de79—
entity.name.function, meta.function-call.generic, 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#67e480—
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#E89E64—
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#67e480—
meta.decorator variable.other.object#67e480—
keyword, punctuation.definition.keyword#FF79C6—
keyword.control.new, keyword.operator.new—bold
meta.selector#FF79C6—
support#988bc7—
support.function.magic, support.variable, variable.other.predefined#78D1E1regular
support.function, support.type.property-name—regular
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#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, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#e2e2ea—
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—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#988bc7—
constant.other.date, constant.other.timestamp#E89E64—
variable.other.alias.yaml#67e480underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF79C6regular
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#988bc7—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E89E64—
storage.modifier#FF79C6—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e7de79—
punctuation.definition.group.capture.regexp#FF79C6—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E96379—
punctuation.definition.character-class.regexp#988bc7—
punctuation.definition.group.regexp#E89E64—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E96379—
meta.assertion.look-ahead.regexp#67e480—
string#e7de79—
punctuation.definition.string.begin, punctuation.definition.string.end#e7de79—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7159C1—
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#5A4B81—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e2e2ea—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#E89E64—
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e2e2eanormal
meta.selectionset.graphql variable#e7de79—
meta.selectionset.graphql meta.arguments variable#e2e2ea—
entity.name.fragment.graphql, variable.fragment.graphql#988bc7—
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#e2e2ea—
source.shell variable.other#78D1E1—
support.constant#78D1E1normal
meta.scope.prerequisites.makefile#e7de79—
meta.attribute-selector.scss#e7de79—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#e2e2ea—
meta.preprocessor.haskell#5A4B81—