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#4e76a110
  • activityBar.activeBorder#855b8d80
  • activityBar.background#1e1e1e
  • activityBar.foreground#acafac
  • activityBar.inactiveForeground#949593
  • activityBarBadge.background#855b8d
  • activityBarBadge.foreground#1e1e1e
  • badge.background#3a3c43
  • badge.foreground#acafac
  • breadcrumb.activeSelectionForeground#acafac
  • breadcrumb.background#1e1e1e
  • breadcrumb.focusForeground#acafac
  • breadcrumb.foreground#949593
  • breadcrumbPicker.background#2d2d2d
  • button.background#5a5b5a
  • button.foreground#acafac
  • checkbox.background#5a5b5a
  • checkbox.border#2d2d2d
  • checkbox.foreground#acafac
  • contrastBorder#2d2d2d
  • debugToolBar.background#5a5b5a
  • diffEditor.insertedTextBackground#869a3a20
  • diffEditor.removedTextBackground#be3e4850
  • dropdown.background#1e1e1e
  • dropdown.border#2d2d2d
  • dropdown.foreground#acafac
  • editor.background#1e1e1e
  • editor.findMatchBackground#c4a53580
  • editor.findMatchHighlightBackground#fcffb840
  • editor.findRangeHighlightBackground#88898775
  • editor.foldBackground#5a5b5a
  • editor.foreground#acafac
  • editor.hoverHighlightBackground#2d2d2d
  • editor.lineHighlightBorder#3a3c43
  • editor.rangeHighlightBackground#4e76a115
  • editor.selectionBackground#3a3c43
  • editor.selectionHighlightBackground#3a3c43
  • editor.snippetFinalTabstopHighlightBackground#1e1e1e
  • editor.snippetFinalTabstopHighlightBorder#869a3a
  • editor.snippetTabstopHighlightBackground#1e1e1e
  • editor.snippetTabstopHighlightBorder#949593
  • editor.wordHighlightBackground#568ea350
  • editor.wordHighlightStrongBackground#869a3a50
  • editorCodeLens.foreground#949593
  • editorError.foreground#be3e48
  • editorGroup.border#4e76a1
  • editorGroup.dropBackground#88898770
  • editorGroupHeader.tabsBackground#2d2d2d
  • editorGutter.addedBackground#869a3a80
  • editorGutter.deletedBackground#be3e4880
  • editorGutter.modifiedBackground#568ea380
  • editorHoverWidget.background#1e1e1e
  • editorHoverWidget.border#949593
  • editorIndentGuide.activeBackground#fcffb845
  • editorIndentGuide.background#fcffb81A
  • editorLineNumber.foreground#949593
  • editorLink.activeForeground#568ea3
  • editorMarkerNavigation.background#5a5b5a
  • editorOverviewRuler.addedForeground#869a3a80
  • editorOverviewRuler.border#2d2d2d
  • editorOverviewRuler.currentContentForeground#869a3a
  • editorOverviewRuler.deletedForeground#be3e4880
  • editorOverviewRuler.errorForeground#be3e4880
  • editorOverviewRuler.incomingContentForeground#4e76a1
  • editorOverviewRuler.infoForeground#568ea380
  • editorOverviewRuler.modifiedForeground#568ea380
  • editorOverviewRuler.selectionHighlightForeground#c4a535
  • editorOverviewRuler.warningForeground#c4a53580
  • editorOverviewRuler.wordHighlightForeground#568ea3
  • editorOverviewRuler.wordHighlightStrongForeground#869a3a
  • editorRuler.foreground#fcffb81A
  • editorSuggestWidget.background#5a5b5a
  • editorSuggestWidget.foreground#acafac
  • editorSuggestWidget.selectedBackground#3a3c43
  • editorWarning.foreground#c4a535
  • editorWhitespace.foreground#fcffb81A
  • editorWidget.background#5a5b5a
  • errorForeground#be3e48
  • extensionButton.prominentBackground#869a3a90
  • extensionButton.prominentForeground#acafac
  • extensionButton.prominentHoverBackground#869a3a60
  • focusBorder#949593
  • foreground#acafac
  • gitDecoration.conflictingResourceForeground#c4a535
  • gitDecoration.deletedResourceForeground#be3e48
  • gitDecoration.ignoredResourceForeground#949593
  • gitDecoration.modifiedResourceForeground#568ea3
  • gitDecoration.untrackedResourceForeground#869a3a
  • input.background#1e1e1e
  • input.border#2d2d2d
  • input.foreground#acafac
  • input.placeholderForeground#949593
  • inputOption.activeBorder#4e76a1
  • inputValidation.errorBackground#1e1e1e
  • inputValidation.errorBorder#be3e48
  • inputValidation.errorForeground#be3e48
  • inputValidation.infoBackground#1e1e1e
  • inputValidation.infoBorder#4e76a1
  • inputValidation.infoForeground#4e76a1
  • inputValidation.warningBackground#1e1e1e
  • inputValidation.warningBorder#c4a535
  • inputValidation.warningForeground#c4a535
  • list.activeSelectionBackground#3a3c43
  • list.activeSelectionForeground#acafac
  • list.dropBackground#3a3c43
  • list.errorForeground#be3e48
  • list.focusBackground#88898775
  • list.highlightForeground#568ea3
  • list.hoverBackground#88898775
  • list.inactiveSelectionBackground#88898775
  • list.warningForeground#c4a535
  • listFilterWidget.background#1e1e1e
  • listFilterWidget.noMatchesOutline#be3e48
  • listFilterWidget.outline#3a3c43
  • merge.currentHeaderBackground#869a3a90
  • merge.incomingHeaderBackground#4e76a190
  • notification.background#1e1e1e
  • notification.buttonBackground#3a3c43
  • notification.buttonForeground#acafac
  • notification.buttonHoverBackground#88898775
  • notification.errorBackground#be3e48
  • notification.errorForeground#1e1e1e
  • notification.foreground#acafac
  • notification.infoBackground#4e76a1
  • notification.infoForeground#1e1e1e
  • notification.warningBackground#c4a535
  • notification.warningForeground#1e1e1e
  • notificationCenter.border#5a5b5a
  • notificationCenterHeader.background#1e1e1e
  • notificationCenterHeader.foreground#acafac
  • notificationLink.foreground#568ea3
  • notifications.background#1e1e1e
  • notifications.border#5a5b5a
  • notifications.foreground#acafac
  • notificationsErrorIcon.foreground#be3e48
  • notificationsInfoIcon.foreground#4e76a1
  • notificationsWarningIcon.foreground#c4a535
  • notificationToast.border#5a5b5a
  • panel.background#1e1e1e
  • panel.border#4e76a1
  • panelInput.border#acafac
  • panelTitle.activeBorder#855b8d
  • panelTitle.activeForeground#acafac
  • panelTitle.inactiveForeground#949593
  • peekView.border#3a3c43
  • peekViewEditor.background#1e1e1e
  • peekViewEditor.matchHighlightBackground#c3703380
  • peekViewResult.background#5a5b5a
  • peekViewResult.fileForeground#acafac
  • peekViewResult.lineForeground#acafac
  • peekViewResult.matchHighlightBackground#c3703380
  • peekViewResult.selectionBackground#3a3c43
  • peekViewResult.selectionForeground#acafac
  • peekViewTitle.background#2d2d2d
  • peekViewTitleDescription.foreground#949593
  • peekViewTitleLabel.foreground#acafac
  • pickerGroup.border#4e76a1
  • pickerGroup.foreground#568ea3
  • progressBar.background#855b8d
  • scrollbar.shadow#444444
  • selection.background#4e76a1
  • settings.checkboxBackground#5a5b5a
  • settings.checkboxBorder#2d2d2d
  • settings.checkboxForeground#acafac
  • settings.dropdownBackground#5a5b5a
  • settings.dropdownBorder#2d2d2d
  • settings.dropdownForeground#acafac
  • settings.headerForeground#acafac
  • settings.modifiedItemIndicator#c4a535
  • settings.numberInputBackground#5a5b5a
  • settings.numberInputBorder#2d2d2d
  • settings.numberInputForeground#acafac
  • settings.textInputBackground#5a5b5a
  • settings.textInputBorder#2d2d2d
  • settings.textInputForeground#acafac
  • sideBar.background#5a5b5a
  • sideBarSectionHeader.background#1e1e1e
  • sideBarSectionHeader.border#2d2d2d
  • sideBarTitle.foreground#acafac
  • statusBar.background#2d2d2d
  • statusBar.debuggingBackground#be3e48
  • statusBar.debuggingForeground#2d2d2d
  • statusBar.foreground#acafac
  • statusBar.noFolderBackground#2d2d2d
  • statusBar.noFolderForeground#acafac
  • statusBarItem.prominentBackground#be3e48
  • statusBarItem.prominentHoverBackground#c4a535
  • statusBarItem.remoteBackground#4e76a1
  • statusBarItem.remoteForeground#1e1e1e
  • tab.activeBackground#1e1e1e
  • tab.activeBorderTop#855b8d80
  • tab.activeForeground#acafac
  • tab.border#2d2d2d
  • tab.inactiveBackground#5a5b5a
  • tab.inactiveForeground#949593
  • terminal.ansiBlack#3a3c43
  • terminal.ansiBlue#4e76a1
  • terminal.ansiBrightBlack#888987
  • terminal.ansiBrightBlue#176ce3
  • terminal.ansiBrightCyan#2d6f6c
  • terminal.ansiBrightGreen#0e712e
  • terminal.ansiBrightMagenta#fb0067
  • terminal.ansiBrightRed#fb001e
  • terminal.ansiBrightWhite#fcffb8
  • terminal.ansiBrightYellow#c37033
  • terminal.ansiCyan#568ea3
  • terminal.ansiGreen#869a3a
  • terminal.ansiMagenta#855b8d
  • terminal.ansiRed#be3e48
  • terminal.ansiWhite#b8bcb9
  • terminal.ansiYellow#c4a535
  • terminal.background#1e1e1e
  • terminal.border#acafac
  • terminal.foreground#acafac
  • terminal.selectionBackground#3a3c4350
  • textBlockQuote.background#5a5b5a
  • titleBar.activeBackground#5a5b5a
  • titleBar.activeForeground#acafac
  • titleBar.inactiveBackground#2d2d2d
  • titleBar.inactiveForeground#949593
  • walkThrough.embeddedEditorBackground#5a5b5a
  • welcomePage.buttonBackground#3a3c43
  • welcomePage.buttonHoverBackground#88898775
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#4e76a1
source#acafac
meta.diff, meta.diff.header#949593
markup.inserted#869a3a
markup.deleted#be3e48
markup.changed#c4a535
invalid#be3e48underline italic
invalid.deprecated#acafacunderline italic
entity.name.filename#c37033
markup.error#be3e48
markup.underlineunderline
markup.bold#c4a535bold
markup.heading#4e76a1bold
markup.italic#c37033italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#568ea3
markup.inline.raw, markup.raw.restructuredtext#869a3a
markup.underline.link, markup.underline.link.image#568ea3
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#855b8d
entity.name.directive.restructuredtext, markup.quote#c37033italic
meta.separator.markdown#949593
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#869a3a
punctuation.definition.constant.restructuredtext#4e76a1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#4e76a1
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#acafac
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#c37033
entity.name.type.class, entity.name.class#568ea3normal
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#4e76a1italic
entity.other.inherited-class#568ea3italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#949593
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#855b8d
comment.block.documentation entity.name.type#568ea3italic
comment.block.documentation entity.name.type punctuation.definition.bracket#568ea3
comment.block.documentation variable#c4a535italic
constant, variable.other.constant#4e76a1
constant.character.escape, constant.character.string.escape, constant.regexp#855b8d
entity.name.tag#855b8d
entity.other.attribute-name.parent-selector#855b8d
entity.other.attribute-name#869a3aitalic
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#869a3a
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#c4a535italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#869a3aitalic
meta.decorator variable.other.object#869a3a
keyword, punctuation.definition.keyword#855b8d
keyword.control.new, keyword.operator.newbold
meta.selector#855b8d
support#568ea3italic
support.function.magic, support.variable, variable.other.predefined#4e76a1regular
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#855b8d
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#acafac
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#855b8d
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#568ea3
constant.other.date, constant.other.timestamp#c4a535
variable.other.alias.yaml#869a3aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#855b8dregular
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#568ea3italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#c4a535
storage.modifier#855b8d
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#c37033
punctuation.definition.group.capture.regexp#855b8d
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#be3e48
punctuation.definition.character-class.regexp#568ea3
punctuation.definition.group.regexp#c4a535
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#be3e48
meta.assertion.look-ahead.regexp#869a3a
string#c37033
punctuation.definition.string.begin, punctuation.definition.string.end#176ce3
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4e76a1
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#949593
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#acafac
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#c4a535italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#acafacnormal
meta.selectionset.graphql variable#c37033
meta.selectionset.graphql meta.arguments variable#acafac
entity.name.fragment.graphql, variable.fragment.graphql#568ea3
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#acafac
source.shell variable.other#4e76a1
support.constant#4e76a1normal
meta.scope.prerequisites.makefile#c37033
meta.attribute-selector.scss#c37033
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#acafac
meta.preprocessor.haskell#949593