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.activeBorder#a695e680
  • activityBar.background#131315
  • activityBar.foreground#b7b7ba
  • activityBar.inactiveForeground#4b4b4c
  • activityBarBadge.background#a695e6
  • activityBarBadge.foreground#FFFFFF
  • badge.background#312e3a
  • badge.foreground#b7b7ba
  • breadcrumb.activeSelectionForeground#b7b7ba
  • breadcrumb.background#211f23
  • breadcrumb.focusForeground#b7b7ba
  • breadcrumb.foreground#4b4b4c
  • breadcrumbPicker.background#131315
  • button.background#312e3a
  • button.border#a695e6
  • button.foreground#b7b7ba
  • button.secondaryBackground#211f23
  • button.secondaryForeground#b7b7ba
  • button.secondaryHoverBackground#28252a
  • debugToolBar.background#19171a
  • diffEditor.insertedTextBackground#a4eb9f20
  • diffEditor.removedTextBackground#d9567950
  • dropdown.background#28252a
  • dropdown.border#131315
  • dropdown.foreground#b7b7ba
  • editor.background#211f23
  • editor.findMatchBackground#a695e610
  • editor.findMatchHighlightBackground#FFFFFF10
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#19171a80
  • editor.foreground#b7b7ba
  • editor.hoverHighlightBackground#80cfd610
  • editor.lineHighlightBackground#28252a
  • editor.rangeHighlightBackground#a695e615
  • editor.selectionBackground#312e3a
  • editor.snippetFinalTabstopHighlightBackground#211f23
  • editor.snippetFinalTabstopHighlightBorder#a4eb9f
  • editor.snippetTabstopHighlightBackground#211f23
  • editor.snippetTabstopHighlightBorder#4b4b4c
  • editor.wordHighlightBackground#80cfd610
  • editor.wordHighlightStrongBackground#a4eb9f10
  • editorBracketHighlight.foreground1#b7b7ba
  • editorBracketHighlight.foreground2#deaaf2
  • editorBracketHighlight.foreground3#80cfd6
  • editorBracketHighlight.foreground4#a4eb9f
  • editorBracketHighlight.foreground5#a695e6
  • editorBracketHighlight.foreground6#f3a485
  • editorBracketHighlight.unexpectedBracket.foreground#d95679
  • editorCodeLens.foreground#4b4b4c
  • editorError.foreground#d95679
  • editorGroup.border#141315
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#131315
  • editorGutter.addedBackground#a4eb9f80
  • editorGutter.deletedBackground#d9567980
  • editorGutter.modifiedBackground#80cfd680
  • editorHoverWidget.background#211f23
  • editorHoverWidget.border#4b4b4c
  • editorIndentGuide.activeBackground1#FFFFFF45
  • editorIndentGuide.background1#FFFFFF1A
  • editorLineNumber.foreground#4b4b4c
  • editorLink.activeForeground#80cfd6
  • editorMarkerNavigation.background#19171a
  • editorOverviewRuler.addedForeground#a4eb9f80
  • editorOverviewRuler.border#131315
  • editorOverviewRuler.currentContentForeground#a4eb9f
  • editorOverviewRuler.deletedForeground#d9567980
  • editorOverviewRuler.errorForeground#d9567980
  • editorOverviewRuler.incomingContentForeground#a695e6
  • editorOverviewRuler.infoForeground#80cfd680
  • editorOverviewRuler.modifiedForeground#80cfd680
  • editorOverviewRuler.warningForeground#f3a48580
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#19171a
  • editorSuggestWidget.foreground#b7b7ba
  • editorSuggestWidget.selectedBackground#312e3a
  • editorWarning.foreground#80cfd6
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#19171a
  • errorForeground#d95679
  • extensionButton.prominentBackground#a4eb9f90
  • extensionButton.prominentForeground#b7b7ba
  • extensionButton.prominentHoverBackground#a4eb9f60
  • focusBorder#4b4b4c
  • foreground#b7b7ba
  • gitDecoration.conflictingResourceForeground#f3a485
  • gitDecoration.deletedResourceForeground#d95679
  • gitDecoration.ignoredResourceForeground#4b4b4c
  • gitDecoration.modifiedResourceForeground#80cfd6
  • gitDecoration.untrackedResourceForeground#a4eb9f
  • input.background#211f23
  • input.border#131315
  • input.foreground#b7b7ba
  • input.placeholderForeground#4b4b4c
  • inputOption.activeBorder#a695e6
  • inputValidation.errorBorder#d95679
  • inputValidation.infoBorder#deaaf2
  • inputValidation.warningBorder#f3a485
  • list.activeSelectionBackground#28252a
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#312e3a
  • list.errorForeground#d95679
  • list.focusBackground#44475A75
  • list.highlightForeground#a695e6
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#28252a
  • list.warningForeground#f3a485
  • listFilterWidget.background#28252a
  • listFilterWidget.noMatchesOutline#d95679
  • listFilterWidget.outline#332f36
  • merge.currentHeaderBackground#a4eb9f90
  • merge.incomingHeaderBackground#a695e690
  • panel.background#211f23
  • panel.border#141315
  • panelTitle.activeBorder#a695e6
  • panelTitle.activeForeground#b7b7ba
  • panelTitle.inactiveForeground#4b4b4c
  • peekView.border#312e3a
  • peekViewEditor.background#211f23
  • peekViewEditor.matchHighlightBackground#fade8980
  • peekViewResult.background#19171a
  • peekViewResult.fileForeground#b7b7ba
  • peekViewResult.lineForeground#b7b7ba
  • peekViewResult.matchHighlightBackground#fade8980
  • peekViewResult.selectionBackground#312e3a
  • peekViewResult.selectionForeground#b7b7ba
  • peekViewTitle.background#131315
  • peekViewTitleDescription.foreground#4b4b4c
  • peekViewTitleLabel.foreground#b7b7ba
  • pickerGroup.border#a695e6
  • pickerGroup.foreground#80cfd6
  • progressBar.background#a695e6
  • selection.background#a695e650
  • settings.checkboxBackground#19171a
  • settings.checkboxBorder#131315
  • settings.checkboxForeground#b7b7ba
  • settings.dropdownBackground#19171a
  • settings.dropdownBorder#131315
  • settings.dropdownForeground#b7b7ba
  • settings.headerForeground#b7b7ba
  • settings.modifiedItemIndicator#f3a485
  • settings.numberInputBackground#19171a
  • settings.numberInputBorder#131315
  • settings.numberInputForeground#b7b7ba
  • settings.textInputBackground#19171a
  • settings.textInputBorder#131315
  • settings.textInputForeground#b7b7ba
  • sideBar.background#19171a
  • sideBarSectionHeader.background#211f23
  • sideBarSectionHeader.border#131315
  • sideBarTitle.foreground#b7b7ba
  • statusBar.background#131315
  • statusBar.debuggingBackground#a695e6
  • statusBar.debuggingForeground#131315
  • statusBar.foreground#b7b7ba
  • statusBar.noFolderBackground#131315
  • statusBar.noFolderForeground#b7b7ba
  • statusBarItem.hoverForeground#FFFFFF
  • statusBarItem.prominentBackground#d95679
  • statusBarItem.prominentHoverBackground#f3a485
  • statusBarItem.remoteBackground#a695e6
  • statusBarItem.remoteForeground#211f23
  • tab.activeBackground#211f23
  • tab.activeForeground#FFFFFF
  • tab.border#131315
  • tab.inactiveBackground#19171a
  • tab.inactiveForeground#b7b7ba
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#93a9f9
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#afbff9
  • terminal.ansiBrightCyan#a2d2d6
  • terminal.ansiBrightGreen#c1f1be
  • terminal.ansiBrightMagenta#e3bef2
  • terminal.ansiBrightRed#d95679
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fae8b1
  • terminal.ansiCyan#80cfd6
  • terminal.ansiGreen#a4eb9f
  • terminal.ansiMagenta#deaaf2
  • terminal.ansiRed#cc335f
  • terminal.ansiWhite#b7b7ba
  • terminal.ansiYellow#fade89
  • terminal.background#211f23
  • terminal.foreground#b7b7ba
  • titleBar.activeBackground#19171a
  • titleBar.activeForeground#b7b7ba
  • titleBar.inactiveBackground#131315
  • titleBar.inactiveForeground#4b4b4c
  • walkThrough.embeddedEditorBackground#19171a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class, entity.name.class#80cfd6
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#a695e6italic
entity.other.inherited-class#80cfd6italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#4b4b4c
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#deaaf2
comment.block.documentation entity.name.type#80cfd6italic
comment.block.documentation entity.name.type punctuation.definition.bracket#80cfd6
comment.block.documentation variable#f3a485italic
constant, variable.other.constant#a695e6
constant.character.escape, constant.character.string.escape, constant.regexp#deaaf2
entity.name.tag#cc335f
support.class.component#cc335f
entity.other.attribute-name.parent-selector#a695e6
entity.other.attribute-name#a695e6italic
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#a4eb9f
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, meta.function-call.arguments, variable.parameter#FFFFFFitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a4eb9fitalic
meta.decorator variable.other.object#a4eb9f
keyword, punctuation.definition.keyword#d95679
keyword.control.new, keyword.operator.newbold
meta.selector#deaaf2
support#80cfd6italic
support.constant#a695e6
support.function.magic, support.variable, variable.other.predefined#a695e6regular
support.function, support.type.property-nameregular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.fukurou 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, punctuation.separator.period, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#d95679
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#b7b7ba
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#FFFFFF
variable.other.property#FFFFFF
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#d95679
constant.other.date, constant.other.timestamp#f3a485
variable.other.alias.yaml#a4eb9fitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#d95679regular
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#80cfd6italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f3a485
storage.modifier#d95679
string#fade89
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#4b4b4c
variable, constant.other.key.perl, support.variable.property, variable.other.constant.object, variable.other.constant.js, variable.other.constant.jsx, variable.other.constant.ts, variable.other.constant.tsx, entity.name.variable#d4d4d8
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#f3a485italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#b7b7ba