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#4098ff10
  • activityBar.activeBorder#f57fff80
  • activityBar.background#323232
  • activityBar.foreground#c7c7c5
  • activityBar.inactiveForeground#797979
  • activityBarBadge.background#f57fff
  • activityBarBadge.foreground#323232
  • badge.background#323232
  • badge.foreground#c7c7c5
  • breadcrumb.activeSelectionForeground#c7c7c5
  • breadcrumb.background#323232
  • breadcrumb.focusForeground#c7c7c5
  • breadcrumb.foreground#797979
  • breadcrumbPicker.background#1b1b1b
  • button.background#373737
  • button.foreground#c7c7c5
  • checkbox.background#373737
  • checkbox.border#1b1b1b
  • checkbox.foreground#c7c7c5
  • contrastBorder#1b1b1b
  • debugToolBar.background#373737
  • diffEditor.insertedTextBackground#7fe17320
  • diffEditor.removedTextBackground#d2525250
  • dropdown.background#323232
  • dropdown.border#1b1b1b
  • dropdown.foreground#c7c7c5
  • editor.background#323232
  • editor.findMatchBackground#ffc66d80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#53535375
  • editor.foldBackground#373737
  • editor.foreground#c7c7c5
  • editor.hoverHighlightBackground#1b1b1b
  • editor.lineHighlightBorder#323232
  • editor.rangeHighlightBackground#4098ff15
  • editor.selectionBackground#323232
  • editor.selectionHighlightBackground#323232
  • editor.snippetFinalTabstopHighlightBackground#323232
  • editor.snippetFinalTabstopHighlightBorder#7fe173
  • editor.snippetTabstopHighlightBackground#323232
  • editor.snippetTabstopHighlightBorder#797979
  • editor.wordHighlightBackground#bed6ff50
  • editor.wordHighlightStrongBackground#7fe17350
  • editorCodeLens.foreground#797979
  • editorError.foreground#d25252
  • editorGroup.border#4098ff
  • editorGroup.dropBackground#53535370
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorGutter.addedBackground#7fe17380
  • editorGutter.deletedBackground#d2525280
  • editorGutter.modifiedBackground#bed6ff80
  • editorHoverWidget.background#323232
  • editorHoverWidget.border#797979
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#797979
  • editorLink.activeForeground#bed6ff
  • editorMarkerNavigation.background#373737
  • editorOverviewRuler.addedForeground#7fe17380
  • editorOverviewRuler.border#1b1b1b
  • editorOverviewRuler.currentContentForeground#7fe173
  • editorOverviewRuler.deletedForeground#d2525280
  • editorOverviewRuler.errorForeground#d2525280
  • editorOverviewRuler.incomingContentForeground#4098ff
  • editorOverviewRuler.infoForeground#bed6ff80
  • editorOverviewRuler.modifiedForeground#bed6ff80
  • editorOverviewRuler.selectionHighlightForeground#ffc66d
  • editorOverviewRuler.warningForeground#ffc66d80
  • editorOverviewRuler.wordHighlightForeground#bed6ff
  • editorOverviewRuler.wordHighlightStrongForeground#7fe173
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#373737
  • editorSuggestWidget.foreground#c7c7c5
  • editorSuggestWidget.selectedBackground#323232
  • editorWarning.foreground#ffc66d
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#373737
  • errorForeground#d25252
  • extensionButton.prominentBackground#7fe17390
  • extensionButton.prominentForeground#c7c7c5
  • extensionButton.prominentHoverBackground#7fe17360
  • focusBorder#797979
  • foreground#c7c7c5
  • gitDecoration.conflictingResourceForeground#ffc66d
  • gitDecoration.deletedResourceForeground#d25252
  • gitDecoration.ignoredResourceForeground#797979
  • gitDecoration.modifiedResourceForeground#bed6ff
  • gitDecoration.untrackedResourceForeground#7fe173
  • input.background#323232
  • input.border#1b1b1b
  • input.foreground#c7c7c5
  • input.placeholderForeground#797979
  • inputOption.activeBorder#4098ff
  • inputValidation.errorBackground#323232
  • inputValidation.errorBorder#d25252
  • inputValidation.errorForeground#d25252
  • inputValidation.infoBackground#323232
  • inputValidation.infoBorder#4098ff
  • inputValidation.infoForeground#4098ff
  • inputValidation.warningBackground#323232
  • inputValidation.warningBorder#ffc66d
  • inputValidation.warningForeground#ffc66d
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#c7c7c5
  • list.dropBackground#323232
  • list.errorForeground#d25252
  • list.focusBackground#53535375
  • list.highlightForeground#bed6ff
  • list.hoverBackground#53535375
  • list.inactiveSelectionBackground#53535375
  • list.warningForeground#ffc66d
  • listFilterWidget.background#323232
  • listFilterWidget.noMatchesOutline#d25252
  • listFilterWidget.outline#323232
  • merge.currentHeaderBackground#7fe17390
  • merge.incomingHeaderBackground#4098ff90
  • notification.background#323232
  • notification.buttonBackground#323232
  • notification.buttonForeground#c7c7c5
  • notification.buttonHoverBackground#53535375
  • notification.errorBackground#d25252
  • notification.errorForeground#323232
  • notification.foreground#c7c7c5
  • notification.infoBackground#4098ff
  • notification.infoForeground#323232
  • notification.warningBackground#ffc66d
  • notification.warningForeground#323232
  • notificationCenter.border#373737
  • notificationCenterHeader.background#323232
  • notificationCenterHeader.foreground#c7c7c5
  • notificationLink.foreground#bed6ff
  • notifications.background#323232
  • notifications.border#373737
  • notifications.foreground#c7c7c5
  • notificationsErrorIcon.foreground#d25252
  • notificationsInfoIcon.foreground#4098ff
  • notificationsWarningIcon.foreground#ffc66d
  • notificationToast.border#373737
  • panel.background#323232
  • panel.border#4098ff
  • panelInput.border#c7c7c5
  • panelTitle.activeBorder#f57fff
  • panelTitle.activeForeground#c7c7c5
  • panelTitle.inactiveForeground#797979
  • peekView.border#323232
  • peekViewEditor.background#323232
  • peekViewEditor.matchHighlightBackground#ffe48b80
  • peekViewResult.background#373737
  • peekViewResult.fileForeground#c7c7c5
  • peekViewResult.lineForeground#c7c7c5
  • peekViewResult.matchHighlightBackground#ffe48b80
  • peekViewResult.selectionBackground#323232
  • peekViewResult.selectionForeground#c7c7c5
  • peekViewTitle.background#1b1b1b
  • peekViewTitleDescription.foreground#797979
  • peekViewTitleLabel.foreground#c7c7c5
  • pickerGroup.border#4098ff
  • pickerGroup.foreground#bed6ff
  • progressBar.background#f57fff
  • scrollbar.shadow#444444
  • selection.background#4098ff
  • settings.checkboxBackground#373737
  • settings.checkboxBorder#1b1b1b
  • settings.checkboxForeground#c7c7c5
  • settings.dropdownBackground#373737
  • settings.dropdownBorder#1b1b1b
  • settings.dropdownForeground#c7c7c5
  • settings.headerForeground#c7c7c5
  • settings.modifiedItemIndicator#ffc66d
  • settings.numberInputBackground#373737
  • settings.numberInputBorder#1b1b1b
  • settings.numberInputForeground#c7c7c5
  • settings.textInputBackground#373737
  • settings.textInputBorder#1b1b1b
  • settings.textInputForeground#c7c7c5
  • sideBar.background#373737
  • sideBarSectionHeader.background#323232
  • sideBarSectionHeader.border#1b1b1b
  • sideBarTitle.foreground#c7c7c5
  • statusBar.background#1b1b1b
  • statusBar.debuggingBackground#d25252
  • statusBar.debuggingForeground#1b1b1b
  • statusBar.foreground#c7c7c5
  • statusBar.noFolderBackground#1b1b1b
  • statusBar.noFolderForeground#c7c7c5
  • statusBarItem.prominentBackground#d25252
  • statusBarItem.prominentHoverBackground#ffc66d
  • statusBarItem.remoteBackground#4098ff
  • statusBarItem.remoteForeground#323232
  • tab.activeBackground#323232
  • tab.activeBorderTop#f57fff80
  • tab.activeForeground#c7c7c5
  • tab.border#1b1b1b
  • tab.inactiveBackground#373737
  • tab.inactiveForeground#797979
  • terminal.ansiBlack#323232
  • terminal.ansiBlue#4098ff
  • terminal.ansiBrightBlack#535353
  • terminal.ansiBrightBlue#5eb7f7
  • terminal.ansiBrightCyan#dcf4ff
  • terminal.ansiBrightGreen#9dff90
  • terminal.ansiBrightMagenta#ff9dff
  • terminal.ansiBrightRed#f07070
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffe48b
  • terminal.ansiCyan#bed6ff
  • terminal.ansiGreen#7fe173
  • terminal.ansiMagenta#f57fff
  • terminal.ansiRed#d25252
  • terminal.ansiWhite#eeeeec
  • terminal.ansiYellow#ffc66d
  • terminal.background#323232
  • terminal.border#c7c7c5
  • terminal.foreground#c7c7c5
  • terminal.selectionBackground#32323250
  • textBlockQuote.background#373737
  • titleBar.activeBackground#373737
  • titleBar.activeForeground#c7c7c5
  • titleBar.inactiveBackground#1b1b1b
  • titleBar.inactiveForeground#797979
  • walkThrough.embeddedEditorBackground#373737
  • welcomePage.buttonBackground#323232
  • welcomePage.buttonHoverBackground#53535375
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#4098ff
source#c7c7c5
meta.diff, meta.diff.header#797979
markup.inserted#7fe173
markup.deleted#d25252
markup.changed#ffc66d
invalid#d25252underline italic
invalid.deprecated#c7c7c5underline italic
entity.name.filename#ffe48b
markup.error#d25252
markup.underlineunderline
markup.bold#ffc66dbold
markup.heading#4098ffbold
markup.italic#ffe48bitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#bed6ff
markup.inline.raw, markup.raw.restructuredtext#7fe173
markup.underline.link, markup.underline.link.image#bed6ff
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f57fff
entity.name.directive.restructuredtext, markup.quote#ffe48bitalic
meta.separator.markdown#797979
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#7fe173
punctuation.definition.constant.restructuredtext#4098ff
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#4098ff
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c7c7c5
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffe48b
entity.name.type.class, entity.name.class#bed6ffnormal
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#4098ffitalic
entity.other.inherited-class#bed6ffitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#797979
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f57fff
comment.block.documentation entity.name.type#bed6ffitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#bed6ff
comment.block.documentation variable#ffc66ditalic
constant, variable.other.constant#4098ff
constant.character.escape, constant.character.string.escape, constant.regexp#f57fff
entity.name.tag#f57fff
entity.other.attribute-name.parent-selector#f57fff
entity.other.attribute-name#7fe173italic
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#7fe173
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#ffc66ditalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#7fe173italic
meta.decorator variable.other.object#7fe173
keyword, punctuation.definition.keyword#f57fff
keyword.control.new, keyword.operator.newbold
meta.selector#f57fff
support#bed6ffitalic
support.function.magic, support.variable, variable.other.predefined#4098ffregular
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#f57fff
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#c7c7c5
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#f57fff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#bed6ff
constant.other.date, constant.other.timestamp#ffc66d
variable.other.alias.yaml#7fe173italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f57fffregular
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#bed6ffitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffc66d
storage.modifier#f57fff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffe48b
punctuation.definition.group.capture.regexp#f57fff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d25252
punctuation.definition.character-class.regexp#bed6ff
punctuation.definition.group.regexp#ffc66d
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d25252
meta.assertion.look-ahead.regexp#7fe173
string#ffe48b
punctuation.definition.string.begin, punctuation.definition.string.end#5eb7f7
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4098ff
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#797979
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c7c7c5
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffc66ditalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c7c7c5normal
meta.selectionset.graphql variable#ffe48b
meta.selectionset.graphql meta.arguments variable#c7c7c5
entity.name.fragment.graphql, variable.fragment.graphql#bed6ff
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#c7c7c5
source.shell variable.other#4098ff
support.constant#4098ffnormal
meta.scope.prerequisites.makefile#ffe48b
meta.attribute-selector.scss#ffe48b
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c7c7c5
meta.preprocessor.haskell#797979