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#82AAFF10
  • activityBar.activeBorder#C792EA80
  • activityBar.background#272C3F
  • activityBar.foreground#D0D0D0
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#C792EA
  • activityBarBadge.foreground#D0D0D0
  • badge.background#44475A
  • badge.foreground#D0D0D0
  • breadcrumb.activeSelectionForeground#D0D0D0
  • breadcrumb.background#292D3E
  • breadcrumb.focusForeground#D0D0D0
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#0A0B0F
  • button.background#44475A
  • button.foreground#D0D0D0
  • contrastBorder#0A0B0F
  • debugToolBar.background#15161E
  • diffEditor.insertedTextBackground#C3E88D20
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#272C3F
  • dropdown.border#0A0B0F
  • dropdown.foreground#D0D0D0
  • editor.background#292D3E
  • editor.findMatchBackground#F0717880
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#272C3F75
  • editor.foldBackground#15161E
  • editor.foreground#D0D0D0
  • editor.hoverHighlightBackground#89DDFF50
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#82AAFF15
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#394360
  • editor.snippetFinalTabstopHighlightBackground#292D3E
  • editor.snippetFinalTabstopHighlightBorder#C3E88D
  • editor.snippetTabstopHighlightBackground#292D3E
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#89DDFF50
  • editor.wordHighlightStrongBackground#C3E88D50
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.border#82AAFF
  • editorGroup.dropBackground#272C3F70
  • editorGroupHeader.tabsBackground#0A0B0F
  • editorGutter.addedBackground#C3E88D80
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#89DDFF80
  • editorHoverWidget.background#292D3E
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#89DDFF
  • editorMarkerNavigation.background#15161E
  • editorOverviewRuler.addedForeground#C3E88D80
  • editorOverviewRuler.border#0A0B0F
  • editorOverviewRuler.currentContentForeground#C3E88D
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#82AAFF
  • editorOverviewRuler.infoForeground#89DDFF80
  • editorOverviewRuler.modifiedForeground#89DDFF80
  • editorOverviewRuler.selectionHighlightForeground#F07178
  • editorOverviewRuler.warningForeground#F0717880
  • editorOverviewRuler.wordHighlightForeground#89DDFF
  • editorOverviewRuler.wordHighlightStrongForeground#C3E88D
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#15161E
  • editorSuggestWidget.foreground#D0D0D0
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#89DDFF
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#15161E
  • errorForeground#FF5555
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentForeground#D0D0D0
  • extensionButton.prominentHoverBackground#C3E88D60
  • focusBorder#6272A4
  • foreground#D0D0D0
  • gitDecoration.conflictingResourceForeground#F07178
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#89DDFF
  • gitDecoration.untrackedResourceForeground#C3E88D
  • input.background#292D3E
  • input.border#0A0B0F
  • input.foreground#D0D0D0
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#82AAFF
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#C792EA
  • inputValidation.warningBorder#F07178
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#D0D0D0
  • list.dropBackground#44475A
  • list.errorForeground#FF5555
  • list.focusBackground#272C3F75
  • list.highlightForeground#89DDFF
  • list.hoverBackground#272C3F75
  • list.inactiveSelectionBackground#272C3F75
  • list.warningForeground#F07178
  • listFilterWidget.background#272C3F
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#394360
  • merge.currentHeaderBackground#C3E88D90
  • merge.incomingHeaderBackground#82AAFF90
  • notification.background#292D3E
  • notification.buttonBackground#44475A
  • notification.buttonForeground#D0D0D0
  • notification.buttonHoverBackground#272C3F75
  • notification.errorBackground#FF5555
  • notification.errorForeground#D0D0D0
  • notification.foreground#D0D0D0
  • notification.infoBackground#89DDFF
  • notification.infoForeground#292D3E
  • notification.warningBackground#F07178
  • notification.warningForeground#292D3E
  • panel.background#292D3E
  • panel.border#82AAFF
  • panelTitle.activeBorder#C792EA
  • panelTitle.activeForeground#D0D0D0
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#292D3E
  • peekViewEditor.matchHighlightBackground#FFCB6B80
  • peekViewResult.background#15161E
  • peekViewResult.fileForeground#D0D0D0
  • peekViewResult.lineForeground#D0D0D0
  • peekViewResult.matchHighlightBackground#FFCB6B80
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#D0D0D0
  • peekViewTitle.background#0A0B0F
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#D0D0D0
  • pickerGroup.border#82AAFF
  • pickerGroup.foreground#89DDFF
  • progressBar.background#C792EA
  • selection.background#82AAFF
  • settings.checkboxBackground#15161E
  • settings.checkboxBorder#0A0B0F
  • settings.checkboxForeground#D0D0D0
  • settings.dropdownBackground#15161E
  • settings.dropdownBorder#0A0B0F
  • settings.dropdownForeground#D0D0D0
  • settings.headerForeground#D0D0D0
  • settings.modifiedItemForeground#F07178
  • settings.modifiedItemIndicator#F07178
  • settings.numberInputBackground#15161E
  • settings.numberInputBorder#0A0B0F
  • settings.numberInputForeground#D0D0D0
  • settings.textInputBackground#15161E
  • settings.textInputBorder#0A0B0F
  • settings.textInputForeground#D0D0D0
  • sideBar.background#15161E
  • sideBarSectionHeader.background#292D3E
  • sideBarSectionHeader.border#0A0B0F
  • sideBarTitle.foreground#D0D0D0
  • statusBar.background#0A0B0F
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#0A0B0F
  • statusBar.foreground#D0D0D0
  • statusBar.noFolderBackground#0A0B0F
  • statusBar.noFolderForeground#D0D0D0
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#F07178
  • statusBarItem.remoteBackground#82AAFF
  • statusBarItem.remoteForeground#D0D0D0
  • tab.activeBackground#292D3E
  • tab.activeBorderTop#C792EA80
  • tab.activeForeground#D0D0D0
  • tab.border#0A0B0F
  • tab.inactiveBackground#15161E
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#D0D0D0
  • terminal.ansiYellow#FFCB6B
  • terminal.background#292D3E
  • terminal.foreground#D0D0D0
  • titleBar.activeBackground#15161E
  • titleBar.activeForeground#D0D0D0
  • titleBar.inactiveBackground#0A0B0F
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#15161E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#82AAFF
source#D0D0D0
meta.diff, meta.diff.header#6272A4
markup.inserted#C3E88D
markup.deleted#FF5555
markup.changed#F07178
invalid#FF5555underline italic
invalid.deprecated#D0D0D0underline italic
entity.name.filename#FFCB6B
markup.error#FF5555
markup.underlineunderline
markup.bold#F07178bold
markup.heading#82AAFFbold
markup.italic#FFCB6Bitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#89DDFF
markup.inline.raw, markup.raw.restructuredtext#C3E88D
markup.underline.link, markup.underline.link.image#89DDFF
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#C792EA
entity.name.directive.restructuredtext, markup.quote#FFCB6Bitalic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#C3E88D
punctuation.definition.constant.restructuredtext#82AAFF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#82AAFF
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#D0D0D0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FFCB6B
entity.name.type.class, entity.name.class#89DDFFnormal
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#82AAFFitalic
entity.other.inherited-class#89DDFFitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#C792EA
comment.block.documentation entity.name.type#89DDFFitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#89DDFF
comment.block.documentation variable#F07178italic
constant, variable.other.constant#82AAFF
constant.character.escape, constant.character.string.escape, constant.regexp#C792EA
entity.name.tag#C792EA
entity.other.attribute-name.parent-selector#C792EA
entity.other.attribute-name#C3E88Ditalic
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#C3E88D
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#F07178italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#C3E88Ditalic
meta.decorator variable.other.object#C3E88D
keyword, punctuation.definition.keyword#C792EA
keyword.control.new, keyword.operator.newbold
meta.selector#C792EA
support#89DDFFitalic
support.function.magic, support.variable, variable.other.predefined#82AAFFregular
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#C792EA
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#D0D0D0
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#C792EA
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#89DDFF
constant.other.date, constant.other.timestamp#F07178
variable.other.alias.yaml#C3E88Ditalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#C792EAregular
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#89DDFFitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#F07178
storage.modifier#C792EA
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFCB6B
punctuation.definition.group.capture.regexp#C792EA
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#89DDFF
punctuation.definition.group.regexp#F07178
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#C3E88D
string#FFCB6B
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#D0D0D0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#F07178italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#D0D0D0normal
meta.selectionset.graphql variable#FFCB6B
meta.selectionset.graphql meta.arguments variable#D0D0D0
entity.name.fragment.graphql, variable.fragment.graphql#89DDFF
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#D0D0D0
source.shell variable.other#82AAFF
support.constant#82AAFFnormal
meta.scope.prerequisites.makefile#FFCB6B
meta.attribute-selector.scss#FFCB6B
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#D0D0D0
meta.preprocessor.haskell#6272A4