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#161922FF
  • activityBar.activeBorder#D9E0E8FF
  • activityBar.activeFocusBorder#9B6DFFFF
  • activityBar.background#161922FF
  • activityBar.border#252830FF
  • activityBar.foreground#808182FF
  • activityBar.inactiveForeground#80818299
  • activityBarBadge.background#9B6DFFFF
  • activityBarBadge.foreground#D9E0E8FF
  • badge.background#9B6DFFFF
  • badge.foreground#D9E0E8FF
  • breadcrumb.activeSelectionForeground#51FBDEFF
  • breadcrumb.background#1F2330FF
  • breadcrumb.focusForeground#D9E0E8FF
  • breadcrumb.foreground#68737DFF
  • breadcrumbPicker.background#292F38FF
  • button.background#9B6DFFFF
  • button.foreground#D9E0E8FF
  • button.hoverBackground#FF6B9DFF
  • debugConsole.errorForeground#FF6B9DFF
  • debugConsole.infoForeground#FED604FF
  • debugConsole.sourceForeground#808182FF
  • debugConsole.warningForeground#FF9970FF
  • debugConsoleInputIcon.foreground#9B6DFFFF
  • debugExceptionWidget.background#1C202BFF
  • debugExceptionWidget.border#68737DFF
  • descriptionForeground#808182FF
  • diffEditor.border#FF6B9DFF
  • diffEditor.insertedTextBackground#00B2FF1A
  • diffEditor.insertedTextBorder#00B2FF26
  • diffEditor.removedTextBackground#9B6DFF1A
  • diffEditor.removedTextBorder#9B6DFF26
  • dropdown.background#292F38FF
  • dropdown.border#68737DFF
  • dropdown.foreground#D9E0E8FF
  • dropdown.listBackground#292F38FF
  • editor.background#1F2330FF
  • editor.findMatchBackground#FF5CD366
  • editor.findMatchBorder#FF5CD380
  • editor.findMatchHighlightBackground#2528301A
  • editor.findMatchHighlightBorder#FF5CD333
  • editor.foreground#D9E0E8FF
  • editor.hoverHighlightBackground#FF5CD366
  • editor.inactiveSelectionBackground#FF6B9D0D
  • editor.lineHighlightBackground#2F3237FF
  • editor.lineHighlightBorder#36393CFF
  • editor.rangeHighlightBackground#9B6DFF4D
  • editor.rangeHighlightBorder#9A89B44D
  • editor.selectionBackground#FF6B9D40
  • editor.selectionHighlightBackground#FF6B9D0D
  • editor.selectionHighlightBorder#9B6DFF66
  • editor.wordHighlightBackground#FF6B9D40
  • editor.wordHighlightBorder#9B6DFF66
  • editor.wordHighlightStrongBackground#FF6B9D40
  • editor.wordHighlightStrongBorder#9B6DFF66
  • editorBracketMatch.background#2F3237FF
  • editorBracketMatch.border#68737DFF
  • editorCodeLens.foreground#68737DFF
  • editorCursor.foreground#FF6B9DFF
  • editorError.border#FF6B9DFF
  • editorError.foreground#FF6B9DFF
  • editorGroup.border#2F3237FF
  • editorGroup.dropBackground#9B6DFF4D
  • editorGroupHeader.border#1F2330FF
  • editorGroupHeader.tabsBackground#252A32FF
  • editorGutter.addedBackground#00B2FFB3
  • editorGutter.background#1F2330FF
  • editorGutter.deletedBackground#9B6DFFB3
  • editorGutter.modifiedBackground#51FBDEB3
  • editorHint.border#51FBDEFF
  • editorHint.foreground#51FBDEFF
  • editorHoverWidget.background#252A32FF
  • editorHoverWidget.border#68737DFF
  • editorHoverWidget.foreground#D9E0E8FF
  • editorHoverWidget.statusBarBackground#1F2330FF
  • editorIndentGuide.activeBackground#808182FF
  • editorIndentGuide.background#808182FF
  • editorInfo.border#FED604FF
  • editorInfo.foreground#FED604FF
  • editorLineNumber.activeForeground#9B6DFFFF
  • editorLineNumber.foreground#68737DFF
  • editorLink.activeForeground#51FBDEFF
  • editorMarkerNavigation.background#252A32FF
  • editorMarkerNavigationError.background#FF6B9DFF
  • editorMarkerNavigationInfo.background#FED604FF
  • editorMarkerNavigationWarning.background#FF9970FF
  • editorOverviewRuler.addedForeground#00B2FF99
  • editorOverviewRuler.border#2F3237FF
  • editorOverviewRuler.bracketMatchForeground#37E7AC99
  • editorOverviewRuler.deletedForeground#9B6DFF99
  • editorOverviewRuler.errorForeground#FF6B9D99
  • editorOverviewRuler.findMatchForeground#D9E0E899
  • editorOverviewRuler.infoForeground#FED60499
  • editorOverviewRuler.modifiedForeground#51FBDE99
  • editorOverviewRuler.warningForeground#FF997099
  • editorRuler.foreground#252830FF
  • editorSuggestWidget.background#1C202BFF
  • editorSuggestWidget.border#68737DFF
  • editorSuggestWidget.foreground#D9E0E8FF
  • editorSuggestWidget.highlightForeground#9B6DFFFF
  • editorSuggestWidget.selectedBackground#2528301A
  • editorUnnecessaryCode.opacity#00000066
  • editorWarning.border#FF9970FF
  • editorWarning.foreground#FF9970FF
  • editorWidget.background#1C202BFF
  • editorWidget.border#68737DFF
  • editorWidget.foreground#68737DFF
  • editorWidget.resizeBorder#9B6DFFFF
  • errorForeground#9B6DFFFF
  • extensionBadge.remoteBackground#FF6B9DFF
  • extensionBadge.remoteForeground#36393CFF
  • extensionButton.prominentBackground#FF6B9DFF
  • extensionButton.prominentForeground#36393CFF
  • extensionButton.prominentHoverBackground#9B6DFFFF
  • focusBorder#9B6DFF66
  • foreground#D9E0E8FF
  • gitDecoration.addedResourceForeground#00B2FF
  • gitDecoration.conflictingResourceForeground#FF6B9DFF
  • gitDecoration.deletedResourceForeground#9B6DFFFF
  • gitDecoration.ignoredResourceForeground#808182FF
  • gitDecoration.modifiedResourceForeground#51FBDEFF
  • gitDecoration.stageDeletedResourceForeground#9B6DFFFF
  • gitDecoration.stageModifiedResourceForeground#51FBDEFF
  • gitDecoration.submoduleResourceForeground#FF9970FF
  • gitDecoration.untrackedResourceForeground#37E7AC
  • icon.foreground#D9E0E8FF
  • input.background#292F38FF
  • input.foreground#D9E0E8FF
  • input.placeholderForeground#68737DFF
  • inputOption.activeBackground#9A89B4FF
  • inputOption.activeForeground#D9E0E8FF
  • inputValidation.errorBackground#FF6B9D4D
  • inputValidation.errorBorder#FF6B9DFF
  • inputValidation.errorForeground#D9E0E8FF
  • list.activeSelectionBackground#9B6DFF33
  • list.activeSelectionForeground#D9E0E8FF
  • list.dropBackground#9B6DFF4D
  • list.errorForeground#FF6B9DFF
  • list.focusBackground#FF5CD34D
  • list.focusForeground#D9E0E8FF
  • list.hoverBackground#9B6DFF33
  • list.hoverForeground#D9E0E8FF
  • list.inactiveSelectionBackground#9B6DFF33
  • list.inactiveSelectionForeground#D9E0E8FF
  • list.warningForeground#FF9970FF
  • notificationCenter.border#9B6DFFFF
  • notificationCenterHeader.background#252A32FF
  • notificationCenterHeader.foreground#D9E0E8FF
  • notificationLink.foreground#51FBDEFF
  • notifications.background#252A32FF
  • notifications.border#9B6DFFFF
  • notifications.foreground#D9E0E8FF
  • notificationsErrorIcon.foreground#FF6B9DFF
  • notificationsInfoIcon.foreground#FED604FF
  • notificationsWarningIcon.foreground#FF9970FF
  • notificationToast.border#9B6DFFFF
  • panel.background#252A32FF
  • panel.border#2F3237FF
  • panelInput.border#68737DFF
  • panelTitle.activeBorder#9B6DFFFF
  • panelTitle.activeForeground#D9E0E8FF
  • panelTitle.inactiveForeground#808182FF
  • peekView.border#9B6DFFFF
  • peekViewEditor.background#252A32FF
  • peekViewEditor.matchHighlightBackground#FF5CD380
  • peekViewEditor.matchHighlightBorder#FF5CD366
  • peekViewEditorGutter.background#252A32FF
  • peekViewResult.background#292F38FF
  • peekViewResult.fileForeground#68737DFF
  • peekViewResult.lineForeground#68737DFF
  • peekViewResult.matchHighlightBackground#FF5CD380
  • peekViewResult.selectionBackground#51FBDE4D
  • peekViewResult.selectionForeground#D9E0E8FF
  • peekViewTitle.background#1F2330FF
  • peekViewTitleDescription.foreground#68737DFF
  • peekViewTitleLabel.foreground#D9E0E8FF
  • pickerGroup.border#FF6B9DFF
  • pickerGroup.foreground#FF6B9DFF
  • problemsErrorIcon.foreground#FF6B9DFF
  • problemsInfoIcon.foreground#FED604FF
  • problemsWarningIcon.foreground#FF9970FF
  • progressBar.background#9B6DFFFF
  • quickInput.background#252A32FF
  • quickInput.foreground#808182FF
  • scrollbar.shadow#1F2330FF
  • scrollbarSlider.activeBackground#D9E0E833
  • scrollbarSlider.background#D9E0E81A
  • scrollbarSlider.hoverBackground#D9E0E833
  • selection.background#9B6DFF99
  • settings.checkboxBackground#292F38FF
  • settings.checkboxBorder#68737DFF
  • settings.checkboxForeground#D9E0E8FF
  • settings.dropdownBackground#292F38FF
  • settings.dropdownBorder#68737DFF
  • settings.dropdownForeground#D9E0E8FF
  • settings.dropdownListBorder#68737DFF
  • settings.headerForeground#D9E0E8FF
  • settings.modifiedItemIndicator#51FBDEFF
  • settings.numberInputBackground#292F38FF
  • settings.numberInputBorder#68737DFF
  • settings.numberInputForeground#D9E0E8FF
  • settings.textInputBackground#292F38FF
  • settings.textInputBorder#68737DFF
  • settings.textInputForeground#D9E0E8FF
  • sideBar.background#1C202BFF
  • sideBar.border#2F3237FF
  • sideBar.dropBackground#9B6DFF4D
  • sideBar.foreground#808182FF
  • sideBarSectionHeader.background#1C202BFF
  • sideBarSectionHeader.border#2F3237FF
  • sideBarSectionHeader.foreground#808182FF
  • sideBarTitle.foreground#808182FF
  • statusBar.background#161922FF
  • statusBar.border#2F3237FF
  • statusBar.debuggingBackground#68737DFF
  • statusBar.debuggingBorder#2F3237FF
  • statusBar.debuggingForeground#D9E0E8FF
  • statusBar.foreground#808182FF
  • statusBar.noFolderBackground#161922FF
  • statusBar.noFolderBorder#2F3237FF
  • statusBar.noFolderForeground#808182FF
  • statusBarItem.activeBackground#252A32FF
  • statusBarItem.hoverBackground#252A32FF
  • statusBarItem.prominentBackground#161922FF
  • statusBarItem.prominentForeground#9B6DFFFF
  • statusBarItem.prominentHoverBackground#252A32FF
  • statusBarItem.remoteBackground#9B6DFFFF
  • statusBarItem.remoteForeground#D9E0E8FF
  • tab.activeBackground#1F2330FF
  • tab.activeBorder#9B6DFFFF
  • tab.activeBorderTop#1F2330FF
  • tab.activeForeground#D9E0E8FF
  • tab.activeModifiedBorder#1F2330FF
  • tab.border#1F2330FF
  • tab.hoverBackground#1F2330FF
  • tab.hoverBorder#9B6DFFFF
  • tab.hoverForeground#D9E0E8CC
  • tab.inactiveBackground#1F2330FF
  • tab.inactiveForeground#68737DFF
  • tab.lastPinnedBorder#808182FF
  • tab.unfocusedActiveBackground#1F23304D
  • tab.unfocusedActiveBorder#9B6DFF4D
  • tab.unfocusedActiveBorderTop#1F2330FF
  • tab.unfocusedActiveForeground#68737DFF
  • tab.unfocusedHoverBackground#1F2330FF
  • tab.unfocusedHoverBorder#9B6DFFFF
  • tab.unfocusedHoverForeground#D9E0E8CC
  • tab.unfocusedInactiveBackground#1F2330FF
  • tab.unfocusedInactiveForeground#68737DFF
  • terminal.ansiBrightMagenta#FF5CD3
  • terminal.ansiBrightRed#FF6B9DFF
  • terminal.ansiBrightWhite#D9E0E8FF
  • terminal.ansiBrightYellow#FED604FF
  • terminal.ansiMagenta#FF5CD3
  • terminal.ansiRed#FF6B9DFF
  • terminal.ansiWhite#D9E0E8FF
  • terminal.ansiYellow#FED604FF
  • terminal.background#252A32FF
  • terminal.border#2F3237FF
  • terminal.selectionBackground#9B6DFF33
  • terminalCursor.background#D9E0E8FF
  • terminalCursor.foreground#FF6B9DFF
  • textBlockQuote.border#9B6DFFFF
  • textLink.activeForeground#51FBDEFF
  • textLink.foreground#9B6DFFFF
  • textPreformat.foreground#9B6DFFFF
  • textSeparator.foreground#51FBDEFF
  • tree.indentGuidesStroke#68737DFF
  • welcomePage.background#1F2330FF
  • welcomePage.buttonBackground#292F38FF
  • welcomePage.buttonHoverBackground#9B6DFF4D
  • widget.shadow#1F2330FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.diff, meta.diff.header#68737DFF
markup.inserted#51FBDEFF
markup.deleted#FF6B9DFF
markup.changed#9B6DFFFF
markup.error#FF6B9DFFunderline italic
invalid, invalid.illegal#FF6B9DFFunderline italic
invalid.deprecated#FF6B9DFFunderline italic
entity.name.filename#9A89B4FF
meta.paragraph.markdown, text.html.markdown#D9E0E8FF
markup.underlineunderline
markup.bold#00B2FFFFbold
markup.heading#9B6DFFFFbold underline
markup.italic#FED604FFitalic
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D9E0E8FFbold
markup.inline.raw, markup.raw.restructuredtext#FF6B9DFF
fenced_code.block.language.markdown, fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#68737DFFitalic
markup.underline.link, markup.underline.link.image#68737DFF
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#51FBDEFFbold
markup.quote, entity.name.directive.restructuredtext, markup.quote.markdown#FF9970FF
meta.separator.markdown#FF5CD3FFbold
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#68737DFF
entity.name.type.class#D9E0E8FFunderline
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#9B6DFFFFitalic
entity.other.inherited-class#D9E0E8FF
comment, punctuation.definition.comment, unused.comment, wildcard.comment#68737DFFbold
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#68737DFFunderline
constant, variable.other.constant#FFFFFFFF
constant.character.escape, constant.character.string.escape, constant.regexp#51FBDEFF
entity.name.tag#FF6B9DFFbold
punctuation.definition.tag.begin.html, meta.tag.structure.body.start.html#D9E0E8FFbold
string.quoted.double.html#D9E0E8FF
meta.attribute.src.htmlitalic
entity.other.attribute-name.parent-selector#FF6B9DFF
entity.other.attribute-name#9B6DFFFFbold
entity.name.function, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#00B2FFFFbold
meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method#00B2FFFF
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#D9E0E8FFbold
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#D9E0E8FFitalic
meta.decorator variable.other.object#D9E0E8FF
string#9A89B4FFitalic
keyword, punctuation.definition.keyword#9B6DFFFF
keyword.control.new, keyword.operator.newbold
support#D9E0E8FF
support.function, support.type.property-name#00B2FFFF
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#D9E0E8FFbold
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#D9E0E8FFbold
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#D9E0E8FF
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.tomlitalic
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF6B9DFF
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#51FBDEFFunderline
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FF6B9DFFbold
storage.modifier#9B6DFFFF
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#D9E0E8FF
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#D9E0E8FF
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#D9E0E8FF
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#D9E0E8FFbold
source.shell variable.other#9B6DFFFF
support.constant#9B6DFFFF
meta.scope.prerequisites.makefile#FED604FF
meta.attribute-selector.scss#FED604FF
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#D9E0E8FF
meta.preprocessor.haskell#68737DFF
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#9A89B4FF
punctuation.definition.group.capture.regexp#FF6B9DFF
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#51FBDEFF
punctuation.definition.character-class.regexp#00B2FFFF
punctuation.definition.group.regexp#FF6B9DFF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF6B9DFF
meta.assertion.look-ahead.regexp#51FBDEFF
meta.object#51FBDEFF