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#87D8F610
  • activityBar.activeBorder#ff00ff80
  • activityBar.background#002137
  • activityBar.foreground#F6F6F6
  • activityBar.inactiveForeground#024d75
  • activityBarBadge.background#ff00ff
  • activityBarBadge.foreground#F6F6F6
  • badge.background#5A839D
  • badge.foreground#F6F6F6
  • breadcrumb.activeSelectionForeground#F6F6F6
  • breadcrumb.background#011627
  • breadcrumb.focusForeground#F6F6F6
  • breadcrumb.foreground#024d75
  • breadcrumbPicker.background#000A14
  • button.background#5A839D
  • button.foreground#F6F6F6
  • button.secondaryBackground#011627
  • button.secondaryForeground#F6F6F6
  • button.secondaryHoverBackground#002137
  • debugToolBar.background#011627
  • diffEditor.insertedTextBackground#83dd5920
  • diffEditor.removedTextBackground#ff6f6050
  • dropdown.background#002137
  • dropdown.border#000A14
  • dropdown.foreground#F6F6F6
  • editor.background#011627
  • editor.findMatchBackground#FAB42680
  • editor.findMatchHighlightBackground#F6F6F640
  • editor.findRangeHighlightBackground#002137
  • editor.foldBackground#011627
  • editor.foreground#F6F6F6
  • editor.hoverHighlightBackground#459BC950
  • editor.lineHighlightBorder#5A839D
  • editor.rangeHighlightBackground#87D8F615
  • editor.selectionBackground#5A839D
  • editor.selectionHighlightBackground#ABD0CF
  • editor.snippetFinalTabstopHighlightBackground#011627
  • editor.snippetFinalTabstopHighlightBorder#83dd59
  • editor.snippetTabstopHighlightBackground#011627
  • editor.snippetTabstopHighlightBorder#024d75
  • editor.wordHighlightBackground#459BC950
  • editor.wordHighlightStrongBackground#83dd5950
  • editorBracketHighlight.foreground1#F6F6F6
  • editorBracketHighlight.foreground2#ff00ff
  • editorBracketHighlight.foreground3#459BC9
  • editorBracketHighlight.foreground4#83dd59
  • editorBracketHighlight.foreground5#87D8F6
  • editorBracketHighlight.foreground6#FAB426
  • editorBracketHighlight.unexpectedBracket.foreground#ff6f60
  • editorCodeLens.foreground#024d75
  • editorError.foreground#ff6f60
  • editorGroup.border#87D8F6
  • editorGroup.dropBackground#ABD0CF
  • editorGroupHeader.tabsBackground#000A14
  • editorGutter.addedBackground#83dd5980
  • editorGutter.deletedBackground#ff6f6080
  • editorGutter.modifiedBackground#459BC980
  • editorHoverWidget.background#011627
  • editorHoverWidget.border#024d75
  • editorIndentGuide.activeBackground#F6F6F645
  • editorIndentGuide.background#394249
  • editorLineNumber.foreground#024d75
  • editorLink.activeForeground#459BC9
  • editorMarkerNavigation.background#011627
  • editorOverviewRuler.addedForeground#83dd5980
  • editorOverviewRuler.border#000A14
  • editorOverviewRuler.currentContentForeground#83dd59
  • editorOverviewRuler.deletedForeground#ff6f6080
  • editorOverviewRuler.errorForeground#ff6f6080
  • editorOverviewRuler.incomingContentForeground#87D8F6
  • editorOverviewRuler.infoForeground#459BC980
  • editorOverviewRuler.modifiedForeground#459BC980
  • editorOverviewRuler.selectionHighlightForeground#FAB426
  • editorOverviewRuler.warningForeground#FAB42680
  • editorOverviewRuler.wordHighlightForeground#459BC9
  • editorOverviewRuler.wordHighlightStrongForeground#83dd59
  • editorRuler.foreground#394249
  • editorSuggestWidget.background#011627
  • editorSuggestWidget.foreground#F6F6F6
  • editorSuggestWidget.selectedBackground#5A839D
  • editorWarning.foreground#459BC9
  • editorWhitespace.foreground#394249
  • editorWidget.background#011627
  • errorForeground#ff6f60
  • extensionButton.prominentBackground#83dd5990
  • extensionButton.prominentForeground#F6F6F6
  • extensionButton.prominentHoverBackground#83dd5960
  • focusBorder#024d75
  • foreground#F6F6F6
  • gitDecoration.conflictingResourceForeground#FAB426
  • gitDecoration.deletedResourceForeground#ff6f60
  • gitDecoration.ignoredResourceForeground#024d75
  • gitDecoration.modifiedResourceForeground#459BC9
  • gitDecoration.untrackedResourceForeground#83dd59
  • input.background#011627
  • input.border#000A14
  • input.foreground#F6F6F6
  • input.placeholderForeground#024d75
  • inputOption.activeBorder#87D8F6
  • inputValidation.errorBorder#ff6f60
  • inputValidation.infoBorder#ff00ff
  • inputValidation.warningBorder#FAB426
  • list.activeSelectionBackground#5A839D
  • list.activeSelectionForeground#F6F6F6
  • list.dropBackground#5A839D
  • list.errorForeground#ff6f60
  • list.focusBackground#002137
  • list.highlightForeground#459BC9
  • list.hoverBackground#002137
  • list.inactiveSelectionBackground#002137
  • list.warningForeground#FAB426
  • listFilterWidget.background#002137
  • listFilterWidget.noMatchesOutline#ff6f60
  • listFilterWidget.outline#ABD0CF
  • merge.currentHeaderBackground#83dd5990
  • merge.incomingHeaderBackground#87D8F690
  • panel.background#011627
  • panel.border#87D8F6
  • panelTitle.activeBorder#ff00ff
  • panelTitle.activeForeground#F6F6F6
  • panelTitle.inactiveForeground#024d75
  • peekView.border#5A839D
  • peekViewEditor.background#011627
  • peekViewEditor.matchHighlightBackground#F7DD3E80
  • peekViewResult.background#011627
  • peekViewResult.fileForeground#F6F6F6
  • peekViewResult.lineForeground#F6F6F6
  • peekViewResult.matchHighlightBackground#F7DD3E80
  • peekViewResult.selectionBackground#5A839D
  • peekViewResult.selectionForeground#F6F6F6
  • peekViewTitle.background#000A14
  • peekViewTitleDescription.foreground#024d75
  • peekViewTitleLabel.foreground#F6F6F6
  • pickerGroup.border#87D8F6
  • pickerGroup.foreground#459BC9
  • progressBar.background#ff00ff
  • selection.background#87D8F6
  • settings.checkboxBackground#011627
  • settings.checkboxBorder#000A14
  • settings.checkboxForeground#F6F6F6
  • settings.dropdownBackground#011627
  • settings.dropdownBorder#000A14
  • settings.dropdownForeground#F6F6F6
  • settings.headerForeground#F6F6F6
  • settings.modifiedItemIndicator#FAB426
  • settings.numberInputBackground#011627
  • settings.numberInputBorder#000A14
  • settings.numberInputForeground#F6F6F6
  • settings.textInputBackground#011627
  • settings.textInputBorder#000A14
  • settings.textInputForeground#F6F6F6
  • sideBar.background#011627
  • sideBarSectionHeader.background#011627
  • sideBarSectionHeader.border#000A14
  • sideBarTitle.foreground#F6F6F6
  • statusBar.background#000A14
  • statusBar.debuggingBackground#ff6f60
  • statusBar.debuggingForeground#000A14
  • statusBar.foreground#F6F6F6
  • statusBar.noFolderBackground#000A14
  • statusBar.noFolderForeground#F6F6F6
  • statusBarItem.prominentBackground#ff6f60
  • statusBarItem.prominentHoverBackground#FAB426
  • statusBarItem.remoteBackground#87D8F6
  • statusBarItem.remoteForeground#011627
  • tab.activeBackground#011627
  • tab.activeBorderTop#00213780
  • tab.activeForeground#F6F6F6
  • tab.border#000A14
  • tab.inactiveBackground#01162780
  • tab.inactiveForeground#F6F6F680
  • terminal.ansiBlack#011627
  • terminal.ansiBlue#6001d2
  • terminal.ansiBrightBlack#ABD0CF
  • terminal.ansiBrightBlue#6001d2
  • terminal.ansiBrightCyan#459BC9
  • terminal.ansiBrightGreen#83dd59
  • terminal.ansiBrightMagenta#F7DD3E
  • terminal.ansiBrightRed#ff6f60
  • terminal.ansiBrightWhite#F6F6F6
  • terminal.ansiBrightYellow#FAB426
  • terminal.ansiCyan#459BC9
  • terminal.ansiGreen#83dd59
  • terminal.ansiMagenta#F7DD3E
  • terminal.ansiRed#ff6f60
  • terminal.ansiWhite#ABD0CF
  • terminal.ansiYellow#FAB426
  • terminal.background#011627
  • terminal.foreground#F6F6F6
  • titleBar.activeBackground#011627
  • titleBar.activeForeground#F6F6F6
  • titleBar.inactiveBackground#000A14
  • titleBar.inactiveForeground#024d75
  • walkThrough.embeddedEditorBackground#011627

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#87D8F6
meta.diff, meta.diff.header#024d75
markup.inserted#83dd59
markup.deleted#ff6f60
markup.changed#FAB426
invalid#ff6f60underline italic
invalid.deprecated#F6F6F6underline italic
entity.name.filename#F7DD3E
markup.error#ff6f60
markup.underlineunderline
markup.bold#FAB426bold
markup.heading#87D8F6bold
markup.italic#F7DD3Eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#459BC9
markup.inline.raw, markup.raw.restructuredtext#83dd59
markup.underline.link, markup.underline.link.image#459BC9
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff00ff
entity.name.directive.restructuredtext, markup.quote#F7DD3Eitalic
meta.separator.markdown#024d75
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#83dd59
punctuation.definition.constant.restructuredtext#87D8F6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#87D8F6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F6F6F6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F7DD3E
entity.name.type.class, entity.name.class#459BC9normal
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#87D8F6italic
entity.other.inherited-class#459BC9italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#024d75
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff00ff
comment.block.documentation entity.name.type#459BC9italic
comment.block.documentation entity.name.type punctuation.definition.bracket#459BC9
comment.block.documentation variable#FAB426italic
constant, variable.other.constant#87D8F6
constant.character.escape, constant.character.string.escape, constant.regexp#ff00ff
entity.name.tag#ff00ff
entity.other.attribute-name.parent-selector#ff00ff
entity.other.attribute-name#83dd59italic
entity.name.function, 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#83dd59
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#FAB426italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#83dd59italic
meta.decorator variable.other.object#83dd59
keyword, punctuation.definition.keyword#ff00ff
keyword.control.new, keyword.operator.newbold
meta.selector#ff00ff
support#459BC9italic
support.function.magic, support.variable, variable.other.predefined#87D8F6regular
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#ff00ff
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#F6F6F6
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#ff00ff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#459BC9
constant.other.date, constant.other.timestamp#FAB426
variable.other.alias.yaml#83dd59italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff00ffregular
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#459BC9italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FAB426
storage.modifier#ff00ff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F7DD3E
punctuation.definition.group.capture.regexp#ff00ff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff6f60
punctuation.definition.character-class.regexp#459BC9
punctuation.definition.group.regexp#FAB426
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ff6f60
meta.assertion.look-ahead.regexp#83dd59
string#F7DD3E
punctuation.definition.string.begin, punctuation.definition.string.end, string.template punctuation.definition.string, string.template punctuation.definition.string.end, string.template punctuation.definition.string.begin#FAB426
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F7DD3E
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#024d75
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F6F6F6
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FAB426italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F6F6F6normal
meta.selectionset.graphql variable#F7DD3E
meta.selectionset.graphql meta.arguments variable#F6F6F6
entity.name.fragment.graphql, variable.fragment.graphql#459BC9
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#F6F6F6
source.shell variable.other#87D8F6
support.constant#87D8F6normal
meta.scope.prerequisites.makefile#F7DD3E
meta.attribute-selector.scss#F7DD3E
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F6F6F6
meta.preprocessor.haskell#024d75
log.error#ff6f60bold
log.warning#F7DD3Ebold