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.background#1B1D2C
  • activityBar.foreground#9297C7
  • activityBar.inactiveForeground#47496E
  • activityBarBadge.background#73D1FF
  • activityBarBadge.foreground#f5f5f5
  • badge.background#44475A
  • badge.foreground#9297C7
  • breadcrumb.activeSelectionForeground#9297C7
  • breadcrumb.background#1B1D2C
  • breadcrumb.focusForeground#9297C7
  • breadcrumb.foreground#687bb6
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#9297C7
  • contrastBorder#191A21
  • debugToolBar.background#1B1D2C
  • diffEditor.insertedTextBackground#BED44120
  • diffEditor.removedTextBackground#FF83AC50
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#9297C7
  • editor.background#25273C
  • editor.findMatchBackground#F4DBB280
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foreground#C1C4EF
  • editor.hoverHighlightBackground#191A21
  • editor.lineHighlightBackground#2B2C43
  • editor.rangeHighlightBackground#FF7AB815
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#25273C
  • editor.snippetFinalTabstopHighlightBorder#BED441
  • editor.snippetTabstopHighlightBackground#25273C
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#889EE950
  • editor.wordHighlightStrongBackground#BED44150
  • editorCodeLens.foreground#6272A4
  • editorCursor.foreground#848AF0
  • editorError.foreground#ff9067
  • editorGroup.border#889EE990
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#BED44180
  • editorGutter.deletedBackground#FF83AC80
  • editorGutter.modifiedBackground#889EE980
  • editorHoverWidget.background#25273C
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#424450
  • editorLineNumber.foreground#3c4361
  • editorLink.activeForeground#889EE9
  • editorMarkerNavigation.background#1B1D2C
  • editorOverviewRuler.addedForeground#BED44180
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#BED441
  • editorOverviewRuler.deletedForeground#FF83AC80
  • editorOverviewRuler.errorForeground#FF83AC80
  • editorOverviewRuler.incomingContentForeground#BED441
  • editorOverviewRuler.infoForeground#889EE980
  • editorOverviewRuler.modifiedForeground#889EE980
  • editorOverviewRuler.selectionHighlightForeground#F4DBB2
  • editorOverviewRuler.warningForeground#F4DBB280
  • editorOverviewRuler.wordHighlightForeground#889EE9
  • editorOverviewRuler.wordHighlightStrongForeground#BED441
  • editorRuler.foreground#424450
  • editorSuggestWidget.background#1B1D2C
  • editorSuggestWidget.foreground#C1C4EF
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#889EE9
  • editorWhitespace.foreground#424450
  • editorWidget.background#1B1D2C
  • errorForeground#FF83AC
  • extensionButton.prominentBackground#00CCFF90
  • extensionButton.prominentForeground#CDF5FF
  • extensionButton.prominentHoverBackground#00CCFF60
  • focusBorder#6272A4
  • foreground#9297C7
  • gitDecoration.conflictingResourceForeground#F4DBB2
  • gitDecoration.deletedResourceForeground#FF83AC
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#73D1FF
  • gitDecoration.untrackedResourceForeground#BED441
  • input.background#25273C
  • input.border#191A21
  • input.foreground#9297C7
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#FF7AB8
  • inputValidation.errorBorder#FF83AC
  • inputValidation.infoBorder#CFAFB7
  • inputValidation.warningBorder#F4DBB2
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#9297C7
  • list.dropBackground#44475A
  • list.errorForeground#FF83AC
  • list.focusBackground#44475A75
  • list.highlightForeground#889EE9
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#F4DBB2
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF83AC
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#BED44190
  • merge.incomingHeaderBackground#FF7AB890
  • notification.background#25273C
  • notification.buttonBackground#44475A
  • notification.buttonForeground#9297C7
  • notification.buttonHoverBackground#44475A75
  • notification.errorBackground#FF83AC
  • notification.errorForeground#9297C7
  • notification.foreground#9297C7
  • notification.infoBackground#889EE9
  • notification.infoForeground#25273C
  • notification.warningBackground#F4DBB2
  • notification.warningForeground#25273C
  • panel.background#25273C
  • panel.border#889EE990
  • panelTitle.activeBorder#889EE9
  • panelTitle.activeForeground#C1C4EF
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#25273C
  • peekViewEditor.matchHighlightBackground#9AF8E480
  • peekViewResult.background#1B1D2C
  • peekViewResult.fileForeground#C1C4EF
  • peekViewResult.lineForeground#C1C4EF
  • peekViewResult.matchHighlightBackground#9AF8E480
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#C1C4EF
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#C1C4EF
  • pickerGroup.border#CFAFB7
  • pickerGroup.foreground#889EE9
  • progressBar.background#CFAFB7
  • selection.background#FF7AB8
  • settings.checkboxBackground#1B1D2C
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#9297C7
  • settings.dropdownBackground#1B1D2C
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#9297C7
  • settings.headerForeground#9297C7
  • settings.modifiedItemForeground#F4DBB2
  • settings.modifiedItemIndicator#F4DBB2
  • settings.numberInputBackground#1B1D2C
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#9297C7
  • settings.textInputBackground#1B1D2C
  • settings.textInputBorder#191A21
  • settings.textInputForeground#9297C7
  • sideBar.background#1B1D2C
  • sideBarSectionHeader.background#25273C
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#9297C7
  • statusBar.background#1B1D2C
  • statusBar.debuggingBackground#FF83AC
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#9297C7
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#9297C7
  • statusBarItem.prominentBackground#FF83AC
  • statusBarItem.prominentHoverBackground#F4DBB2
  • statusBarItem.remoteBackground#FF7AB8
  • statusBarItem.remoteForeground#9297C7
  • tab.activeBackground#2e335b
  • tab.activeBorder#889EE990
  • tab.activeForeground#D4D4DF
  • tab.border#191A21
  • tab.inactiveBackground#191A21
  • tab.inactiveForeground#696980
  • terminal.ansiBlack#1B1D2C
  • terminal.ansiBlue#FF7AB8
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#12b886
  • terminal.ansiBrightMagenta#ff62b2
  • terminal.ansiBrightRed#CFAFB7
  • terminal.ansiBrightWhite#9297C7
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#889EE9
  • terminal.ansiGreen#BED441
  • terminal.ansiMagenta#CFAFB7
  • terminal.ansiRed#FF83AC
  • terminal.ansiWhite#9297C7
  • terminal.ansiYellow#9AF8E4
  • terminal.background#25273C
  • terminal.foreground#9297C7
  • titleBar.activeBackground#1B1D2C
  • titleBar.activeForeground#9297C7
  • titleBar.inactiveBackground#1B1D2C
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#1B1D2C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#FF7AB8
source#9999B4
meta.diff, meta.diff.header#6272A4
markup.inserted#B1E3A7
markup.deleted#ff8787
markup.changed#A585E8
invalid#ff8787underline italic
invalid.deprecated#9999B4underline italic
entity.name.filename#9AF8E4
markup.error#ff8787
markup.underlineunderline
markup.bold#FF2773bold
markup.heading#FF7AB8bold
markup.italic#9AF8E4italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#73D1FF
markup.inline.raw, markup.raw.restructuredtext#ff8787
markup.underline.link, markup.underline.link.image#A585E8
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF7AB8
entity.name.directive.restructuredtext, markup.quote#9AF8E4italic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#B1E3A7
punctuation.definition.constant.restructuredtext#FF7AB8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#FF7AB8
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#C1C4EF
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#9AF8E4
entity.name.type, entity.other.inherited-class, support.class#00CCFF
entity.name.type.class, entity.name.class, entity.name.struct, entity.name.interface, entity.name.trait#FF7AB8normal
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#FF7AB8italic
entity.other.inherited-class#83CA52italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5C5F90
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#CFAFB7
comment.block.documentation entity.name.type#73D1FFitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#73D1FF
comment.block.documentation variable#A585E8italic
constant, variable.other.constant#FF7AB8
constant.character.escape, constant.character.string.escape, constant.regexp#FF7AB8
entity.name.tag#00CCFF
entity.other.attribute-name.parent-selector#CFAFB7
entity.other.attribute-name#FFDE88italic
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#00CCFF
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#F9969Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#B1E3A7italic
meta.decorator variable.other.object#9B8499
keyword, punctuation.definition.keyword#FFB98F
keyword.control.new, keyword.operator.new#FFB98Fbold
meta.selector#83CA52
support#73D1FFitalic
support.function.magic, support.variable, variable.other.predefined#ED8BB9regular
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#77A5EB
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#F4DBB2
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#83CA52
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#FF83AC
constant.other.date, constant.other.timestamp#A585E8
variable.other.alias.yaml#B1E3A7italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#CFAFB7regular
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#FAD484italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#55A2A6
storage.modifier#CFAFB7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#9AF8E4
punctuation.definition.group.capture.regexp#A585E8
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff8787
constant, constant.character#ffa94d
punctuation.definition.character-class.regexp#73D1FF
punctuation.definition.group.regexp#77A5EB
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff8787
meta.assertion.look-ahead.regexp#B1E3A7
string#9AF8E4
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
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#C0C3EE
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FF4D95italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#C1C4EFnormal
meta.selectionset.graphql variable#9AF8E4
meta.selectionset.graphql meta.arguments variable#C1C4EF
entity.name.fragment.graphql, variable.fragment.graphql#73D1FF
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#C1C4EF
source.shell variable.other#FF7AB8
support.constant#FF7AB8normal
meta.scope.prerequisites.makefile#9AF8E4
meta.attribute-selector.scss#9AF8E4
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#C0C3EE
meta.preprocessor.haskell#6272A4

Shiki preview

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

Loading...

Bullish Theme - Coding Theme