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#AB9DF210
  • activityBar.activeBorder#FF618880
  • activityBar.background#2D2A2E
  • activityBar.foreground#FCFCFA
  • activityBar.inactiveForeground#727072
  • activityBarBadge.background#FF6188
  • activityBarBadge.foreground#FCFCFA
  • badge.background#403E41
  • badge.foreground#FCFCFA
  • breadcrumb.activeSelectionForeground#FCFCFA
  • breadcrumb.background#2D2A2E
  • breadcrumb.focusForeground#FCFCFA
  • breadcrumb.foreground#727072
  • breadcrumbPicker.background#1A1A1C
  • button.background#403E41
  • button.foreground#FCFCFA
  • contrastBorder#1A1A1C
  • debugToolBar.background#211F22
  • diffEditor.insertedTextBackground#A9DC7620
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#2D2A2E
  • dropdown.border#1A1A1C
  • dropdown.foreground#FCFCFA
  • editor.background#2D2A2E
  • editor.findMatchBackground#FC986780
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#2D2A2E75
  • editor.foldBackground#211F22
  • editor.foreground#FCFCFA
  • editor.hoverHighlightBackground#78DCE850
  • editor.lineHighlightBorder#403E41
  • editor.rangeHighlightBackground#AB9DF215
  • editor.selectionBackground#403E41
  • editor.selectionHighlightBackground#3D3B40
  • editor.snippetFinalTabstopHighlightBackground#2D2A2E
  • editor.snippetFinalTabstopHighlightBorder#A9DC76
  • editor.snippetTabstopHighlightBackground#2D2A2E
  • editor.snippetTabstopHighlightBorder#727072
  • editor.wordHighlightBackground#78DCE850
  • editor.wordHighlightStrongBackground#A9DC7650
  • editorCodeLens.foreground#727072
  • editorError.foreground#FF5555
  • editorGroup.Border#3D3B40
  • editorGroup.dropBackground#2D2A2E70
  • editorGroupHeader.tabsBackground#1A1A1C
  • editorGutter.addedBackground#A9DC7680
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#78DCE880
  • editorHoverWidget.background#2D2A2E
  • editorHoverWidget.border#727072
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#727072
  • editorLink.activeForeground#78DCE8
  • editorMarkerNavigation.background#211F22
  • editorOverviewRuler.addedForeground#A9DC7680
  • editorOverviewRuler.border#1A1A1C
  • editorOverviewRuler.currentContentForeground#A9DC76
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#AB9DF2
  • editorOverviewRuler.infoForeground#78DCE880
  • editorOverviewRuler.modifiedForeground#78DCE880
  • editorOverviewRuler.selectionHighlightForeground#FC9867
  • editorOverviewRuler.warningForeground#FC986780
  • editorOverviewRuler.wordHighlightForeground#78DCE8
  • editorOverviewRuler.wordHighlightStrongForeground#A9DC76
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#211F22
  • editorSuggestWidget.foreground#FCFCFA
  • editorSuggestWidget.selectedBackground#403E41
  • editorWarning.foreground#78DCE8
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#211F22
  • errorForeground#FF5555
  • extensionButton.prominentBackground#A9DC7690
  • extensionButton.prominentForeground#FCFCFA
  • extensionButton.prominentHoverBackground#A9DC7660
  • focusBorder#727072
  • foreground#FCFCFA
  • gitDecoration.conflictingResourceForeground#FC9867
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#727072
  • gitDecoration.modifiedResourceForeground#78DCE8
  • gitDecoration.untrackedResourceForeground#A9DC76
  • input.background#2D2A2E
  • input.border#1A1A1C
  • input.foreground#FCFCFA
  • input.placeholderForeground#727072
  • inputOption.activeBorder#3D3B40
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#FF6188
  • inputValidation.warningBorder#FC9867
  • list.activeSelectionBackground#403E41
  • list.activeSelectionForeground#FCFCFA
  • list.dropBackground#403E41
  • list.errorForeground#FF5555
  • list.focusBackground#2D2A2E75
  • list.highlightForeground#78DCE8
  • list.hoverBackground#2D2A2E75
  • list.inactiveSelectionBackground#2D2A2E75
  • list.warningForeground#FC9867
  • listFilterWidget.background#2D2A2E
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#3D3B40
  • merge.currentHeaderBackground#A9DC7690
  • merge.incomingHeaderBackground#AB9DF290
  • notification.background#2D2A2E
  • notification.buttonBackground#403E41
  • notification.buttonForeground#FCFCFA
  • notification.buttonHoverBackground#2D2A2E75
  • notification.errorBackground#FF5555
  • notification.errorForeground#FCFCFA
  • notification.foreground#FCFCFA
  • notification.infoBackground#78DCE8
  • notification.infoForeground#2D2A2E
  • notification.warningBackground#FC9867
  • notification.warningForeground#2D2A2E
  • panel.background#2D2A2E
  • panel.Border#3D3B40
  • panelTitle.activeBorder#FF6188
  • panelTitle.activeForeground#FCFCFA
  • panelTitle.inactiveForeground#727072
  • peekView.border#403E41
  • peekViewEditor.background#2D2A2E
  • peekViewEditor.matchHighlightBackground#FFD86680
  • peekViewResult.background#211F22
  • peekViewResult.fileForeground#FCFCFA
  • peekViewResult.lineForeground#FCFCFA
  • peekViewResult.matchHighlightBackground#FFD86680
  • peekViewResult.selectionBackground#403E41
  • peekViewResult.selectionForeground#FCFCFA
  • peekViewTitle.background#1A1A1C
  • peekViewTitleDescription.foreground#727072
  • peekViewTitleLabel.foreground#FCFCFA
  • pickerGroup.Border#3D3B40
  • pickerGroup.foreground#78DCE8
  • progressBar.background#FF6188
  • selection.background#AB9DF2
  • settings.checkboxBackground#211F22
  • settings.checkboxBorder#1A1A1C
  • settings.checkboxForeground#FCFCFA
  • settings.dropdownBackground#211F22
  • settings.dropdownBorder#1A1A1C
  • settings.dropdownForeground#FCFCFA
  • settings.headerForeground#FCFCFA
  • settings.modifiedItemForeground#FC9867
  • settings.modifiedItemIndicator#FC9867
  • settings.numberInputBackground#211F22
  • settings.numberInputBorder#1A1A1C
  • settings.numberInputForeground#FCFCFA
  • settings.textInputBackground#211F22
  • settings.textInputBorder#1A1A1C
  • settings.textInputForeground#FCFCFA
  • sideBar.background#211F22
  • sideBarSectionHeader.background#2D2A2E
  • sideBarSectionHeader.border#1A1A1C
  • sideBarTitle.foreground#FCFCFA
  • statusBar.background#1A1A1C
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#1A1A1C
  • statusBar.foreground#FCFCFA
  • statusBar.noFolderBackground#1A1A1C
  • statusBar.noFolderForeground#FCFCFA
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#FC9867
  • statusBarItem.remoteBackground#AB9DF2
  • statusBarItem.remoteForeground#FCFCFA
  • tab.activeBackground#2D2A2E
  • tab.activeBorderTop#FF618880
  • tab.activeForeground#FCFCFA
  • tab.border#1A1A1C
  • tab.inactiveBackground#211F22
  • tab.inactiveForeground#727072
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#AB9DF2
  • terminal.ansiBrightBlack#727072
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#78DCE8
  • terminal.ansiGreen#A9DC76
  • terminal.ansiMagenta#FF6188
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#FCFCFA
  • terminal.ansiYellow#FFD866
  • terminal.background#2D2A2E
  • terminal.foreground#FCFCFA
  • titleBar.activeBackground#211F22
  • titleBar.activeForeground#FCFCFA
  • titleBar.inactiveBackground#1A1A1C
  • titleBar.inactiveForeground#727072
  • walkThrough.embeddedEditorBackground#211F22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#AB9DF2
source#FCFCFA
meta.diff, meta.diff.header#727072
markup.inserted#A9DC76
markup.deleted#FF5555
markup.changed#FC9867
invalid#FF5555underline italic
invalid.deprecated#FCFCFAunderline italic
entity.name.filename#FFD866
markup.error#FF5555
markup.underlineunderline
markup.bold#FC9867bold
markup.heading#AB9DF2bold
markup.italic#FFD866italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#78DCE8
markup.inline.raw, markup.raw.restructuredtext#A9DC76
markup.underline.link, markup.underline.link.image#78DCE8
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF6188
entity.name.directive.restructuredtext, markup.quote#FFD866italic
meta.separator.markdown#727072
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#A9DC76
punctuation.definition.constant.restructuredtext#AB9DF2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#AB9DF2
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#FCFCFA
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#FFD866
entity.name.type.class, entity.name.class#78DCE8normal
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#AB9DF2italic
entity.other.inherited-class#78DCE8italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#727072
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF6188
comment.block.documentation entity.name.type#78DCE8italic
comment.block.documentation entity.name.type punctuation.definition.bracket#78DCE8
comment.block.documentation variable#FC9867italic
constant, variable.other.constant#AB9DF2
constant.character.escape, constant.character.string.escape, constant.regexp#FF6188
entity.name.tag#FF6188
entity.other.attribute-name.parent-selector#FF6188
entity.other.attribute-name#A9DC76italic
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#A9DC76
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#FC9867italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#A9DC76italic
meta.decorator variable.other.object#A9DC76
keyword, punctuation.definition.keyword#FF6188
keyword.control.new, keyword.operator.newbold
meta.selector#FF6188
support#78DCE8italic
support.function.magic, support.variable, variable.other.predefined#AB9DF2regular
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#FF6188
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#FCFCFA
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#FF6188
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#78DCE8
constant.other.date, constant.other.timestamp#FC9867
variable.other.alias.yaml#A9DC76italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF6188regular
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#78DCE8italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FC9867
storage.modifier#FF6188
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFD866
punctuation.definition.group.capture.regexp#FF6188
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#78DCE8
punctuation.definition.group.regexp#FC9867
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#A9DC76
string#FFD866
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#727072
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#FCFCFA
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FC9867italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#FCFCFAnormal
meta.selectionset.graphql variable#FFD866
meta.selectionset.graphql meta.arguments variable#FCFCFA
entity.name.fragment.graphql, variable.fragment.graphql#78DCE8
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#FCFCFA
source.shell variable.other#AB9DF2
support.constant#AB9DF2normal
meta.scope.prerequisites.makefile#FFD866
meta.attribute-selector.scss#FFD866
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#FCFCFA
meta.preprocessor.haskell#727072