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#3DEB1E80
  • activityBar.background#2C213A
  • activityBar.foreground#F3FCEE
  • activityBar.inactiveForeground#5A3485
  • activityBarBadge.background#3DEB1E
  • 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#D145ED20
  • 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#D145ED
  • editor.snippetTabstopHighlightBackground#191622
  • editor.snippetTabstopHighlightBorder#5A3485
  • editor.wordHighlightBackground#9064BB50
  • editor.wordHighlightStrongBackground#D145ED50
  • editorCodeLens.foreground#5A3485
  • editorError.foreground#F72343
  • editorGroup.border#513A69
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#15121E
  • editorGutter.addedBackground#D145ED80
  • 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#D145ED80
  • editorOverviewRuler.border#15121E
  • editorOverviewRuler.currentContentForeground#D145ED
  • 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#D145ED
  • 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#D145ED90
  • extensionButton.prominentForeground#F3FCEE
  • extensionButton.prominentHoverBackground#D145ED60
  • focusBorder#5A3485
  • foreground#F3FCEE
  • gitDecoration.conflictingResourceForeground#FD7623
  • gitDecoration.deletedResourceForeground#F72343
  • gitDecoration.ignoredResourceForeground#5A3485
  • gitDecoration.modifiedResourceForeground#9064BB
  • gitDecoration.untrackedResourceForeground#D145ED
  • input.background#191622
  • input.border#15121E
  • input.foreground#F3FCEE
  • input.placeholderForeground#5A3485
  • inputOption.activeBorder#CBFFAD
  • inputValidation.errorBorder#F72343
  • inputValidation.infoBorder#3DEB1E
  • 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#D145ED90
  • 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#3DEB1E
  • panelTitle.activeBorder#3DEB1E
  • panelTitle.activeForeground#F3FCEE
  • panelTitle.inactiveForeground#F3FCEE80
  • peekView.border#513A69
  • peekViewEditor.background#191622
  • peekViewEditor.matchHighlightBackground#CFFFB380
  • peekViewResult.background#13111B
  • peekViewResult.fileForeground#F3FCEE
  • peekViewResult.lineForeground#F3FCEE
  • peekViewResult.matchHighlightBackground#CFFFB380
  • peekViewResult.selectionBackground#513A69
  • peekViewResult.selectionForeground#F3FCEE
  • peekViewTitle.background#15121E
  • peekViewTitleDescription.foreground#5A3485
  • peekViewTitleLabel.foreground#F3FCEE
  • pickerGroup.border#CBFFAD
  • pickerGroup.foreground#9064BB
  • progressBar.background#3DEB1E
  • 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#3DEB1E80
  • 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.ansiBrightGreen#00F769
  • terminal.ansiBrightMagenta#9064BB
  • terminal.ansiBrightRed#F72343
  • terminal.ansiBrightWhite#F3FCEE
  • terminal.ansiBrightYellow#CFFFB3
  • terminal.ansiCyan#A1EFE4
  • terminal.ansiGreen#D145ED
  • terminal.ansiMagenta#9064BB
  • terminal.ansiRed#3DEB1E
  • terminal.ansiWhite#F3FCEE
  • terminal.ansiYellow#CFFFB3
  • 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#D145ED
markup.deleted#F72343
markup.changed#FD7623
invalid#F72343underline italic
invalid.deprecated#F3FCEEunderline italic
entity.name.filename#CFFFB3
markup.error#F72343
markup.underlineunderline
markup.bold#FD7623bold
markup.heading#CBFFADbold
markup.italic#CFFFB3italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#9064BB
markup.inline.raw, markup.raw.restructuredtext#D145ED
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#3DEB1E
entity.name.directive.restructuredtext, markup.quote#CFFFB3italic
meta.separator.markdown#5A3485
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#D145ED
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#CFFFB3
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#3DEB1E
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#3DEB1E
entity.name.tag#3DEB1E
entity.other.attribute-name.parent-selector#3DEB1E
entity.other.attribute-name#D145EDitalic
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#D145ED
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#D145EDitalic
meta.decorator variable.other.object#D145ED
keyword, punctuation.definition.keyword#3DEB1E
keyword.control.new, keyword.operator.newbold
meta.selector#3DEB1E
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#3DEB1E
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#3DEB1E
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#D145EDitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#3DEB1Eregular
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#3DEB1E
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#CFFFB3
punctuation.definition.group.capture.regexp#3DEB1E
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#D145ED
string#CFFFB3
punctuation.definition.string.begin, punctuation.definition.string.end#CFFFB3
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#CFFFB3
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#CFFFB3
meta.attribute-selector.scss#CFFFB3
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