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#3464a410
  • activityBar.activeBorder#74507a80
  • activityBar.background#000000
  • activityBar.foreground#b3b7b0
  • activityBar.inactiveForeground#737772
  • activityBarBadge.background#74507a
  • activityBarBadge.foreground#000000
  • badge.background#000000
  • badge.foreground#b3b7b0
  • breadcrumb.activeSelectionForeground#b3b7b0
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#b3b7b0
  • breadcrumb.foreground#737772
  • breadcrumbPicker.background#1c1d1b
  • button.background#383a37
  • button.foreground#b3b7b0
  • checkbox.background#383a37
  • checkbox.border#1c1d1b
  • checkbox.foreground#b3b7b0
  • contrastBorder#1c1d1b
  • debugToolBar.background#383a37
  • diffEditor.insertedTextBackground#4e9a0520
  • diffEditor.removedTextBackground#cc000050
  • dropdown.background#000000
  • dropdown.border#1c1d1b
  • dropdown.foreground#b3b7b0
  • editor.background#000000
  • editor.findMatchBackground#c4a00080
  • editor.findMatchHighlightBackground#ededec40
  • editor.findRangeHighlightBackground#54575375
  • editor.foldBackground#383a37
  • editor.foreground#b3b7b0
  • editor.hoverHighlightBackground#1c1d1b
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#3464a415
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBorder#4e9a05
  • editor.snippetTabstopHighlightBackground#000000
  • editor.snippetTabstopHighlightBorder#737772
  • editor.wordHighlightBackground#05989a50
  • editor.wordHighlightStrongBackground#4e9a0550
  • editorCodeLens.foreground#737772
  • editorError.foreground#cc0000
  • editorGroup.border#3464a4
  • editorGroup.dropBackground#54575370
  • editorGroupHeader.tabsBackground#1c1d1b
  • editorGutter.addedBackground#4e9a0580
  • editorGutter.deletedBackground#cc000080
  • editorGutter.modifiedBackground#05989a80
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#737772
  • editorIndentGuide.activeBackground#ededec45
  • editorIndentGuide.background#ededec1A
  • editorLineNumber.foreground#737772
  • editorLink.activeForeground#05989a
  • editorMarkerNavigation.background#383a37
  • editorOverviewRuler.addedForeground#4e9a0580
  • editorOverviewRuler.border#1c1d1b
  • editorOverviewRuler.currentContentForeground#4e9a05
  • editorOverviewRuler.deletedForeground#cc000080
  • editorOverviewRuler.errorForeground#cc000080
  • editorOverviewRuler.incomingContentForeground#3464a4
  • editorOverviewRuler.infoForeground#05989a80
  • editorOverviewRuler.modifiedForeground#05989a80
  • editorOverviewRuler.selectionHighlightForeground#c4a000
  • editorOverviewRuler.warningForeground#c4a00080
  • editorOverviewRuler.wordHighlightForeground#05989a
  • editorOverviewRuler.wordHighlightStrongForeground#4e9a05
  • editorRuler.foreground#ededec1A
  • editorSuggestWidget.background#383a37
  • editorSuggestWidget.foreground#b3b7b0
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#c4a000
  • editorWhitespace.foreground#ededec1A
  • editorWidget.background#383a37
  • errorForeground#cc0000
  • extensionButton.prominentBackground#4e9a0590
  • extensionButton.prominentForeground#b3b7b0
  • extensionButton.prominentHoverBackground#4e9a0560
  • focusBorder#737772
  • foreground#b3b7b0
  • gitDecoration.conflictingResourceForeground#c4a000
  • gitDecoration.deletedResourceForeground#cc0000
  • gitDecoration.ignoredResourceForeground#737772
  • gitDecoration.modifiedResourceForeground#05989a
  • gitDecoration.untrackedResourceForeground#4e9a05
  • input.background#000000
  • input.border#1c1d1b
  • input.foreground#b3b7b0
  • input.placeholderForeground#737772
  • inputOption.activeBorder#3464a4
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#cc0000
  • inputValidation.errorForeground#cc0000
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#3464a4
  • inputValidation.infoForeground#3464a4
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#c4a000
  • inputValidation.warningForeground#c4a000
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#b3b7b0
  • list.dropBackground#000000
  • list.errorForeground#cc0000
  • list.focusBackground#54575375
  • list.highlightForeground#05989a
  • list.hoverBackground#54575375
  • list.inactiveSelectionBackground#54575375
  • list.warningForeground#c4a000
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#cc0000
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#4e9a0590
  • merge.incomingHeaderBackground#3464a490
  • notification.background#000000
  • notification.buttonBackground#000000
  • notification.buttonForeground#b3b7b0
  • notification.buttonHoverBackground#54575375
  • notification.errorBackground#cc0000
  • notification.errorForeground#000000
  • notification.foreground#b3b7b0
  • notification.infoBackground#3464a4
  • notification.infoForeground#000000
  • notification.warningBackground#c4a000
  • notification.warningForeground#000000
  • notificationCenter.border#383a37
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#b3b7b0
  • notificationLink.foreground#05989a
  • notifications.background#000000
  • notifications.border#383a37
  • notifications.foreground#b3b7b0
  • notificationsErrorIcon.foreground#cc0000
  • notificationsInfoIcon.foreground#3464a4
  • notificationsWarningIcon.foreground#c4a000
  • notificationToast.border#383a37
  • panel.background#000000
  • panel.border#3464a4
  • panelInput.border#b3b7b0
  • panelTitle.activeBorder#74507a
  • panelTitle.activeForeground#b3b7b0
  • panelTitle.inactiveForeground#737772
  • peekView.border#000000
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#fce94e80
  • peekViewResult.background#383a37
  • peekViewResult.fileForeground#b3b7b0
  • peekViewResult.lineForeground#b3b7b0
  • peekViewResult.matchHighlightBackground#fce94e80
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#b3b7b0
  • peekViewTitle.background#1c1d1b
  • peekViewTitleDescription.foreground#737772
  • peekViewTitleLabel.foreground#b3b7b0
  • pickerGroup.border#3464a4
  • pickerGroup.foreground#05989a
  • progressBar.background#74507a
  • scrollbar.shadow#444444
  • selection.background#3464a4
  • settings.checkboxBackground#383a37
  • settings.checkboxBorder#1c1d1b
  • settings.checkboxForeground#b3b7b0
  • settings.dropdownBackground#383a37
  • settings.dropdownBorder#1c1d1b
  • settings.dropdownForeground#b3b7b0
  • settings.headerForeground#b3b7b0
  • settings.modifiedItemIndicator#c4a000
  • settings.numberInputBackground#383a37
  • settings.numberInputBorder#1c1d1b
  • settings.numberInputForeground#b3b7b0
  • settings.textInputBackground#383a37
  • settings.textInputBorder#1c1d1b
  • settings.textInputForeground#b3b7b0
  • sideBar.background#383a37
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#1c1d1b
  • sideBarTitle.foreground#b3b7b0
  • statusBar.background#1c1d1b
  • statusBar.debuggingBackground#cc0000
  • statusBar.debuggingForeground#1c1d1b
  • statusBar.foreground#b3b7b0
  • statusBar.noFolderBackground#1c1d1b
  • statusBar.noFolderForeground#b3b7b0
  • statusBarItem.prominentBackground#cc0000
  • statusBarItem.prominentHoverBackground#c4a000
  • statusBarItem.remoteBackground#3464a4
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#74507a80
  • tab.activeForeground#b3b7b0
  • tab.border#1c1d1b
  • tab.inactiveBackground#383a37
  • tab.inactiveForeground#737772
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3464a4
  • terminal.ansiBrightBlack#545753
  • terminal.ansiBrightBlue#719ecf
  • terminal.ansiBrightCyan#34e2e2
  • terminal.ansiBrightGreen#8ae234
  • terminal.ansiBrightMagenta#ad7ea7
  • terminal.ansiBrightRed#ef2828
  • terminal.ansiBrightWhite#ededec
  • terminal.ansiBrightYellow#fce94e
  • terminal.ansiCyan#05989a
  • terminal.ansiGreen#4e9a05
  • terminal.ansiMagenta#74507a
  • terminal.ansiRed#cc0000
  • terminal.ansiWhite#d3d7cf
  • terminal.ansiYellow#c4a000
  • terminal.background#000000
  • terminal.border#b3b7b0
  • terminal.foreground#b3b7b0
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#383a37
  • titleBar.activeBackground#383a37
  • titleBar.activeForeground#b3b7b0
  • titleBar.inactiveBackground#1c1d1b
  • titleBar.inactiveForeground#737772
  • walkThrough.embeddedEditorBackground#383a37
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#54575375
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#3464a4
source#b3b7b0
meta.diff, meta.diff.header#737772
markup.inserted#4e9a05
markup.deleted#cc0000
markup.changed#c4a000
invalid#cc0000underline italic
invalid.deprecated#b3b7b0underline italic
entity.name.filename#fce94e
markup.error#cc0000
markup.underlineunderline
markup.bold#c4a000bold
markup.heading#3464a4bold
markup.italic#fce94eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#05989a
markup.inline.raw, markup.raw.restructuredtext#4e9a05
markup.underline.link, markup.underline.link.image#05989a
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#74507a
entity.name.directive.restructuredtext, markup.quote#fce94eitalic
meta.separator.markdown#737772
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#4e9a05
punctuation.definition.constant.restructuredtext#3464a4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#3464a4
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#b3b7b0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fce94e
entity.name.type.class, entity.name.class#05989anormal
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#3464a4italic
entity.other.inherited-class#05989aitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#737772
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#74507a
comment.block.documentation entity.name.type#05989aitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#05989a
comment.block.documentation variable#c4a000italic
constant, variable.other.constant#3464a4
constant.character.escape, constant.character.string.escape, constant.regexp#74507a
entity.name.tag#74507a
entity.other.attribute-name.parent-selector#74507a
entity.other.attribute-name#4e9a05italic
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#4e9a05
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#c4a000italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#4e9a05italic
meta.decorator variable.other.object#4e9a05
keyword, punctuation.definition.keyword#74507a
keyword.control.new, keyword.operator.newbold
meta.selector#74507a
support#05989aitalic
support.function.magic, support.variable, variable.other.predefined#3464a4regular
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#74507a
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#b3b7b0
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#74507a
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#05989a
constant.other.date, constant.other.timestamp#c4a000
variable.other.alias.yaml#4e9a05italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#74507aregular
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#05989aitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#c4a000
storage.modifier#74507a
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fce94e
punctuation.definition.group.capture.regexp#74507a
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cc0000
punctuation.definition.character-class.regexp#05989a
punctuation.definition.group.regexp#c4a000
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cc0000
meta.assertion.look-ahead.regexp#4e9a05
string#fce94e
punctuation.definition.string.begin, punctuation.definition.string.end#719ecf
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#3464a4
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#737772
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#b3b7b0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#c4a000italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#b3b7b0normal
meta.selectionset.graphql variable#fce94e
meta.selectionset.graphql meta.arguments variable#b3b7b0
entity.name.fragment.graphql, variable.fragment.graphql#05989a
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#b3b7b0
source.shell variable.other#3464a4
support.constant#3464a4normal
meta.scope.prerequisites.makefile#fce94e
meta.attribute-selector.scss#fce94e
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#b3b7b0
meta.preprocessor.haskell#737772