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#589cf510
  • activityBar.activeBorder#934d9580
  • activityBar.background#1c2836
  • activityBar.foreground#a1a1a1
  • activityBar.inactiveForeground#6e6e6e
  • activityBarBadge.background#934d95
  • activityBarBadge.foreground#1c2836
  • badge.background#000000
  • badge.foreground#a1a1a1
  • breadcrumb.activeSelectionForeground#a1a1a1
  • breadcrumb.background#1c2836
  • breadcrumb.focusForeground#a1a1a1
  • breadcrumb.foreground#6e6e6e
  • breadcrumbPicker.background#1c1c1c
  • button.background#383838
  • button.foreground#a1a1a1
  • checkbox.background#383838
  • checkbox.border#1c1c1c
  • checkbox.foreground#a1a1a1
  • contrastBorder#1c1c1c
  • debugToolBar.background#383838
  • diffEditor.insertedTextBackground#20af8920
  • diffEditor.removedTextBackground#f9555f50
  • dropdown.background#1c2836
  • dropdown.border#1c1c1c
  • dropdown.foreground#a1a1a1
  • editor.background#1c2836
  • editor.findMatchBackground#fdba2980
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#55555575
  • editor.foldBackground#383838
  • editor.foreground#a1a1a1
  • editor.hoverHighlightBackground#1c1c1c
  • editor.lineHighlightBorder#000000
  • editor.rangeHighlightBackground#589cf515
  • editor.selectionBackground#000000
  • editor.selectionHighlightBackground#000000
  • editor.snippetFinalTabstopHighlightBackground#1c2836
  • editor.snippetFinalTabstopHighlightBorder#20af89
  • editor.snippetTabstopHighlightBackground#1c2836
  • editor.snippetTabstopHighlightBorder#6e6e6e
  • editor.wordHighlightBackground#1e9ee650
  • editor.wordHighlightStrongBackground#20af8950
  • editorCodeLens.foreground#6e6e6e
  • editorError.foreground#f9555f
  • editorGroup.border#589cf5
  • editorGroup.dropBackground#55555570
  • editorGroupHeader.tabsBackground#1c1c1c
  • editorGutter.addedBackground#20af8980
  • editorGutter.deletedBackground#f9555f80
  • editorGutter.modifiedBackground#1e9ee680
  • editorHoverWidget.background#1c2836
  • editorHoverWidget.border#6e6e6e
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#6e6e6e
  • editorLink.activeForeground#1e9ee6
  • editorMarkerNavigation.background#383838
  • editorOverviewRuler.addedForeground#20af8980
  • editorOverviewRuler.border#1c1c1c
  • editorOverviewRuler.currentContentForeground#20af89
  • editorOverviewRuler.deletedForeground#f9555f80
  • editorOverviewRuler.errorForeground#f9555f80
  • editorOverviewRuler.incomingContentForeground#589cf5
  • editorOverviewRuler.infoForeground#1e9ee680
  • editorOverviewRuler.modifiedForeground#1e9ee680
  • editorOverviewRuler.selectionHighlightForeground#fdba29
  • editorOverviewRuler.warningForeground#fdba2980
  • editorOverviewRuler.wordHighlightForeground#1e9ee6
  • editorOverviewRuler.wordHighlightStrongForeground#20af89
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#383838
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.selectedBackground#000000
  • editorWarning.foreground#fdba29
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#383838
  • errorForeground#f9555f
  • extensionButton.prominentBackground#20af8990
  • extensionButton.prominentForeground#a1a1a1
  • extensionButton.prominentHoverBackground#20af8960
  • focusBorder#6e6e6e
  • foreground#a1a1a1
  • gitDecoration.conflictingResourceForeground#fdba29
  • gitDecoration.deletedResourceForeground#f9555f
  • gitDecoration.ignoredResourceForeground#6e6e6e
  • gitDecoration.modifiedResourceForeground#1e9ee6
  • gitDecoration.untrackedResourceForeground#20af89
  • input.background#1c2836
  • input.border#1c1c1c
  • input.foreground#a1a1a1
  • input.placeholderForeground#6e6e6e
  • inputOption.activeBorder#589cf5
  • inputValidation.errorBackground#1c2836
  • inputValidation.errorBorder#f9555f
  • inputValidation.errorForeground#f9555f
  • inputValidation.infoBackground#1c2836
  • inputValidation.infoBorder#589cf5
  • inputValidation.infoForeground#589cf5
  • inputValidation.warningBackground#1c2836
  • inputValidation.warningBorder#fdba29
  • inputValidation.warningForeground#fdba29
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#a1a1a1
  • list.dropBackground#000000
  • list.errorForeground#f9555f
  • list.focusBackground#55555575
  • list.highlightForeground#1e9ee6
  • list.hoverBackground#55555575
  • list.inactiveSelectionBackground#55555575
  • list.warningForeground#fdba29
  • listFilterWidget.background#1c2836
  • listFilterWidget.noMatchesOutline#f9555f
  • listFilterWidget.outline#000000
  • merge.currentHeaderBackground#20af8990
  • merge.incomingHeaderBackground#589cf590
  • notification.background#1c2836
  • notification.buttonBackground#000000
  • notification.buttonForeground#a1a1a1
  • notification.buttonHoverBackground#55555575
  • notification.errorBackground#f9555f
  • notification.errorForeground#1c2836
  • notification.foreground#a1a1a1
  • notification.infoBackground#589cf5
  • notification.infoForeground#1c2836
  • notification.warningBackground#fdba29
  • notification.warningForeground#1c2836
  • notificationCenter.border#383838
  • notificationCenterHeader.background#1c2836
  • notificationCenterHeader.foreground#a1a1a1
  • notificationLink.foreground#1e9ee6
  • notifications.background#1c2836
  • notifications.border#383838
  • notifications.foreground#a1a1a1
  • notificationsErrorIcon.foreground#f9555f
  • notificationsInfoIcon.foreground#589cf5
  • notificationsWarningIcon.foreground#fdba29
  • notificationToast.border#383838
  • panel.background#1c2836
  • panel.border#589cf5
  • panelInput.border#a1a1a1
  • panelTitle.activeBorder#934d95
  • panelTitle.activeForeground#a1a1a1
  • panelTitle.inactiveForeground#6e6e6e
  • peekView.border#000000
  • peekViewEditor.background#1c2836
  • peekViewEditor.matchHighlightBackground#ffff5580
  • peekViewResult.background#383838
  • peekViewResult.fileForeground#a1a1a1
  • peekViewResult.lineForeground#a1a1a1
  • peekViewResult.matchHighlightBackground#ffff5580
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#a1a1a1
  • peekViewTitle.background#1c1c1c
  • peekViewTitleDescription.foreground#6e6e6e
  • peekViewTitleLabel.foreground#a1a1a1
  • pickerGroup.border#589cf5
  • pickerGroup.foreground#1e9ee6
  • progressBar.background#934d95
  • scrollbar.shadow#444444
  • selection.background#589cf5
  • settings.checkboxBackground#383838
  • settings.checkboxBorder#1c1c1c
  • settings.checkboxForeground#a1a1a1
  • settings.dropdownBackground#383838
  • settings.dropdownBorder#1c1c1c
  • settings.dropdownForeground#a1a1a1
  • settings.headerForeground#a1a1a1
  • settings.modifiedItemIndicator#fdba29
  • settings.numberInputBackground#383838
  • settings.numberInputBorder#1c1c1c
  • settings.numberInputForeground#a1a1a1
  • settings.textInputBackground#383838
  • settings.textInputBorder#1c1c1c
  • settings.textInputForeground#a1a1a1
  • sideBar.background#383838
  • sideBarSectionHeader.background#1c2836
  • sideBarSectionHeader.border#1c1c1c
  • sideBarTitle.foreground#a1a1a1
  • statusBar.background#1c1c1c
  • statusBar.debuggingBackground#f9555f
  • statusBar.debuggingForeground#1c1c1c
  • statusBar.foreground#a1a1a1
  • statusBar.noFolderBackground#1c1c1c
  • statusBar.noFolderForeground#a1a1a1
  • statusBarItem.prominentBackground#f9555f
  • statusBarItem.prominentHoverBackground#fdba29
  • statusBarItem.remoteBackground#589cf5
  • statusBarItem.remoteForeground#1c2836
  • tab.activeBackground#1c2836
  • tab.activeBorderTop#934d9580
  • tab.activeForeground#a1a1a1
  • tab.border#1c1c1c
  • tab.inactiveBackground#383838
  • tab.inactiveForeground#6e6e6e
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#589cf5
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#589cf5
  • terminal.ansiBrightCyan#3978bb
  • terminal.ansiBrightGreen#34bb99
  • terminal.ansiBrightMagenta#e75598
  • terminal.ansiBrightRed#fa8b8e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff55
  • terminal.ansiCyan#1e9ee6
  • terminal.ansiGreen#20af89
  • terminal.ansiMagenta#934d95
  • terminal.ansiRed#f9555f
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#fdba29
  • terminal.background#1c2836
  • terminal.border#a1a1a1
  • terminal.foreground#a1a1a1
  • terminal.selectionBackground#00000050
  • textBlockQuote.background#383838
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#a1a1a1
  • titleBar.inactiveBackground#1c1c1c
  • titleBar.inactiveForeground#6e6e6e
  • walkThrough.embeddedEditorBackground#383838
  • welcomePage.buttonBackground#000000
  • welcomePage.buttonHoverBackground#55555575
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#589cf5
source#a1a1a1
meta.diff, meta.diff.header#6e6e6e
markup.inserted#20af89
markup.deleted#f9555f
markup.changed#fdba29
invalid#f9555funderline italic
invalid.deprecated#a1a1a1underline italic
entity.name.filename#ffff55
markup.error#f9555f
markup.underlineunderline
markup.bold#fdba29bold
markup.heading#589cf5bold
markup.italic#ffff55italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#1e9ee6
markup.inline.raw, markup.raw.restructuredtext#20af89
markup.underline.link, markup.underline.link.image#1e9ee6
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#934d95
entity.name.directive.restructuredtext, markup.quote#ffff55italic
meta.separator.markdown#6e6e6e
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#20af89
punctuation.definition.constant.restructuredtext#589cf5
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#589cf5
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a1a1a1
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffff55
entity.name.type.class, entity.name.class#1e9ee6normal
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#589cf5italic
entity.other.inherited-class#1e9ee6italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6e6e6e
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#934d95
comment.block.documentation entity.name.type#1e9ee6italic
comment.block.documentation entity.name.type punctuation.definition.bracket#1e9ee6
comment.block.documentation variable#fdba29italic
constant, variable.other.constant#589cf5
constant.character.escape, constant.character.string.escape, constant.regexp#934d95
entity.name.tag#934d95
entity.other.attribute-name.parent-selector#934d95
entity.other.attribute-name#20af89italic
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#20af89
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#fdba29italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#20af89italic
meta.decorator variable.other.object#20af89
keyword, punctuation.definition.keyword#934d95
keyword.control.new, keyword.operator.newbold
meta.selector#934d95
support#1e9ee6italic
support.function.magic, support.variable, variable.other.predefined#589cf5regular
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#934d95
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#a1a1a1
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#934d95
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#1e9ee6
constant.other.date, constant.other.timestamp#fdba29
variable.other.alias.yaml#20af89italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#934d95regular
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#1e9ee6italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fdba29
storage.modifier#934d95
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffff55
punctuation.definition.group.capture.regexp#934d95
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f9555f
punctuation.definition.character-class.regexp#1e9ee6
punctuation.definition.group.regexp#fdba29
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f9555f
meta.assertion.look-ahead.regexp#20af89
string#ffff55
punctuation.definition.string.begin, punctuation.definition.string.end#fdf029
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#589cf5
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#6e6e6e
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a1a1a1
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#fdba29italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a1a1a1normal
meta.selectionset.graphql variable#ffff55
meta.selectionset.graphql meta.arguments variable#a1a1a1
entity.name.fragment.graphql, variable.fragment.graphql#1e9ee6
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#a1a1a1
source.shell variable.other#589cf5
support.constant#589cf5normal
meta.scope.prerequisites.makefile#ffff55
meta.attribute-selector.scss#ffff55
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a1a1a1
meta.preprocessor.haskell#6e6e6e