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#a0b9d510
  • activityBar.activeBorder#bf92d580
  • activityBar.background#212121
  • activityBar.foreground#a6a6a6
  • activityBar.inactiveForeground#6f6f6f
  • activityBarBadge.background#bf92d5
  • activityBarBadge.foreground#212121
  • badge.background#313131
  • badge.foreground#a6a6a6
  • breadcrumb.activeSelectionForeground#a6a6a6
  • breadcrumb.background#212121
  • breadcrumb.focusForeground#a6a6a6
  • breadcrumb.foreground#6f6f6f
  • breadcrumbPicker.background#161717
  • button.background#2d2f2f
  • button.foreground#a6a6a6
  • checkbox.background#2d2f2f
  • checkbox.border#161717
  • checkbox.foreground#a6a6a6
  • contrastBorder#161717
  • debugToolBar.background#2d2f2f
  • diffEditor.insertedTextBackground#afba6620
  • diffEditor.removedTextBackground#d35a5f50
  • dropdown.background#212121
  • dropdown.border#161717
  • dropdown.foreground#a6a6a6
  • editor.background#212121
  • editor.findMatchBackground#e5af8980
  • editor.findMatchHighlightBackground#d9d9d940
  • editor.findRangeHighlightBackground#4f4f4f75
  • editor.foldBackground#2d2f2f
  • editor.foreground#a6a6a6
  • editor.hoverHighlightBackground#161717
  • editor.lineHighlightBorder#313131
  • editor.rangeHighlightBackground#a0b9d515
  • editor.selectionBackground#313131
  • editor.selectionHighlightBackground#313131
  • editor.snippetFinalTabstopHighlightBackground#212121
  • editor.snippetFinalTabstopHighlightBorder#afba66
  • editor.snippetTabstopHighlightBackground#212121
  • editor.snippetTabstopHighlightBorder#6f6f6f
  • editor.wordHighlightBackground#91beb650
  • editor.wordHighlightStrongBackground#afba6650
  • editorCodeLens.foreground#6f6f6f
  • editorError.foreground#d35a5f
  • editorGroup.border#a0b9d5
  • editorGroup.dropBackground#4f4f4f70
  • editorGroupHeader.tabsBackground#161717
  • editorGutter.addedBackground#afba6680
  • editorGutter.deletedBackground#d35a5f80
  • editorGutter.modifiedBackground#91beb680
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#6f6f6f
  • editorIndentGuide.activeBackground#d9d9d945
  • editorIndentGuide.background#d9d9d91A
  • editorLineNumber.foreground#6f6f6f
  • editorLink.activeForeground#91beb6
  • editorMarkerNavigation.background#2d2f2f
  • editorOverviewRuler.addedForeground#afba6680
  • editorOverviewRuler.border#161717
  • editorOverviewRuler.currentContentForeground#afba66
  • editorOverviewRuler.deletedForeground#d35a5f80
  • editorOverviewRuler.errorForeground#d35a5f80
  • editorOverviewRuler.incomingContentForeground#a0b9d5
  • editorOverviewRuler.infoForeground#91beb680
  • editorOverviewRuler.modifiedForeground#91beb680
  • editorOverviewRuler.selectionHighlightForeground#e5af89
  • editorOverviewRuler.warningForeground#e5af8980
  • editorOverviewRuler.wordHighlightForeground#91beb6
  • editorOverviewRuler.wordHighlightStrongForeground#afba66
  • editorRuler.foreground#d9d9d91A
  • editorSuggestWidget.background#2d2f2f
  • editorSuggestWidget.foreground#a6a6a6
  • editorSuggestWidget.selectedBackground#313131
  • editorWarning.foreground#e5af89
  • editorWhitespace.foreground#d9d9d91A
  • editorWidget.background#2d2f2f
  • errorForeground#d35a5f
  • extensionButton.prominentBackground#afba6690
  • extensionButton.prominentForeground#a6a6a6
  • extensionButton.prominentHoverBackground#afba6660
  • focusBorder#6f6f6f
  • foreground#a6a6a6
  • gitDecoration.conflictingResourceForeground#e5af89
  • gitDecoration.deletedResourceForeground#d35a5f
  • gitDecoration.ignoredResourceForeground#6f6f6f
  • gitDecoration.modifiedResourceForeground#91beb6
  • gitDecoration.untrackedResourceForeground#afba66
  • input.background#212121
  • input.border#161717
  • input.foreground#a6a6a6
  • input.placeholderForeground#6f6f6f
  • inputOption.activeBorder#a0b9d5
  • inputValidation.errorBackground#212121
  • inputValidation.errorBorder#d35a5f
  • inputValidation.errorForeground#d35a5f
  • inputValidation.infoBackground#212121
  • inputValidation.infoBorder#a0b9d5
  • inputValidation.infoForeground#a0b9d5
  • inputValidation.warningBackground#212121
  • inputValidation.warningBorder#e5af89
  • inputValidation.warningForeground#e5af89
  • list.activeSelectionBackground#313131
  • list.activeSelectionForeground#a6a6a6
  • list.dropBackground#313131
  • list.errorForeground#d35a5f
  • list.focusBackground#4f4f4f75
  • list.highlightForeground#91beb6
  • list.hoverBackground#4f4f4f75
  • list.inactiveSelectionBackground#4f4f4f75
  • list.warningForeground#e5af89
  • listFilterWidget.background#212121
  • listFilterWidget.noMatchesOutline#d35a5f
  • listFilterWidget.outline#313131
  • merge.currentHeaderBackground#afba6690
  • merge.incomingHeaderBackground#a0b9d590
  • notification.background#212121
  • notification.buttonBackground#313131
  • notification.buttonForeground#a6a6a6
  • notification.buttonHoverBackground#4f4f4f75
  • notification.errorBackground#d35a5f
  • notification.errorForeground#212121
  • notification.foreground#a6a6a6
  • notification.infoBackground#a0b9d5
  • notification.infoForeground#212121
  • notification.warningBackground#e5af89
  • notification.warningForeground#212121
  • notificationCenter.border#2d2f2f
  • notificationCenterHeader.background#212121
  • notificationCenterHeader.foreground#a6a6a6
  • notificationLink.foreground#91beb6
  • notifications.background#212121
  • notifications.border#2d2f2f
  • notifications.foreground#a6a6a6
  • notificationsErrorIcon.foreground#d35a5f
  • notificationsInfoIcon.foreground#a0b9d5
  • notificationsWarningIcon.foreground#e5af89
  • notificationToast.border#2d2f2f
  • panel.background#212121
  • panel.border#a0b9d5
  • panelInput.border#a6a6a6
  • panelTitle.activeBorder#bf92d5
  • panelTitle.activeForeground#a6a6a6
  • panelTitle.inactiveForeground#6f6f6f
  • peekView.border#313131
  • peekViewEditor.background#212121
  • peekViewEditor.matchHighlightBackground#e4bd3980
  • peekViewResult.background#2d2f2f
  • peekViewResult.fileForeground#a6a6a6
  • peekViewResult.lineForeground#a6a6a6
  • peekViewResult.matchHighlightBackground#e4bd3980
  • peekViewResult.selectionBackground#313131
  • peekViewResult.selectionForeground#a6a6a6
  • peekViewTitle.background#161717
  • peekViewTitleDescription.foreground#6f6f6f
  • peekViewTitleLabel.foreground#a6a6a6
  • pickerGroup.border#a0b9d5
  • pickerGroup.foreground#91beb6
  • progressBar.background#bf92d5
  • scrollbar.shadow#444444
  • selection.background#a0b9d5
  • settings.checkboxBackground#2d2f2f
  • settings.checkboxBorder#161717
  • settings.checkboxForeground#a6a6a6
  • settings.dropdownBackground#2d2f2f
  • settings.dropdownBorder#161717
  • settings.dropdownForeground#a6a6a6
  • settings.headerForeground#a6a6a6
  • settings.modifiedItemIndicator#e5af89
  • settings.numberInputBackground#2d2f2f
  • settings.numberInputBorder#161717
  • settings.numberInputForeground#a6a6a6
  • settings.textInputBackground#2d2f2f
  • settings.textInputBorder#161717
  • settings.textInputForeground#a6a6a6
  • sideBar.background#2d2f2f
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.border#161717
  • sideBarTitle.foreground#a6a6a6
  • statusBar.background#161717
  • statusBar.debuggingBackground#d35a5f
  • statusBar.debuggingForeground#161717
  • statusBar.foreground#a6a6a6
  • statusBar.noFolderBackground#161717
  • statusBar.noFolderForeground#a6a6a6
  • statusBarItem.prominentBackground#d35a5f
  • statusBarItem.prominentHoverBackground#e5af89
  • statusBarItem.remoteBackground#a0b9d5
  • statusBarItem.remoteForeground#212121
  • tab.activeBackground#212121
  • tab.activeBorderTop#bf92d580
  • tab.activeForeground#a6a6a6
  • tab.border#161717
  • tab.inactiveBackground#2d2f2f
  • tab.inactiveForeground#6f6f6f
  • terminal.ansiBlack#313131
  • terminal.ansiBlue#a0b9d5
  • terminal.ansiBrightBlack#4f4f4f
  • terminal.ansiBrightBlue#6599d5
  • terminal.ansiBrightCyan#5fbfad
  • terminal.ansiBrightGreen#aabb39
  • terminal.ansiBrightMagenta#aa52d5
  • terminal.ansiBrightRed#d3222e
  • terminal.ansiBrightWhite#d9d9d9
  • terminal.ansiBrightYellow#e4bd39
  • terminal.ansiCyan#91beb6
  • terminal.ansiGreen#afba66
  • terminal.ansiMagenta#bf92d5
  • terminal.ansiRed#d35a5f
  • terminal.ansiWhite#bfbfbf
  • terminal.ansiYellow#e5af89
  • terminal.background#212121
  • terminal.border#a6a6a6
  • terminal.foreground#a6a6a6
  • terminal.selectionBackground#31313150
  • textBlockQuote.background#2d2f2f
  • titleBar.activeBackground#2d2f2f
  • titleBar.activeForeground#a6a6a6
  • titleBar.inactiveBackground#161717
  • titleBar.inactiveForeground#6f6f6f
  • walkThrough.embeddedEditorBackground#2d2f2f
  • welcomePage.buttonBackground#313131
  • welcomePage.buttonHoverBackground#4f4f4f75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#a0b9d5
source#a6a6a6
meta.diff, meta.diff.header#6f6f6f
markup.inserted#afba66
markup.deleted#d35a5f
markup.changed#e5af89
invalid#d35a5funderline italic
invalid.deprecated#a6a6a6underline italic
entity.name.filename#e4bd39
markup.error#d35a5f
markup.underlineunderline
markup.bold#e5af89bold
markup.heading#a0b9d5bold
markup.italic#e4bd39italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#91beb6
markup.inline.raw, markup.raw.restructuredtext#afba66
markup.underline.link, markup.underline.link.image#91beb6
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#bf92d5
entity.name.directive.restructuredtext, markup.quote#e4bd39italic
meta.separator.markdown#6f6f6f
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#afba66
punctuation.definition.constant.restructuredtext#a0b9d5
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#a0b9d5
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a6a6a6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e4bd39
entity.name.type.class, entity.name.class#91beb6normal
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#a0b9d5italic
entity.other.inherited-class#91beb6italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6f6f6f
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#bf92d5
comment.block.documentation entity.name.type#91beb6italic
comment.block.documentation entity.name.type punctuation.definition.bracket#91beb6
comment.block.documentation variable#e5af89italic
constant, variable.other.constant#a0b9d5
constant.character.escape, constant.character.string.escape, constant.regexp#bf92d5
entity.name.tag#bf92d5
entity.other.attribute-name.parent-selector#bf92d5
entity.other.attribute-name#afba66italic
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#afba66
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#e5af89italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#afba66italic
meta.decorator variable.other.object#afba66
keyword, punctuation.definition.keyword#bf92d5
keyword.control.new, keyword.operator.newbold
meta.selector#bf92d5
support#91beb6italic
support.function.magic, support.variable, variable.other.predefined#a0b9d5regular
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#bf92d5
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#a6a6a6
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#bf92d5
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#91beb6
constant.other.date, constant.other.timestamp#e5af89
variable.other.alias.yaml#afba66italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#bf92d5regular
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#91beb6italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e5af89
storage.modifier#bf92d5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e4bd39
punctuation.definition.group.capture.regexp#bf92d5
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d35a5f
punctuation.definition.character-class.regexp#91beb6
punctuation.definition.group.regexp#e5af89
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d35a5f
meta.assertion.look-ahead.regexp#afba66
string#e4bd39
punctuation.definition.string.begin, punctuation.definition.string.end#e5d289
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#a0b9d5
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#6f6f6f
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a6a6a6
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e5af89italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a6a6a6normal
meta.selectionset.graphql variable#e4bd39
meta.selectionset.graphql meta.arguments variable#a6a6a6
entity.name.fragment.graphql, variable.fragment.graphql#91beb6
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#a6a6a6
source.shell variable.other#a0b9d5
support.constant#a0b9d5normal
meta.scope.prerequisites.makefile#e4bd39
meta.attribute-selector.scss#e4bd39
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a6a6a6
meta.preprocessor.haskell#6f6f6f
Tinted VSCode by Tinted Theming - VS Code Theme