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#3449d110
  • activityBar.activeBorder#8400ff80
  • activityBar.background#0e100a
  • activityBar.foreground#c0b3c0
  • activityBar.inactiveForeground#7c777c
  • activityBarBadge.background#8400ff
  • activityBarBadge.foreground#0e100a
  • badge.background#4d4d4d
  • badge.foreground#c0b3c0
  • breadcrumb.activeSelectionForeground#c0b3c0
  • breadcrumb.background#0e100a
  • breadcrumb.focusForeground#c0b3c0
  • breadcrumb.foreground#7c777c
  • breadcrumbPicker.background#1e1e1e
  • button.background#3c3c3c
  • button.foreground#c0b3c0
  • checkbox.background#3c3c3c
  • checkbox.border#1e1e1e
  • checkbox.foreground#c0b3c0
  • contrastBorder#1e1e1e
  • debugToolBar.background#3c3c3c
  • diffEditor.insertedTextBackground#29cf1320
  • diffEditor.removedTextBackground#c7003150
  • dropdown.background#0e100a
  • dropdown.border#1e1e1e
  • dropdown.foreground#c0b3c0
  • editor.background#0e100a
  • editor.findMatchBackground#d8e30e80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#5a5a5a75
  • editor.foldBackground#3c3c3c
  • editor.foreground#c0b3c0
  • editor.hoverHighlightBackground#1e1e1e
  • editor.lineHighlightBorder#4d4d4d
  • editor.rangeHighlightBackground#3449d115
  • editor.selectionBackground#4d4d4d
  • editor.selectionHighlightBackground#4d4d4d
  • editor.snippetFinalTabstopHighlightBackground#0e100a
  • editor.snippetFinalTabstopHighlightBorder#29cf13
  • editor.snippetTabstopHighlightBackground#0e100a
  • editor.snippetTabstopHighlightBorder#7c777c
  • editor.wordHighlightBackground#0798ab50
  • editor.wordHighlightStrongBackground#29cf1350
  • editorCodeLens.foreground#7c777c
  • editorError.foreground#c70031
  • editorGroup.border#3449d1
  • editorGroup.dropBackground#5a5a5a70
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorGutter.addedBackground#29cf1380
  • editorGutter.deletedBackground#c7003180
  • editorGutter.modifiedBackground#0798ab80
  • editorHoverWidget.background#0e100a
  • editorHoverWidget.border#7c777c
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#7c777c
  • editorLink.activeForeground#0798ab
  • editorMarkerNavigation.background#3c3c3c
  • editorOverviewRuler.addedForeground#29cf1380
  • editorOverviewRuler.border#1e1e1e
  • editorOverviewRuler.currentContentForeground#29cf13
  • editorOverviewRuler.deletedForeground#c7003180
  • editorOverviewRuler.errorForeground#c7003180
  • editorOverviewRuler.incomingContentForeground#3449d1
  • editorOverviewRuler.infoForeground#0798ab80
  • editorOverviewRuler.modifiedForeground#0798ab80
  • editorOverviewRuler.selectionHighlightForeground#d8e30e
  • editorOverviewRuler.warningForeground#d8e30e80
  • editorOverviewRuler.wordHighlightForeground#0798ab
  • editorOverviewRuler.wordHighlightStrongForeground#29cf13
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#3c3c3c
  • editorSuggestWidget.foreground#c0b3c0
  • editorSuggestWidget.selectedBackground#4d4d4d
  • editorWarning.foreground#d8e30e
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#3c3c3c
  • errorForeground#c70031
  • extensionButton.prominentBackground#29cf1390
  • extensionButton.prominentForeground#c0b3c0
  • extensionButton.prominentHoverBackground#29cf1360
  • focusBorder#7c777c
  • foreground#c0b3c0
  • gitDecoration.conflictingResourceForeground#d8e30e
  • gitDecoration.deletedResourceForeground#c70031
  • gitDecoration.ignoredResourceForeground#7c777c
  • gitDecoration.modifiedResourceForeground#0798ab
  • gitDecoration.untrackedResourceForeground#29cf13
  • input.background#0e100a
  • input.border#1e1e1e
  • input.foreground#c0b3c0
  • input.placeholderForeground#7c777c
  • inputOption.activeBorder#3449d1
  • inputValidation.errorBackground#0e100a
  • inputValidation.errorBorder#c70031
  • inputValidation.errorForeground#c70031
  • inputValidation.infoBackground#0e100a
  • inputValidation.infoBorder#3449d1
  • inputValidation.infoForeground#3449d1
  • inputValidation.warningBackground#0e100a
  • inputValidation.warningBorder#d8e30e
  • inputValidation.warningForeground#d8e30e
  • list.activeSelectionBackground#4d4d4d
  • list.activeSelectionForeground#c0b3c0
  • list.dropBackground#4d4d4d
  • list.errorForeground#c70031
  • list.focusBackground#5a5a5a75
  • list.highlightForeground#0798ab
  • list.hoverBackground#5a5a5a75
  • list.inactiveSelectionBackground#5a5a5a75
  • list.warningForeground#d8e30e
  • listFilterWidget.background#0e100a
  • listFilterWidget.noMatchesOutline#c70031
  • listFilterWidget.outline#4d4d4d
  • merge.currentHeaderBackground#29cf1390
  • merge.incomingHeaderBackground#3449d190
  • notification.background#0e100a
  • notification.buttonBackground#4d4d4d
  • notification.buttonForeground#c0b3c0
  • notification.buttonHoverBackground#5a5a5a75
  • notification.errorBackground#c70031
  • notification.errorForeground#0e100a
  • notification.foreground#c0b3c0
  • notification.infoBackground#3449d1
  • notification.infoForeground#0e100a
  • notification.warningBackground#d8e30e
  • notification.warningForeground#0e100a
  • notificationCenter.border#3c3c3c
  • notificationCenterHeader.background#0e100a
  • notificationCenterHeader.foreground#c0b3c0
  • notificationLink.foreground#0798ab
  • notifications.background#0e100a
  • notifications.border#3c3c3c
  • notifications.foreground#c0b3c0
  • notificationsErrorIcon.foreground#c70031
  • notificationsInfoIcon.foreground#3449d1
  • notificationsWarningIcon.foreground#d8e30e
  • notificationToast.border#3c3c3c
  • panel.background#0e100a
  • panel.border#3449d1
  • panelInput.border#c0b3c0
  • panelTitle.activeBorder#8400ff
  • panelTitle.activeForeground#c0b3c0
  • panelTitle.inactiveForeground#7c777c
  • peekView.border#4d4d4d
  • peekViewEditor.background#0e100a
  • peekViewEditor.matchHighlightBackground#f3f79e80
  • peekViewResult.background#3c3c3c
  • peekViewResult.fileForeground#c0b3c0
  • peekViewResult.lineForeground#c0b3c0
  • peekViewResult.matchHighlightBackground#f3f79e80
  • peekViewResult.selectionBackground#4d4d4d
  • peekViewResult.selectionForeground#c0b3c0
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#7c777c
  • peekViewTitleLabel.foreground#c0b3c0
  • pickerGroup.border#3449d1
  • pickerGroup.foreground#0798ab
  • progressBar.background#8400ff
  • scrollbar.shadow#444444
  • selection.background#3449d1
  • settings.checkboxBackground#3c3c3c
  • settings.checkboxBorder#1e1e1e
  • settings.checkboxForeground#c0b3c0
  • settings.dropdownBackground#3c3c3c
  • settings.dropdownBorder#1e1e1e
  • settings.dropdownForeground#c0b3c0
  • settings.headerForeground#c0b3c0
  • settings.modifiedItemIndicator#d8e30e
  • settings.numberInputBackground#3c3c3c
  • settings.numberInputBorder#1e1e1e
  • settings.numberInputForeground#c0b3c0
  • settings.textInputBackground#3c3c3c
  • settings.textInputBorder#1e1e1e
  • settings.textInputForeground#c0b3c0
  • sideBar.background#3c3c3c
  • sideBarSectionHeader.background#0e100a
  • sideBarSectionHeader.border#1e1e1e
  • sideBarTitle.foreground#c0b3c0
  • statusBar.background#1e1e1e
  • statusBar.debuggingBackground#c70031
  • statusBar.debuggingForeground#1e1e1e
  • statusBar.foreground#c0b3c0
  • statusBar.noFolderBackground#1e1e1e
  • statusBar.noFolderForeground#c0b3c0
  • statusBarItem.prominentBackground#c70031
  • statusBarItem.prominentHoverBackground#d8e30e
  • statusBarItem.remoteBackground#3449d1
  • statusBarItem.remoteForeground#0e100a
  • tab.activeBackground#0e100a
  • tab.activeBorderTop#8400ff80
  • tab.activeForeground#c0b3c0
  • tab.border#1e1e1e
  • tab.inactiveBackground#3c3c3c
  • tab.inactiveForeground#7c777c
  • terminal.ansiBlack#4d4d4d
  • terminal.ansiBlue#3449d1
  • terminal.ansiBrightBlack#5a5a5a
  • terminal.ansiBrightBlue#97a4f7
  • terminal.ansiBrightCyan#68f2e0
  • terminal.ansiBrightGreen#6ce05c
  • terminal.ansiBrightMagenta#c495f0
  • terminal.ansiBrightRed#f01578
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f3f79e
  • terminal.ansiCyan#0798ab
  • terminal.ansiGreen#29cf13
  • terminal.ansiMagenta#8400ff
  • terminal.ansiRed#c70031
  • terminal.ansiWhite#e2d1e3
  • terminal.ansiYellow#d8e30e
  • terminal.background#0e100a
  • terminal.border#c0b3c0
  • terminal.foreground#c0b3c0
  • terminal.selectionBackground#4d4d4d50
  • textBlockQuote.background#3c3c3c
  • titleBar.activeBackground#3c3c3c
  • titleBar.activeForeground#c0b3c0
  • titleBar.inactiveBackground#1e1e1e
  • titleBar.inactiveForeground#7c777c
  • walkThrough.embeddedEditorBackground#3c3c3c
  • welcomePage.buttonBackground#4d4d4d
  • welcomePage.buttonHoverBackground#5a5a5a75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#3449d1
source#c0b3c0
meta.diff, meta.diff.header#7c777c
markup.inserted#29cf13
markup.deleted#c70031
markup.changed#d8e30e
invalid#c70031underline italic
invalid.deprecated#c0b3c0underline italic
entity.name.filename#f3f79e
markup.error#c70031
markup.underlineunderline
markup.bold#d8e30ebold
markup.heading#3449d1bold
markup.italic#f3f79eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#0798ab
markup.inline.raw, markup.raw.restructuredtext#29cf13
markup.underline.link, markup.underline.link.image#0798ab
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#8400ff
entity.name.directive.restructuredtext, markup.quote#f3f79eitalic
meta.separator.markdown#7c777c
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#29cf13
punctuation.definition.constant.restructuredtext#3449d1
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#3449d1
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#c0b3c0
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#f3f79e
entity.name.type.class, entity.name.class#0798abnormal
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#3449d1italic
entity.other.inherited-class#0798abitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7c777c
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8400ff
comment.block.documentation entity.name.type#0798abitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#0798ab
comment.block.documentation variable#d8e30eitalic
constant, variable.other.constant#3449d1
constant.character.escape, constant.character.string.escape, constant.regexp#8400ff
entity.name.tag#8400ff
entity.other.attribute-name.parent-selector#8400ff
entity.other.attribute-name#29cf13italic
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#29cf13
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#d8e30eitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#29cf13italic
meta.decorator variable.other.object#29cf13
keyword, punctuation.definition.keyword#8400ff
keyword.control.new, keyword.operator.newbold
meta.selector#8400ff
support#0798abitalic
support.function.magic, support.variable, variable.other.predefined#3449d1regular
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#8400ff
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#c0b3c0
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#8400ff
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#0798ab
constant.other.date, constant.other.timestamp#d8e30e
variable.other.alias.yaml#29cf13italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#8400ffregular
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#0798abitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d8e30e
storage.modifier#8400ff
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f3f79e
punctuation.definition.group.capture.regexp#8400ff
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#c70031
punctuation.definition.character-class.regexp#0798ab
punctuation.definition.group.regexp#d8e30e
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#c70031
meta.assertion.look-ahead.regexp#29cf13
string#f3f79e
punctuation.definition.string.begin, punctuation.definition.string.end#97a4f7
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#3449d1
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#7c777c
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#c0b3c0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d8e30eitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#c0b3c0normal
meta.selectionset.graphql variable#f3f79e
meta.selectionset.graphql meta.arguments variable#c0b3c0
entity.name.fragment.graphql, variable.fragment.graphql#0798ab
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#c0b3c0
source.shell variable.other#3449d1
support.constant#3449d1normal
meta.scope.prerequisites.makefile#f3f79e
meta.attribute-selector.scss#f3f79e
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#c0b3c0
meta.preprocessor.haskell#7c777c