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#b9b9cc
  • activityBar.background#19191e
  • activityBar.foreground#b9b9cc
  • activityBarBadge.background#bfd1ff
  • activityBarBadge.foreground#37373dff
  • badge.background#bfd1ff
  • badge.foreground#37373dff
  • breadcrumb.activeSelectionForeground#b9b9cc
  • breadcrumb.background#19191e
  • breadcrumb.focusForeground#b9b9cc
  • breadcrumbPicker.background#141418ff
  • button.background#303034ff
  • button.foreground#b9b9cc
  • button.secondaryBackground#19191e
  • button.secondaryForeground#b9b9cc
  • button.secondaryHoverBackground#303034ff
  • debugToolBar.background#16161bff
  • dropdown.background#303034ff
  • dropdown.border#141418ff
  • dropdown.foreground#b9b9cc
  • editor.background#19191e
  • editor.findMatchHighlightBackground#bfd1ff26
  • editor.foreground#b9b9cc
  • editor.lineHighlightBackground#30303440
  • editor.snippetFinalTabstopHighlightBackground#19191e
  • editor.snippetTabstopHighlightBackground#19191e
  • editor.wordHighlightBackground#47474b80
  • editor.wordHighlightStrongBackground#47474bcc
  • editorBracketHighlight.foreground1#b9b9cc
  • editorGroup.border#111114
  • editorGroupHeader.tabsBackground#19191e
  • editorHoverWidget.background#19191e
  • editorLineNumber.foreground#37373dff
  • editorMarkerNavigation.background#16161bff
  • editorOverviewRuler.border#141418ff
  • editorSuggestWidget.background#16161bff
  • editorSuggestWidget.foreground#b9b9cc
  • editorWidget.background#16161bff
  • extensionButton.prominentForeground#b9b9cc
  • focusBorder#bfd1ff
  • foreground#b9b9cc
  • input.background#19191e
  • input.border#141418ff
  • input.foreground#b9b9cc
  • list.activeSelectionBackground#303034ff
  • list.activeSelectionForeground#d5d5e0ff
  • list.highlightForeground#bfd1ff
  • list.hoverBackground#30303480
  • list.inactiveSelectionBackground#30303459
  • listFilterWidget.background#303034ff
  • listFilterWidget.outline#47474bff
  • panel.background#19191e
  • panel.border#111114
  • panelTitle.activeForeground#b9b9cc
  • peekViewEditor.background#19191e
  • peekViewResult.background#16161bff
  • peekViewResult.fileForeground#b9b9cc
  • peekViewResult.lineForeground#b9b9cc
  • peekViewResult.selectionForeground#b9b9cc
  • peekViewTitle.background#141418ff
  • peekViewTitleLabel.foreground#b9b9cc
  • progressBar.background#bfd1ff
  • selection.background#303034ff
  • settings.checkboxBackground#16161bff
  • settings.checkboxBorder#141418ff
  • settings.checkboxForeground#b9b9cc
  • settings.dropdownBackground#16161bff
  • settings.dropdownBorder#141418ff
  • settings.dropdownForeground#b9b9cc
  • settings.headerForeground#b9b9cc
  • settings.numberInputBackground#16161bff
  • settings.numberInputBorder#141418ff
  • settings.numberInputForeground#b9b9cc
  • settings.textInputBackground#16161bff
  • settings.textInputBorder#141418ff
  • settings.textInputForeground#b9b9cc
  • sideBar.background#19191e
  • sideBarSectionHeader.background#19191e
  • sideBarSectionHeader.border#141418ff
  • sideBarTitle.foreground#b9b9cc
  • statusBar.background#19191e
  • statusBar.debuggingBackground#bfd1ff
  • statusBar.debuggingForeground#37373dff
  • statusBar.foreground#b9b9cc
  • statusBar.noFolderBackground#19191e
  • statusBar.noFolderForeground#b9b9cc
  • statusBarItem.hoverForeground#d5d5e0ff
  • statusBarItem.remoteForeground#19191e
  • tab.activeBackground#30303459
  • tab.activeForeground#d5d5e0ff
  • tab.inactiveBackground#19191e
  • tab.inactiveForeground#b9b9cc
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#bac8ff
  • terminal.ansiBrightBlack#373c42
  • terminal.ansiBrightBlue#dbe4ff
  • terminal.ansiBrightCyan#c5f6fa
  • terminal.ansiBrightGreen#d3f9d8
  • terminal.ansiBrightMagenta#f3d9fa
  • terminal.ansiBrightRed#ffa8a8
  • terminal.ansiBrightWhite#cad0da
  • terminal.ansiBrightYellow#fff3bf
  • terminal.ansiCyan#99e9f2
  • terminal.ansiGreen#b2f2bb
  • terminal.ansiMagenta#eebefa
  • terminal.ansiRed#ff8787
  • terminal.ansiWhite#8b95a0
  • terminal.ansiYellow#ffec99
  • terminal.background#19191e
  • terminal.foreground#b9b9cc
  • titleBar.activeBackground#19191e
  • titleBar.activeForeground#b9b9cc
  • titleBar.inactiveBackground#19191e
  • titleBar.inactiveForeground#b9b9cc
  • walkThrough.embeddedEditorBackground#16161bff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class, entity.name.class#a3abcc—
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#a3abccitalic
entity.other.inherited-class#a3abccitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#373c42—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#373c42—
comment.block.documentation entity.name.type#373c42italic
comment.block.documentation entity.name.type punctuation.definition.bracket#373c42—
comment.block.documentation variable#373c42italic
constant#1db9b6—
constant.character.escape, constant.character.string.escape, constant.regexp#1db9b6—
entity.name.tag#85e1c1—
support.class.component#85e1c1—
entity.other.attribute-name.parent-selector#b3b5e8—
entity.other.attribute-name#b3b5e8italic
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#bfd1ff—
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#eae9f1italic
keyword, punctuation.definition.keyword#a8a1e6—
keyword.control.new, keyword.operator.new—bold
meta.selector#a8a1e6—
support.constant#1db9b6—
support.function.magic, support.variable, variable.other.predefined#bfd1ffregular
support.function, support.type.property-name—regular
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#bfd1ff—
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#b9b9cc—
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#d5d5e0ff—
variable.other.property#b3b5e8—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#b3b5e8—
constant.other.date, constant.other.timestamp#b3b5e8—
variable.other.alias.yaml#b3b5e8italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#889bc6regular
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, support#a3abccitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#a3abcc—
storage.modifier#889bc6—
string#85e1c1—
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#373c42—
variable, variable.other.constant, 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#eae9f1—
keyword.operator.new, keyword.control.new#1db9b6bold
support.class.error, keyword.control.trycatch, keyword.operator.expression.delete, keyword.operator.expression.void, keyword.operator.void, keyword.operator.delete, constant.language.null, constant.language.boolean.false, constant.language.undefined#a83e6bbold