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#97bedc10
  • activityBar.activeBorder#e1c0fa80
  • activityBar.background#121212
  • activityBar.foreground#d5d5d5
  • activityBar.inactiveForeground#c5c5c5
  • activityBarBadge.background#e1c0fa
  • activityBarBadge.foreground#121212
  • badge.background#929292
  • badge.foreground#d5d5d5
  • breadcrumb.activeSelectionForeground#d5d5d5
  • breadcrumb.background#121212
  • breadcrumb.focusForeground#d5d5d5
  • breadcrumb.foreground#c5c5c5
  • breadcrumbPicker.background#3f3f3f
  • button.background#7e7e7e
  • button.foreground#d5d5d5
  • checkbox.background#7e7e7e
  • checkbox.border#3f3f3f
  • checkbox.foreground#d5d5d5
  • contrastBorder#3f3f3f
  • debugToolBar.background#7e7e7e
  • diffEditor.insertedTextBackground#93b97920
  • diffEditor.removedTextBackground#e2737350
  • dropdown.background#121212
  • dropdown.border#3f3f3f
  • dropdown.foreground#d5d5d5
  • editor.background#121212
  • editor.findMatchBackground#ffba7b80
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#bdbdbd75
  • editor.foldBackground#7e7e7e
  • editor.foreground#d5d5d5
  • editor.hoverHighlightBackground#3f3f3f
  • editor.lineHighlightBorder#929292
  • editor.rangeHighlightBackground#97bedc15
  • editor.selectionBackground#929292
  • editor.selectionHighlightBackground#929292
  • editor.snippetFinalTabstopHighlightBackground#121212
  • editor.snippetFinalTabstopHighlightBorder#93b979
  • editor.snippetTabstopHighlightBackground#121212
  • editor.snippetTabstopHighlightBorder#c5c5c5
  • editor.wordHighlightBackground#00988e50
  • editor.wordHighlightStrongBackground#93b97950
  • editorCodeLens.foreground#c5c5c5
  • editorError.foreground#e27373
  • editorGroup.border#97bedc
  • editorGroup.dropBackground#bdbdbd70
  • editorGroupHeader.tabsBackground#3f3f3f
  • editorGutter.addedBackground#93b97980
  • editorGutter.deletedBackground#e2737380
  • editorGutter.modifiedBackground#00988e80
  • editorHoverWidget.background#121212
  • editorHoverWidget.border#c5c5c5
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#c5c5c5
  • editorLink.activeForeground#00988e
  • editorMarkerNavigation.background#7e7e7e
  • editorOverviewRuler.addedForeground#93b97980
  • editorOverviewRuler.border#3f3f3f
  • editorOverviewRuler.currentContentForeground#93b979
  • editorOverviewRuler.deletedForeground#e2737380
  • editorOverviewRuler.errorForeground#e2737380
  • editorOverviewRuler.incomingContentForeground#97bedc
  • editorOverviewRuler.infoForeground#00988e80
  • editorOverviewRuler.modifiedForeground#00988e80
  • editorOverviewRuler.selectionHighlightForeground#ffba7b
  • editorOverviewRuler.warningForeground#ffba7b80
  • editorOverviewRuler.wordHighlightForeground#00988e
  • editorOverviewRuler.wordHighlightStrongForeground#93b979
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#7e7e7e
  • editorSuggestWidget.foreground#d5d5d5
  • editorSuggestWidget.selectedBackground#929292
  • editorWarning.foreground#ffba7b
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#7e7e7e
  • errorForeground#e27373
  • extensionButton.prominentBackground#93b97990
  • extensionButton.prominentForeground#d5d5d5
  • extensionButton.prominentHoverBackground#93b97960
  • focusBorder#c5c5c5
  • foreground#d5d5d5
  • gitDecoration.conflictingResourceForeground#ffba7b
  • gitDecoration.deletedResourceForeground#e27373
  • gitDecoration.ignoredResourceForeground#c5c5c5
  • gitDecoration.modifiedResourceForeground#00988e
  • gitDecoration.untrackedResourceForeground#93b979
  • input.background#121212
  • input.border#3f3f3f
  • input.foreground#d5d5d5
  • input.placeholderForeground#c5c5c5
  • inputOption.activeBorder#97bedc
  • inputValidation.errorBackground#121212
  • inputValidation.errorBorder#e27373
  • inputValidation.errorForeground#e27373
  • inputValidation.infoBackground#121212
  • inputValidation.infoBorder#97bedc
  • inputValidation.infoForeground#97bedc
  • inputValidation.warningBackground#121212
  • inputValidation.warningBorder#ffba7b
  • inputValidation.warningForeground#ffba7b
  • list.activeSelectionBackground#929292
  • list.activeSelectionForeground#d5d5d5
  • list.dropBackground#929292
  • list.errorForeground#e27373
  • list.focusBackground#bdbdbd75
  • list.highlightForeground#00988e
  • list.hoverBackground#bdbdbd75
  • list.inactiveSelectionBackground#bdbdbd75
  • list.warningForeground#ffba7b
  • listFilterWidget.background#121212
  • listFilterWidget.noMatchesOutline#e27373
  • listFilterWidget.outline#929292
  • merge.currentHeaderBackground#93b97990
  • merge.incomingHeaderBackground#97bedc90
  • notification.background#121212
  • notification.buttonBackground#929292
  • notification.buttonForeground#d5d5d5
  • notification.buttonHoverBackground#bdbdbd75
  • notification.errorBackground#e27373
  • notification.errorForeground#121212
  • notification.foreground#d5d5d5
  • notification.infoBackground#97bedc
  • notification.infoForeground#121212
  • notification.warningBackground#ffba7b
  • notification.warningForeground#121212
  • notificationCenter.border#7e7e7e
  • notificationCenterHeader.background#121212
  • notificationCenterHeader.foreground#d5d5d5
  • notificationLink.foreground#00988e
  • notifications.background#121212
  • notifications.border#7e7e7e
  • notifications.foreground#d5d5d5
  • notificationsErrorIcon.foreground#e27373
  • notificationsInfoIcon.foreground#97bedc
  • notificationsWarningIcon.foreground#ffba7b
  • notificationToast.border#7e7e7e
  • panel.background#121212
  • panel.border#97bedc
  • panelInput.border#d5d5d5
  • panelTitle.activeBorder#e1c0fa
  • panelTitle.activeForeground#d5d5d5
  • panelTitle.inactiveForeground#c5c5c5
  • peekView.border#929292
  • peekViewEditor.background#121212
  • peekViewEditor.matchHighlightBackground#ffdca080
  • peekViewResult.background#7e7e7e
  • peekViewResult.fileForeground#d5d5d5
  • peekViewResult.lineForeground#d5d5d5
  • peekViewResult.matchHighlightBackground#ffdca080
  • peekViewResult.selectionBackground#929292
  • peekViewResult.selectionForeground#d5d5d5
  • peekViewTitle.background#3f3f3f
  • peekViewTitleDescription.foreground#c5c5c5
  • peekViewTitleLabel.foreground#d5d5d5
  • pickerGroup.border#97bedc
  • pickerGroup.foreground#00988e
  • progressBar.background#e1c0fa
  • scrollbar.shadow#444444
  • selection.background#97bedc
  • settings.checkboxBackground#7e7e7e
  • settings.checkboxBorder#3f3f3f
  • settings.checkboxForeground#d5d5d5
  • settings.dropdownBackground#7e7e7e
  • settings.dropdownBorder#3f3f3f
  • settings.dropdownForeground#d5d5d5
  • settings.headerForeground#d5d5d5
  • settings.modifiedItemIndicator#ffba7b
  • settings.numberInputBackground#7e7e7e
  • settings.numberInputBorder#3f3f3f
  • settings.numberInputForeground#d5d5d5
  • settings.textInputBackground#7e7e7e
  • settings.textInputBorder#3f3f3f
  • settings.textInputForeground#d5d5d5
  • sideBar.background#7e7e7e
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.border#3f3f3f
  • sideBarTitle.foreground#d5d5d5
  • statusBar.background#3f3f3f
  • statusBar.debuggingBackground#e27373
  • statusBar.debuggingForeground#3f3f3f
  • statusBar.foreground#d5d5d5
  • statusBar.noFolderBackground#3f3f3f
  • statusBar.noFolderForeground#d5d5d5
  • statusBarItem.prominentBackground#e27373
  • statusBarItem.prominentHoverBackground#ffba7b
  • statusBarItem.remoteBackground#97bedc
  • statusBarItem.remoteForeground#121212
  • tab.activeBackground#121212
  • tab.activeBorderTop#e1c0fa80
  • tab.activeForeground#d5d5d5
  • tab.border#3f3f3f
  • tab.inactiveBackground#7e7e7e
  • tab.inactiveForeground#c5c5c5
  • terminal.ansiBlack#929292
  • terminal.ansiBlue#97bedc
  • terminal.ansiBrightBlack#bdbdbd
  • terminal.ansiBrightBlue#b1d8f6
  • terminal.ansiBrightCyan#1ab2a8
  • terminal.ansiBrightGreen#bddeab
  • terminal.ansiBrightMagenta#fbdaff
  • terminal.ansiBrightRed#ffa1a1
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffdca0
  • terminal.ansiCyan#00988e
  • terminal.ansiGreen#93b979
  • terminal.ansiMagenta#e1c0fa
  • terminal.ansiRed#e27373
  • terminal.ansiWhite#dedede
  • terminal.ansiYellow#ffba7b
  • terminal.background#121212
  • terminal.border#d5d5d5
  • terminal.foreground#d5d5d5
  • terminal.selectionBackground#92929250
  • textBlockQuote.background#7e7e7e
  • titleBar.activeBackground#7e7e7e
  • titleBar.activeForeground#d5d5d5
  • titleBar.inactiveBackground#3f3f3f
  • titleBar.inactiveForeground#c5c5c5
  • walkThrough.embeddedEditorBackground#7e7e7e
  • welcomePage.buttonBackground#929292
  • welcomePage.buttonHoverBackground#bdbdbd75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#97bedc
source#d5d5d5
meta.diff, meta.diff.header#c5c5c5
markup.inserted#93b979
markup.deleted#e27373
markup.changed#ffba7b
invalid#e27373underline italic
invalid.deprecated#d5d5d5underline italic
entity.name.filename#ffdca0
markup.error#e27373
markup.underlineunderline
markup.bold#ffba7bbold
markup.heading#97bedcbold
markup.italic#ffdca0italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#00988e
markup.inline.raw, markup.raw.restructuredtext#93b979
markup.underline.link, markup.underline.link.image#00988e
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#e1c0fa
entity.name.directive.restructuredtext, markup.quote#ffdca0italic
meta.separator.markdown#c5c5c5
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#93b979
punctuation.definition.constant.restructuredtext#97bedc
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#97bedc
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d5d5d5
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffdca0
entity.name.type.class, entity.name.class#00988enormal
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#97bedcitalic
entity.other.inherited-class#00988eitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#c5c5c5
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#e1c0fa
comment.block.documentation entity.name.type#00988eitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#00988e
comment.block.documentation variable#ffba7bitalic
constant, variable.other.constant#97bedc
constant.character.escape, constant.character.string.escape, constant.regexp#e1c0fa
entity.name.tag#e1c0fa
entity.other.attribute-name.parent-selector#e1c0fa
entity.other.attribute-name#93b979italic
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#93b979
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#ffba7bitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#93b979italic
meta.decorator variable.other.object#93b979
keyword, punctuation.definition.keyword#e1c0fa
keyword.control.new, keyword.operator.newbold
meta.selector#e1c0fa
support#00988eitalic
support.function.magic, support.variable, variable.other.predefined#97bedcregular
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#e1c0fa
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#d5d5d5
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#e1c0fa
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#00988e
constant.other.date, constant.other.timestamp#ffba7b
variable.other.alias.yaml#93b979italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#e1c0faregular
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#00988eitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ffba7b
storage.modifier#e1c0fa
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffdca0
punctuation.definition.group.capture.regexp#e1c0fa
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e27373
punctuation.definition.character-class.regexp#00988e
punctuation.definition.group.regexp#ffba7b
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#e27373
meta.assertion.look-ahead.regexp#93b979
string#ffdca0
punctuation.definition.string.begin, punctuation.definition.string.end#b1d8f6
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97bedc
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#c5c5c5
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d5d5d5
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#ffba7bitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d5d5d5normal
meta.selectionset.graphql variable#ffdca0
meta.selectionset.graphql meta.arguments variable#d5d5d5
entity.name.fragment.graphql, variable.fragment.graphql#00988e
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#d5d5d5
source.shell variable.other#97bedc
support.constant#97bedcnormal
meta.scope.prerequisites.makefile#ffdca0
meta.attribute-selector.scss#ffdca0
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d5d5d5
meta.preprocessor.haskell#c5c5c5