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#41414D28
  • activityBar.activeBorder#FF79C650
  • activityBar.background#13111B
  • activityBar.foreground#E1E1E6
  • activityBar.inactiveForeground#5A4B81
  • activityBarBadge.background#FF79C6
  • activityBarBadge.foreground#15121E
  • badge.background#41414D
  • badge.foreground#E1E1E6
  • breadcrumb.activeSelectionForeground#E1E1E6
  • breadcrumb.background#13111B
  • breadcrumb.focusForeground#E1E1E6
  • breadcrumb.foreground#988bc7
  • breadcrumbPicker.background#15121E
  • button.background#41414D
  • button.foreground#E1E1E6
  • contrastBorder#15121E
  • debugToolBar.background#13111B
  • diffEditor.insertedTextBackground#67e48010
  • diffEditor.removedTextBackground#E9637932
  • dropdown.background#201B2D
  • dropdown.border#15121E
  • dropdown.foreground#E1E1E6
  • editor.background#13111B
  • editor.findMatchBackground#E89E6450
  • editor.findMatchHighlightBackground#E1E1E628
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#13111B
  • editor.foreground#E1E1E6
  • editor.hoverHighlightBackground#15121E
  • editor.lineHighlightBackground#201B2D
  • editor.lineHighlightBorder#13111B
  • editor.rangeHighlightBackground#78D1E110
  • editor.selectionBackground#41414D
  • editor.selectionHighlightBackground#3c3550
  • editor.selectionHighlightBorder#E1E1E614
  • editor.snippetFinalTabstopHighlightBackground#13111B
  • editor.snippetFinalTabstopHighlightBorder#67e480
  • editor.snippetTabstopHighlightBackground#13111B
  • editor.snippetTabstopHighlightBorder#5A4B81
  • editor.wordHighlightBackground#988bc732
  • editor.wordHighlightBorder#E1E1E614
  • editor.wordHighlightStrongBackground#67e48032
  • editor.wordHighlightStrongBorder#E1E1E614
  • editorCodeLens.foreground#5A4B81
  • editorError.foreground#E96379
  • editorGroup.border#41414D
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#15121E
  • editorGutter.addedBackground#67e48050
  • editorGutter.deletedBackground#E9637950
  • editorGutter.modifiedBackground#988bc750
  • editorHoverWidget.background#13111B
  • editorHoverWidget.border#5A4B81
  • editorIndentGuide.activeBackground#E1E1E62d
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#544776
  • editorLink.activeForeground#988bc7
  • editorMarkerNavigation.background#13111B
  • 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#13111B
  • editorSuggestWidget.foreground#E1E1E6
  • editorSuggestWidget.selectedBackground#41414D
  • editorWarning.foreground#988bc7
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#13111B
  • errorForeground#E96379
  • extensionButton.prominentBackground#67e4805a
  • extensionButton.prominentForeground#E1E1E6
  • extensionButton.prominentHoverBackground#67e4803c
  • focusBorder#5A4B81
  • foreground#E1E1E6
  • gitDecoration.conflictingResourceForeground#E89E64
  • gitDecoration.deletedResourceForeground#E96379
  • gitDecoration.ignoredResourceForeground#988bc780
  • gitDecoration.modifiedResourceForeground#988bc7
  • gitDecoration.untrackedResourceForeground#67e480
  • input.background#13111B
  • input.border#15121E
  • input.foreground#E1E1E6
  • input.placeholderForeground#5A4B81
  • inputOption.activeBorder#78D1E1
  • inputValidation.errorBorder#E96379
  • inputValidation.infoBorder#FF79C6
  • inputValidation.warningBorder#E89E64
  • list.activeSelectionBackground#41414D3c
  • list.activeSelectionForeground#E1E1E6
  • list.dropBackground#41414D
  • list.errorForeground#E96379
  • list.focusBackground#44475A75
  • list.highlightForeground#988bc7
  • list.hoverBackground#41414D41
  • list.inactiveSelectionBackground#41414D28
  • list.warningForeground#E89E64
  • listFilterWidget.background#201B2D
  • listFilterWidget.noMatchesOutline#E96379
  • listFilterWidget.outline#3c3550
  • merge.currentHeaderBackground#67e4805a
  • merge.incomingHeaderBackground#78D1E15a
  • panel.background#13111B
  • panel.border#3c3550
  • panelTitle.activeBorder#E96379
  • panelTitle.activeForeground#E1E1E6
  • panelTitle.inactiveForeground#E1E1E650
  • peekView.border#41414D
  • peekViewEditor.background#13111B
  • peekViewEditor.matchHighlightBackground#e7de7950
  • peekViewResult.background#13111B
  • peekViewResult.fileForeground#E1E1E6
  • peekViewResult.lineForeground#E1E1E6
  • peekViewResult.matchHighlightBackground#e7de7950
  • peekViewResult.selectionBackground#41414D
  • peekViewResult.selectionForeground#E1E1E6
  • peekViewTitle.background#15121E
  • peekViewTitleDescription.foreground#5A4B81
  • peekViewTitleLabel.foreground#E1E1E6
  • pickerGroup.border#78D1E1
  • pickerGroup.foreground#988bc7
  • progressBar.background#FF79C6
  • selection.background#78D1E1
  • settings.checkboxBackground#13111B
  • settings.checkboxBorder#15121E
  • settings.checkboxForeground#E1E1E6
  • settings.dropdownBackground#13111B
  • settings.dropdownBorder#15121E
  • settings.dropdownForeground#E1E1E6
  • settings.headerForeground#E1E1E6
  • settings.modifiedItemIndicator#E89E64
  • settings.numberInputBackground#13111B
  • settings.numberInputBorder#15121E
  • settings.numberInputForeground#E1E1E6
  • settings.textInputBackground#13111B
  • settings.textInputBorder#15121E
  • settings.textInputForeground#E1E1E6
  • sideBar.background#13111B
  • sideBarSectionHeader.background#13111B
  • sideBarSectionHeader.border#3c3550
  • sideBarTitle.foreground#E1E1E6
  • statusBar.background#15121E
  • statusBar.debuggingBackground#FF79C6
  • statusBar.debuggingForeground#15121E
  • statusBar.foreground#E1E1E6
  • statusBar.noFolderBackground#15121E
  • statusBar.noFolderForeground#E1E1E6
  • statusBarItem.prominentBackground#FF79C6
  • statusBarItem.prominentForeground#15121E
  • statusBarItem.prominentHoverBackground#E89E64
  • statusBarItem.remoteBackground#FF79C6
  • statusBarItem.remoteForeground#15121E
  • tab.activeBackground#41414D28
  • tab.activeBorderTop#FF79C650
  • tab.activeForeground#E1E1E6
  • tab.border#15121E
  • tab.inactiveBackground#13111B
  • tab.inactiveForeground#988bc7aa
  • terminal.ansiBlack#201B2D
  • terminal.ansiBlue#78D1E1
  • terminal.ansiBrightBlack#626483
  • terminal.ansiBrightBlue#78D1E1
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#00F769
  • terminal.ansiBrightMagenta#988bc7
  • terminal.ansiBrightRed#ed4556
  • terminal.ansiBrightWhite#F7F7FB
  • terminal.ansiBrightYellow#e7de79
  • terminal.ansiCyan#A1EFE4
  • terminal.ansiGreen#67e480
  • terminal.ansiMagenta#988bc7
  • terminal.ansiRed#FF79C6
  • terminal.ansiWhite#E1E1E6
  • terminal.ansiYellow#e7de79
  • terminal.background#13111B
  • terminal.foreground#E1E1E6
  • terminal.selectionBackground#5A4B812d
  • terminalCursor.background#201B2D
  • terminalCursor.foreground#E1E1E6
  • textLink.activeForeground#FF79C6c8
  • textLink.foreground#FF79C6
  • titleBar.activeBackground#13111B
  • titleBar.activeForeground#E1E1E6
  • titleBar.inactiveBackground#15121E
  • titleBar.inactiveForeground#5A4B81
  • walkThrough.embeddedEditorBackground#13111B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strongbold
header#78D1E1
source#E1E1E6
meta.diff, meta.diff.header#5A4B81
markup.inserted#67e480
markup.deleted#E96379
markup.changed#E89E64
invalid#E96379underline
invalid.deprecated#E1E1E6underline
entity.name.filename#e7de79
markup.error#E96379
markup.underlineunderline
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#E1E1E6
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.newbold
meta.selector#FF79C6
support#988bc7
support.function.magic, support.variable, variable.other.predefined#78D1E1regular
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#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#E1E1E6
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#E1E1E6
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#E1E1E6normal
meta.selectionset.graphql variable#e7de79
meta.selectionset.graphql meta.arguments variable#E1E1E6
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#E1E1E6
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#E1E1E6
meta.preprocessor.haskell#5A4B81

Shiki preview

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

Loading...