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#2ec3b910
  • activityBar.activeBorder#50a09680
  • activityBar.background#2c2c2c
  • activityBar.foreground#add5b6
  • activityBar.inactiveForeground#3b843e
  • activityBarBadge.background#50a096
  • activityBarBadge.foreground#2c2c2c
  • badge.background#014401
  • badge.foreground#add5b6
  • breadcrumb.activeSelectionForeground#add5b6
  • breadcrumb.background#2c2c2c
  • breadcrumb.focusForeground#add5b6
  • breadcrumb.foreground#3b843e
  • breadcrumbPicker.background#001e00
  • button.background#013d01
  • button.foreground#add5b6
  • checkbox.background#013d01
  • checkbox.border#001e00
  • checkbox.foreground#add5b6
  • contrastBorder#001e00
  • debugToolBar.background#013d01
  • diffEditor.insertedTextBackground#41a63820
  • diffEditor.removedTextBackground#fe263550
  • dropdown.background#2c2c2c
  • dropdown.border#001e00
  • dropdown.foreground#add5b6
  • editor.background#2c2c2c
  • editor.findMatchBackground#76a83080
  • editor.findMatchHighlightBackground#e0f1dc40
  • editor.findRangeHighlightBackground#025c0275
  • editor.foldBackground#013d01
  • editor.foreground#add5b6
  • editor.hoverHighlightBackground#001e00
  • editor.lineHighlightBorder#014401
  • editor.rangeHighlightBackground#2ec3b915
  • editor.selectionBackground#014401
  • editor.selectionHighlightBackground#014401
  • editor.snippetFinalTabstopHighlightBackground#2c2c2c
  • editor.snippetFinalTabstopHighlightBorder#41a638
  • editor.snippetTabstopHighlightBackground#2c2c2c
  • editor.snippetTabstopHighlightBorder#3b843e
  • editor.wordHighlightBackground#3ca07850
  • editor.wordHighlightStrongBackground#41a63850
  • editorCodeLens.foreground#3b843e
  • editorError.foreground#fe2635
  • editorGroup.border#2ec3b9
  • editorGroup.dropBackground#025c0270
  • editorGroupHeader.tabsBackground#001e00
  • editorGutter.addedBackground#41a63880
  • editorGutter.deletedBackground#fe263580
  • editorGutter.modifiedBackground#3ca07880
  • editorHoverWidget.background#2c2c2c
  • editorHoverWidget.border#3b843e
  • editorIndentGuide.activeBackground#e0f1dc45
  • editorIndentGuide.background#e0f1dc1A
  • editorLineNumber.foreground#3b843e
  • editorLink.activeForeground#3ca078
  • editorMarkerNavigation.background#013d01
  • editorOverviewRuler.addedForeground#41a63880
  • editorOverviewRuler.border#001e00
  • editorOverviewRuler.currentContentForeground#41a638
  • editorOverviewRuler.deletedForeground#fe263580
  • editorOverviewRuler.errorForeground#fe263580
  • editorOverviewRuler.incomingContentForeground#2ec3b9
  • editorOverviewRuler.infoForeground#3ca07880
  • editorOverviewRuler.modifiedForeground#3ca07880
  • editorOverviewRuler.selectionHighlightForeground#76a830
  • editorOverviewRuler.warningForeground#76a83080
  • editorOverviewRuler.wordHighlightForeground#3ca078
  • editorOverviewRuler.wordHighlightStrongForeground#41a638
  • editorRuler.foreground#e0f1dc1A
  • editorSuggestWidget.background#013d01
  • editorSuggestWidget.foreground#add5b6
  • editorSuggestWidget.selectedBackground#014401
  • editorWarning.foreground#76a830
  • editorWhitespace.foreground#e0f1dc1A
  • editorWidget.background#013d01
  • errorForeground#fe2635
  • extensionButton.prominentBackground#41a63890
  • extensionButton.prominentForeground#add5b6
  • extensionButton.prominentHoverBackground#41a63860
  • focusBorder#3b843e
  • foreground#add5b6
  • gitDecoration.conflictingResourceForeground#76a830
  • gitDecoration.deletedResourceForeground#fe2635
  • gitDecoration.ignoredResourceForeground#3b843e
  • gitDecoration.modifiedResourceForeground#3ca078
  • gitDecoration.untrackedResourceForeground#41a638
  • input.background#2c2c2c
  • input.border#001e00
  • input.foreground#add5b6
  • input.placeholderForeground#3b843e
  • inputOption.activeBorder#2ec3b9
  • inputValidation.errorBackground#2c2c2c
  • inputValidation.errorBorder#fe2635
  • inputValidation.errorForeground#fe2635
  • inputValidation.infoBackground#2c2c2c
  • inputValidation.infoBorder#2ec3b9
  • inputValidation.infoForeground#2ec3b9
  • inputValidation.warningBackground#2c2c2c
  • inputValidation.warningBorder#76a830
  • inputValidation.warningForeground#76a830
  • list.activeSelectionBackground#014401
  • list.activeSelectionForeground#add5b6
  • list.dropBackground#014401
  • list.errorForeground#fe2635
  • list.focusBackground#025c0275
  • list.highlightForeground#3ca078
  • list.hoverBackground#025c0275
  • list.inactiveSelectionBackground#025c0275
  • list.warningForeground#76a830
  • listFilterWidget.background#2c2c2c
  • listFilterWidget.noMatchesOutline#fe2635
  • listFilterWidget.outline#014401
  • merge.currentHeaderBackground#41a63890
  • merge.incomingHeaderBackground#2ec3b990
  • notification.background#2c2c2c
  • notification.buttonBackground#014401
  • notification.buttonForeground#add5b6
  • notification.buttonHoverBackground#025c0275
  • notification.errorBackground#fe2635
  • notification.errorForeground#2c2c2c
  • notification.foreground#add5b6
  • notification.infoBackground#2ec3b9
  • notification.infoForeground#2c2c2c
  • notification.warningBackground#76a830
  • notification.warningForeground#2c2c2c
  • notificationCenter.border#013d01
  • notificationCenterHeader.background#2c2c2c
  • notificationCenterHeader.foreground#add5b6
  • notificationLink.foreground#3ca078
  • notifications.background#2c2c2c
  • notifications.border#013d01
  • notifications.foreground#add5b6
  • notificationsErrorIcon.foreground#fe2635
  • notificationsInfoIcon.foreground#2ec3b9
  • notificationsWarningIcon.foreground#76a830
  • notificationToast.border#013d01
  • panel.background#2c2c2c
  • panel.border#2ec3b9
  • panelInput.border#add5b6
  • panelTitle.activeBorder#50a096
  • panelTitle.activeForeground#add5b6
  • panelTitle.inactiveForeground#3b843e
  • peekView.border#014401
  • peekViewEditor.background#2c2c2c
  • peekViewEditor.matchHighlightBackground#dafa8780
  • peekViewResult.background#013d01
  • peekViewResult.fileForeground#add5b6
  • peekViewResult.lineForeground#add5b6
  • peekViewResult.matchHighlightBackground#dafa8780
  • peekViewResult.selectionBackground#014401
  • peekViewResult.selectionForeground#add5b6
  • peekViewTitle.background#001e00
  • peekViewTitleDescription.foreground#3b843e
  • peekViewTitleLabel.foreground#add5b6
  • pickerGroup.border#2ec3b9
  • pickerGroup.foreground#3ca078
  • progressBar.background#50a096
  • scrollbar.shadow#444444
  • selection.background#2ec3b9
  • settings.checkboxBackground#013d01
  • settings.checkboxBorder#001e00
  • settings.checkboxForeground#add5b6
  • settings.dropdownBackground#013d01
  • settings.dropdownBorder#001e00
  • settings.dropdownForeground#add5b6
  • settings.headerForeground#add5b6
  • settings.modifiedItemIndicator#76a830
  • settings.numberInputBackground#013d01
  • settings.numberInputBorder#001e00
  • settings.numberInputForeground#add5b6
  • settings.textInputBackground#013d01
  • settings.textInputBorder#001e00
  • settings.textInputForeground#add5b6
  • sideBar.background#013d01
  • sideBarSectionHeader.background#2c2c2c
  • sideBarSectionHeader.border#001e00
  • sideBarTitle.foreground#add5b6
  • statusBar.background#001e00
  • statusBar.debuggingBackground#fe2635
  • statusBar.debuggingForeground#001e00
  • statusBar.foreground#add5b6
  • statusBar.noFolderBackground#001e00
  • statusBar.noFolderForeground#add5b6
  • statusBarItem.prominentBackground#fe2635
  • statusBarItem.prominentHoverBackground#76a830
  • statusBarItem.remoteBackground#2ec3b9
  • statusBarItem.remoteForeground#2c2c2c
  • tab.activeBackground#2c2c2c
  • tab.activeBorderTop#50a09680
  • tab.activeForeground#add5b6
  • tab.border#001e00
  • tab.inactiveBackground#013d01
  • tab.inactiveForeground#3b843e
  • terminal.ansiBlack#014401
  • terminal.ansiBlue#2ec3b9
  • terminal.ansiBrightBlack#025c02
  • terminal.ansiBrightBlue#2efaeb
  • terminal.ansiBrightCyan#3cfac8
  • terminal.ansiBrightGreen#aefa86
  • terminal.ansiBrightMagenta#50fafa
  • terminal.ansiBrightRed#b4fa5c
  • terminal.ansiBrightWhite#e0f1dc
  • terminal.ansiBrightYellow#dafa87
  • terminal.ansiCyan#3ca078
  • terminal.ansiGreen#41a638
  • terminal.ansiMagenta#50a096
  • terminal.ansiRed#fe2635
  • terminal.ansiWhite#e6fef2
  • terminal.ansiYellow#76a830
  • terminal.background#2c2c2c
  • terminal.border#add5b6
  • terminal.foreground#add5b6
  • terminal.selectionBackground#01440150
  • textBlockQuote.background#013d01
  • titleBar.activeBackground#013d01
  • titleBar.activeForeground#add5b6
  • titleBar.inactiveBackground#001e00
  • titleBar.inactiveForeground#3b843e
  • walkThrough.embeddedEditorBackground#013d01
  • welcomePage.buttonBackground#014401
  • welcomePage.buttonHoverBackground#025c0275
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#2ec3b9
source#add5b6
meta.diff, meta.diff.header#3b843e
markup.inserted#41a638
markup.deleted#fe2635
markup.changed#76a830
invalid#fe2635underline italic
invalid.deprecated#add5b6underline italic
entity.name.filename#dafa87
markup.error#fe2635
markup.underlineunderline
markup.bold#76a830bold
markup.heading#2ec3b9bold
markup.italic#dafa87italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#3ca078
markup.inline.raw, markup.raw.restructuredtext#41a638
markup.underline.link, markup.underline.link.image#3ca078
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#50a096
entity.name.directive.restructuredtext, markup.quote#dafa87italic
meta.separator.markdown#3b843e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#41a638
punctuation.definition.constant.restructuredtext#2ec3b9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#2ec3b9
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#add5b6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#dafa87
entity.name.type.class, entity.name.class#3ca078normal
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#2ec3b9italic
entity.other.inherited-class#3ca078italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#3b843e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#50a096
comment.block.documentation entity.name.type#3ca078italic
comment.block.documentation entity.name.type punctuation.definition.bracket#3ca078
comment.block.documentation variable#76a830italic
constant, variable.other.constant#2ec3b9
constant.character.escape, constant.character.string.escape, constant.regexp#50a096
entity.name.tag#50a096
entity.other.attribute-name.parent-selector#50a096
entity.other.attribute-name#41a638italic
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#41a638
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#76a830italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#41a638italic
meta.decorator variable.other.object#41a638
keyword, punctuation.definition.keyword#50a096
keyword.control.new, keyword.operator.newbold
meta.selector#50a096
support#3ca078italic
support.function.magic, support.variable, variable.other.predefined#2ec3b9regular
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#50a096
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#add5b6
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#50a096
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#3ca078
constant.other.date, constant.other.timestamp#76a830
variable.other.alias.yaml#41a638italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#50a096regular
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#3ca078italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#76a830
storage.modifier#50a096
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#dafa87
punctuation.definition.group.capture.regexp#50a096
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#fe2635
punctuation.definition.character-class.regexp#3ca078
punctuation.definition.group.regexp#76a830
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#fe2635
meta.assertion.look-ahead.regexp#41a638
string#dafa87
punctuation.definition.string.begin, punctuation.definition.string.end#2efaeb
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#2ec3b9
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#3b843e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#add5b6
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#76a830italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#add5b6normal
meta.selectionset.graphql variable#dafa87
meta.selectionset.graphql meta.arguments variable#add5b6
entity.name.fragment.graphql, variable.fragment.graphql#3ca078
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#add5b6
source.shell variable.other#2ec3b9
support.constant#2ec3b9normal
meta.scope.prerequisites.makefile#dafa87
meta.attribute-selector.scss#dafa87
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#add5b6
meta.preprocessor.haskell#3b843e