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#8eaef210
  • activityBar.activeBorder#c49fdd80
  • activityBar.background#272C3F
  • activityBar.foreground#d0d0d0
  • activityBar.inactiveForeground#7b7f8b
  • activityBarBadge.background#c49fdd
  • activityBarBadge.foreground#d0d0d0
  • badge.background#44475A
  • badge.foreground#d0d0d0
  • breadcrumb.activeSelectionForeground#d0d0d0
  • breadcrumb.background#292D3E
  • breadcrumb.focusForeground#d0d0d0
  • breadcrumb.foreground#7b7f8b
  • breadcrumbPicker.background#0A0B0F
  • button.background#44475A
  • button.foreground#d0d0d0
  • contrastBorder#0A0B0F
  • debugToolBar.background#15161E
  • diffEditor.insertedTextBackground#c0da9b20
  • diffEditor.removedTextBackground#ee666650
  • 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#95d8f350
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#8eaef215
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#394360
  • editor.snippetFinalTabstopHighlightBackground#292D3E
  • editor.snippetFinalTabstopHighlightBorder#c0da9b
  • editor.snippetTabstopHighlightBackground#292D3E
  • editor.snippetTabstopHighlightBorder#7b7f8b
  • editor.wordHighlightBackground#95d8f350
  • editor.wordHighlightStrongBackground#c0da9b50
  • editorCodeLens.foreground#7b7f8b
  • editorError.foreground#ee6666
  • editorGroup.border#8eaef2
  • editorGroup.dropBackground#272C3F70
  • editorGroupHeader.tabsBackground#0A0B0F
  • editorGutter.addedBackground#c0da9b80
  • editorGutter.deletedBackground#ee666680
  • editorGutter.modifiedBackground#95d8f380
  • editorHoverWidget.background#292D3E
  • editorHoverWidget.border#7b7f8b
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#7b7f8b
  • editorLink.activeForeground#95d8f3
  • editorMarkerNavigation.background#15161E
  • editorOverviewRuler.addedForeground#c0da9b80
  • editorOverviewRuler.border#0A0B0F
  • editorOverviewRuler.currentContentForeground#c0da9b
  • editorOverviewRuler.deletedForeground#ee666680
  • editorOverviewRuler.errorForeground#ee666680
  • editorOverviewRuler.incomingContentForeground#8eaef2
  • editorOverviewRuler.infoForeground#95d8f380
  • editorOverviewRuler.modifiedForeground#95d8f380
  • editorOverviewRuler.selectionHighlightForeground#F07178
  • editorOverviewRuler.warningForeground#F0717880
  • editorOverviewRuler.wordHighlightForeground#95d8f3
  • editorOverviewRuler.wordHighlightStrongForeground#c0da9b
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#15161E
  • editorSuggestWidget.foreground#d0d0d0
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#95d8f3
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#15161E
  • errorForeground#ee6666
  • extensionButton.prominentBackground#c0da9b90
  • extensionButton.prominentForeground#d0d0d0
  • extensionButton.prominentHoverBackground#c0da9b60
  • focusBorder#7b7f8b
  • foreground#d0d0d0
  • gitDecoration.conflictingResourceForeground#F07178
  • gitDecoration.deletedResourceForeground#ee6666
  • gitDecoration.ignoredResourceForeground#7b7f8b
  • gitDecoration.modifiedResourceForeground#95d8f3
  • gitDecoration.untrackedResourceForeground#c0da9b
  • input.background#292D3E
  • input.border#0A0B0F
  • input.foreground#d0d0d0
  • input.placeholderForeground#7b7f8b
  • inputOption.activeBorder#8eaef2
  • inputValidation.errorBorder#ee6666
  • inputValidation.infoBorder#c49fdd
  • inputValidation.warningBorder#F07178
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#d0d0d0
  • list.dropBackground#44475A
  • list.errorForeground#ee6666
  • list.focusBackground#272C3F75
  • list.highlightForeground#95d8f3
  • list.hoverBackground#272C3F75
  • list.inactiveSelectionBackground#272C3F75
  • list.warningForeground#F07178
  • listFilterWidget.background#272C3F
  • listFilterWidget.noMatchesOutline#ee6666
  • listFilterWidget.outline#394360
  • merge.currentHeaderBackground#c0da9b90
  • merge.incomingHeaderBackground#8eaef290
  • notification.background#292D3E
  • notification.buttonBackground#44475A
  • notification.buttonForeground#d0d0d0
  • notification.buttonHoverBackground#272C3F75
  • notification.errorBackground#ee6666
  • notification.errorForeground#d0d0d0
  • notification.foreground#d0d0d0
  • notification.infoBackground#95d8f3
  • notification.infoForeground#292D3E
  • notification.warningBackground#F07178
  • notification.warningForeground#292D3E
  • panel.background#292D3E
  • panel.border#8eaef2
  • panelTitle.activeBorder#c49fdd
  • panelTitle.activeForeground#d0d0d0
  • panelTitle.inactiveForeground#7b7f8b
  • peekView.border#44475A
  • peekViewEditor.background#292D3E
  • peekViewEditor.matchHighlightBackground#f0c77a80
  • peekViewResult.background#15161E
  • peekViewResult.fileForeground#d0d0d0
  • peekViewResult.lineForeground#d0d0d0
  • peekViewResult.matchHighlightBackground#f0c77a80
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#d0d0d0
  • peekViewTitle.background#0A0B0F
  • peekViewTitleDescription.foreground#7b7f8b
  • peekViewTitleLabel.foreground#d0d0d0
  • pickerGroup.border#8eaef2
  • pickerGroup.foreground#95d8f3
  • progressBar.background#c49fdd
  • selection.background#8eaef2
  • 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#ee6666
  • statusBar.debuggingForeground#0A0B0F
  • statusBar.foreground#d0d0d0
  • statusBar.noFolderBackground#0A0B0F
  • statusBar.noFolderForeground#d0d0d0
  • statusBarItem.prominentBackground#ee6666
  • statusBarItem.prominentHoverBackground#F07178
  • statusBarItem.remoteBackground#8eaef2
  • statusBarItem.remoteForeground#d0d0d0
  • tab.activeBackground#292D3E
  • tab.activeBorderTop#c49fdd80
  • tab.activeForeground#d0d0d0
  • tab.border#0A0B0F
  • tab.inactiveBackground#15161E
  • tab.inactiveForeground#7b7f8b
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#8eaef2
  • terminal.ansiBrightBlack#7b7f8b
  • terminal.ansiBrightBlue#d6b4f7
  • terminal.ansiBrightCyan#adf6f6
  • terminal.ansiBrightGreen#78f09a
  • terminal.ansiBrightMagenta#f49dda
  • terminal.ansiBrightRed#f07c7c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f6f6ae
  • terminal.ansiCyan#95d8f3
  • terminal.ansiGreen#c0da9b
  • terminal.ansiMagenta#c49fdd
  • terminal.ansiRed#ee6666
  • terminal.ansiWhite#d0d0d0
  • terminal.ansiYellow#f0c77a
  • terminal.background#292D3E
  • terminal.foreground#d0d0d0
  • titleBar.activeBackground#15161E
  • titleBar.activeForeground#d0d0d0
  • titleBar.inactiveBackground#0A0B0F
  • titleBar.inactiveForeground#7b7f8b
  • walkThrough.embeddedEditorBackground#15161E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#8eaef2
source#d0d0d0
meta.diff, meta.diff.header#7b7f8b
markup.inserted#c0da9b
markup.deleted#ee6666
markup.changed#F07178
invalid#ee6666underline italic
invalid.deprecated#d0d0d0underline italic
entity.name.filename#f0c77a
markup.error#ee6666
markup.underlineunderline
markup.bold#F07178bold
markup.heading#8eaef2bold
markup.italic#f0c77aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#95d8f3
markup.inline.raw, markup.raw.restructuredtext#c0da9b
markup.underline.link, markup.underline.link.image#95d8f3
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#c49fdd
entity.name.directive.restructuredtext, markup.quote#f0c77aitalic
meta.separator.markdown#7b7f8b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#c0da9b
punctuation.definition.constant.restructuredtext#8eaef2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#8eaef2
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#f0c77a
entity.name.type.class, entity.name.class#95d8f3normal
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#8eaef2italic
entity.other.inherited-class#95d8f3italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7b7f8b
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#c49fdd
comment.block.documentation entity.name.type#95d8f3italic
comment.block.documentation entity.name.type punctuation.definition.bracket#95d8f3
comment.block.documentation variable#F07178italic
constant, variable.other.constant#8eaef2
constant.character.escape, constant.character.string.escape, constant.regexp#c49fdd
entity.name.tag#c49fdd
entity.other.attribute-name.parent-selector#c49fdd
entity.other.attribute-name#c0da9bitalic
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#c0da9b
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#c0da9bitalic
meta.decorator variable.other.object#c0da9b
keyword, punctuation.definition.keyword#c49fdd
keyword.control.new, keyword.operator.newbold
meta.selector#c49fdd
support#95d8f3italic
support.function.magic, support.variable, variable.other.predefined#8eaef2regular
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#c49fdd
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#c49fdd
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#95d8f3
constant.other.date, constant.other.timestamp#F07178
variable.other.alias.yaml#c0da9bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c49fddregular
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#95d8f3italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#F07178
storage.modifier#c49fdd
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f0c77a
punctuation.definition.group.capture.regexp#c49fdd
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee6666
punctuation.definition.character-class.regexp#95d8f3
punctuation.definition.group.regexp#F07178
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee6666
meta.assertion.look-ahead.regexp#c0da9b
string#f0c77a
punctuation.definition.string.begin, punctuation.definition.string.end#dee492
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97e2f2
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#7b7f8b
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#f0c77a
meta.selectionset.graphql meta.arguments variable#d0d0d0
entity.name.fragment.graphql, variable.fragment.graphql#95d8f3
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#8eaef2
support.constant#8eaef2normal
meta.scope.prerequisites.makefile#f0c77a
meta.attribute-selector.scss#f0c77a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d0d0d0
meta.preprocessor.haskell#7b7f8b