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#513A6940
  • activityBar.activeBorder#D145ED80
  • activityBar.background#2C213A
  • activityBar.foreground#F3FCEE
  • activityBar.inactiveForeground#5A3485
  • activityBarBadge.background#D145ED
  • activityBarBadge.foreground#191622
  • badge.background#513A69
  • badge.foreground#F3FCEE
  • breadcrumb.activeSelectionForeground#F3FCEE
  • breadcrumb.background#191622
  • breadcrumb.focusForeground#F3FCEE
  • breadcrumb.foreground#5A3485
  • breadcrumbPicker.background#15121E
  • button.background#513A69
  • button.foreground#F3FCEE
  • contrastBorder#15121E
  • debugToolBar.background#13111B
  • diffEditor.insertedTextBackground#3DEB1E20
  • diffEditor.removedTextBackground#F7234350
  • dropdown.background#2C213A
  • dropdown.border#15121E
  • dropdown.foreground#F3FCEE
  • editor.background#191622
  • editor.findMatchBackground#FD762380
  • editor.findMatchHighlightBackground#F3FCEE40
  • editor.findRangeHighlightBackground#364954
  • editor.foldBackground#13111B
  • editor.foreground#F3FCEE
  • editor.hoverHighlightBackground#15121E
  • editor.lineHighlightBackground#2C213A
  • editor.lineHighlightBorder#191622
  • editor.rangeHighlightBackground#CBFFAD15
  • editor.selectionBackground#513A69
  • editor.selectionHighlightBackground#252131
  • editor.snippetFinalTabstopHighlightBackground#191622
  • editor.snippetFinalTabstopHighlightBorder#3DEB1E
  • editor.snippetTabstopHighlightBackground#191622
  • editor.snippetTabstopHighlightBorder#5A3485
  • editor.wordHighlightBackground#9064BB50
  • editor.wordHighlightStrongBackground#3DEB1E50
  • editorCodeLens.foreground#5A3485
  • editorError.foreground#F72343
  • editorGroup.border#513A69
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#15121E
  • editorGutter.addedBackground#3DEB1E80
  • editorGutter.deletedBackground#F7234380
  • editorGutter.modifiedBackground#9064BB80
  • editorHoverWidget.background#191622
  • editorHoverWidget.border#5A3485
  • editorIndentGuide.activeBackground#F3FCEE45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#5A3485
  • editorLink.activeForeground#9064BB
  • editorMarkerNavigation.background#13111B
  • editorOverviewRuler.addedForeground#3DEB1E80
  • editorOverviewRuler.border#15121E
  • editorOverviewRuler.currentContentForeground#3DEB1E
  • editorOverviewRuler.deletedForeground#F7234380
  • editorOverviewRuler.errorForeground#F7234380
  • editorOverviewRuler.incomingContentForeground#CBFFAD
  • editorOverviewRuler.infoForeground#9064BB80
  • editorOverviewRuler.modifiedForeground#9064BB80
  • editorOverviewRuler.selectionHighlightForeground#FD7623
  • editorOverviewRuler.warningForeground#FD762380
  • editorOverviewRuler.wordHighlightForeground#9064BB
  • editorOverviewRuler.wordHighlightStrongForeground#3DEB1E
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#13111B
  • editorSuggestWidget.foreground#F3FCEE
  • editorSuggestWidget.selectedBackground#513A69
  • editorWarning.foreground#9064BB
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#13111B
  • errorForeground#F72343
  • extensionButton.prominentBackground#3DEB1E90
  • extensionButton.prominentForeground#F3FCEE
  • extensionButton.prominentHoverBackground#3DEB1E60
  • focusBorder#5A3485
  • foreground#F3FCEE
  • gitDecoration.conflictingResourceForeground#FD7623
  • gitDecoration.deletedResourceForeground#F72343
  • gitDecoration.ignoredResourceForeground#5A3485
  • gitDecoration.modifiedResourceForeground#9064BB
  • gitDecoration.untrackedResourceForeground#3DEB1E
  • input.background#191622
  • input.border#15121E
  • input.foreground#F3FCEE
  • input.placeholderForeground#5A3485
  • inputOption.activeBorder#CBFFAD
  • inputValidation.errorBorder#F72343
  • inputValidation.infoBorder#D145ED
  • inputValidation.warningBorder#FD7623
  • list.activeSelectionBackground#513A6960
  • list.activeSelectionForeground#F3FCEE
  • list.dropBackground#513A69
  • list.errorForeground#F72343
  • list.focusBackground#364954
  • list.highlightForeground#9064BB
  • list.hoverBackground#513A6965
  • list.inactiveSelectionBackground#513A6940
  • list.warningForeground#FD7623
  • listFilterWidget.background#2C213A
  • listFilterWidget.noMatchesOutline#F72343
  • listFilterWidget.outline#252131
  • merge.currentHeaderBackground#3DEB1E90
  • merge.incomingHeaderBackground#CBFFAD90
  • notification.background#191622
  • notification.buttonBackground#513A69
  • notification.buttonForeground#F3FCEE
  • notification.buttonHoverBackground#364954
  • notification.errorBackground#F72343
  • notification.errorForeground#F3FCEE
  • notification.foreground#F3FCEE
  • notification.infoBackground#9064BB
  • notification.infoForeground#191622
  • notification.warningBackground#FD7623
  • notification.warningForeground#191622
  • panel.background#191622
  • panel.border#D145ED
  • panelTitle.activeBorder#D145ED
  • panelTitle.activeForeground#F3FCEE
  • panelTitle.inactiveForeground#F3FCEE80
  • peekView.border#513A69
  • peekViewEditor.background#191622
  • peekViewEditor.matchHighlightBackground#E8A2F680
  • peekViewResult.background#13111B
  • peekViewResult.fileForeground#F3FCEE
  • peekViewResult.lineForeground#F3FCEE
  • peekViewResult.matchHighlightBackground#E8A2F680
  • peekViewResult.selectionBackground#513A69
  • peekViewResult.selectionForeground#F3FCEE
  • peekViewTitle.background#15121E
  • peekViewTitleDescription.foreground#5A3485
  • peekViewTitleLabel.foreground#F3FCEE
  • pickerGroup.border#CBFFAD
  • pickerGroup.foreground#9064BB
  • progressBar.background#D145ED
  • selection.background#CBFFAD
  • settings.checkboxBackground#13111B
  • settings.checkboxBorder#15121E
  • settings.checkboxForeground#F3FCEE
  • settings.dropdownBackground#13111B
  • settings.dropdownBorder#15121E
  • settings.dropdownForeground#F3FCEE
  • settings.headerForeground#F3FCEE
  • settings.modifiedItemForeground#FD7623
  • settings.modifiedItemIndicator#FD7623
  • settings.numberInputBackground#13111B
  • settings.numberInputBorder#15121E
  • settings.numberInputForeground#F3FCEE
  • settings.textInputBackground#13111B
  • settings.textInputBorder#15121E
  • settings.textInputForeground#F3FCEE
  • sideBar.background#13111B
  • sideBarSectionHeader.background#191622
  • sideBarSectionHeader.border#15121E
  • sideBarTitle.foreground#F3FCEE
  • statusBar.background#15121E
  • statusBar.debuggingBackground#F72343
  • statusBar.debuggingForeground#15121E
  • statusBar.foreground#F3FCEE
  • statusBar.noFolderBackground#15121E
  • statusBar.noFolderForeground#F3FCEE
  • statusBarItem.prominentBackground#F72343
  • statusBarItem.prominentHoverBackground#FD7623
  • statusBarItem.remoteBackground#CBFFAD
  • statusBarItem.remoteForeground#F3FCEE
  • tab.activeBackground#191622
  • tab.activeBorderTop#D145ED80
  • tab.activeForeground#F3FCEE
  • tab.border#15121E
  • tab.inactiveBackground#13111B
  • tab.inactiveForeground#5A3485
  • terminal.ansiBlack#2C213A
  • terminal.ansiBlue#CBFFAD
  • terminal.ansiBrightBlack#626483
  • terminal.ansiBrightBlue#CBFFAD
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightD145ED#00F769
  • terminal.ansiBrightMagenta#9064BB
  • terminal.ansiBrightRed#F72343
  • terminal.ansiBrightWhite#F3FCEE
  • terminal.ansiBrightYellow#E8A2F6
  • terminal.ansiCyan#A1EFE4
  • terminal.ansiD145ED#3DEB1E
  • terminal.ansiMagenta#9064BB
  • terminal.ansiRed#D145ED
  • terminal.ansiWhite#F3FCEE
  • terminal.ansiYellow#E8A2F6
  • terminal.background#191622
  • terminal.foreground#F3FCEE
  • terminal.selectionBackground#5A348545
  • terminalCursor.background#2C213A
  • terminalCursor.foreground#F3FCEE
  • titleBar.activeBackground#13111B
  • titleBar.activeForeground#F3FCEE
  • titleBar.inactiveBackground#15121E
  • titleBar.inactiveForeground#5A3485
  • walkThrough.embeddedEditorBackground#13111B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#CBFFAD
source#F3FCEE
meta.diff, meta.diff.header#5A3485
markup.inserted#3DEB1E
markup.deleted#F72343
markup.changed#FD7623
invalid#F72343underline italic
invalid.deprecated#F3FCEEunderline italic
entity.name.filename#E8A2F6
markup.error#F72343
markup.underlineunderline
markup.bold#FD7623bold
markup.heading#CBFFADbold
markup.italic#E8A2F6italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#9064BB
markup.inline.raw, markup.raw.restructuredtext#3DEB1E
markup.underline.link, markup.underline.link.image#9064BB
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#D145ED
entity.name.directive.restructuredtext, markup.quote#E8A2F6italic
meta.separator.markdown#5A3485
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3DEB1E
punctuation.definition.constant.restructuredtext#CBFFAD
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#CBFFAD
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F3FCEE
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#E8A2F6
entity.name.type.class, entity.name.class#9064BBnormal
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#CBFFADitalic
entity.other.inherited-class#9064BBitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5A3485
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#D145ED
comment.block.documentation entity.name.type#9064BBitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#9064BB
comment.block.documentation variable#FD7623italic
constant, variable.other.constant#CBFFAD
constant.character.escape, constant.character.string.escape, constant.regexp#D145ED
entity.name.tag#D145ED
entity.other.attribute-name.parent-selector#D145ED
entity.other.attribute-name#3DEB1Eitalic
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#3DEB1E
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#FD7623italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#3DEB1Eitalic
meta.decorator variable.other.object#3DEB1E
keyword, punctuation.definition.keyword#D145ED
keyword.control.new, keyword.operator.newbold
meta.selector#D145ED
support#9064BBitalic
support.function.magic, support.variable, variable.other.predefined#CBFFADregular
support.function, support.type.property-nameregular
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#D145ED
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#F3FCEE
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#D145ED
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#9064BB
constant.other.date, constant.other.timestamp#FD7623
variable.other.alias.yaml#3DEB1Eitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#D145EDregular
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#9064BBitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FD7623
storage.modifier#D145ED
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#E8A2F6
punctuation.definition.group.capture.regexp#D145ED
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F72343
punctuation.definition.character-class.regexp#9064BB
punctuation.definition.group.regexp#FD7623
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F72343
meta.assertion.look-ahead.regexp#3DEB1E
string#E8A2F6
punctuation.definition.string.begin, punctuation.definition.string.end#E8A2F6
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#5A3485
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F3FCEE
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FD7623italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F3FCEEnormal
meta.selectionset.graphql variable#E8A2F6
meta.selectionset.graphql meta.arguments variable#F3FCEE
entity.name.fragment.graphql, variable.fragment.graphql#9064BB
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#F3FCEE
source.shell variable.other#CBFFAD
support.constant#CBFFADnormal
meta.scope.prerequisites.makefile#E8A2F6
meta.attribute-selector.scss#E8A2F6
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F3FCEE
meta.preprocessor.haskell#5A3485

Shiki preview

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

Loading...

Acid Purple - Coding Theme