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
emphasis—italic
strong—bold
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.underline—underline
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.new—bold
meta.selector#ff00ff—
support#459BC9italic
support.function.magic, support.variable, variable.other.predefined#87D8F6regular
support.function, support.type.property-name—regular
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