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#206ec510
  • activityBar.activeBorder#86465180
  • activityBar.background#141414
  • activityBar.foreground#bfbdb7
  • activityBar.inactiveForeground#5d5b59
  • activityBarBadge.background#864651
  • activityBarBadge.foreground#141414
  • badge.background#191918
  • badge.foreground#bfbdb7
  • breadcrumb.activeSelectionForeground#bfbdb7
  • breadcrumb.background#141414
  • breadcrumb.focusForeground#bfbdb7
  • breadcrumb.foreground#5d5b59
  • breadcrumbPicker.background#0e0e0e
  • button.background#1d1c1c
  • button.foreground#bfbdb7
  • checkbox.background#1d1c1c
  • checkbox.border#0e0e0e
  • checkbox.foreground#bfbdb7
  • contrastBorder#0e0e0e
  • debugToolBar.background#1d1c1c
  • diffEditor.insertedTextBackground#58774420
  • diffEditor.removedTextBackground#b3453850
  • dropdown.background#141414
  • dropdown.border#0e0e0e
  • dropdown.foreground#bfbdb7
  • editor.background#141414
  • editor.findMatchBackground#d0894980
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#2c2b2a75
  • editor.foldBackground#1d1c1c
  • editor.foreground#bfbdb7
  • editor.hoverHighlightBackground#0e0e0e
  • editor.lineHighlightBorder#191918
  • editor.rangeHighlightBackground#206ec515
  • editor.selectionBackground#191918
  • editor.selectionHighlightBackground#191918
  • editor.snippetFinalTabstopHighlightBackground#141414
  • editor.snippetFinalTabstopHighlightBorder#587744
  • editor.snippetTabstopHighlightBackground#141414
  • editor.snippetTabstopHighlightBorder#5d5b59
  • editor.wordHighlightBackground#ac916650
  • editor.wordHighlightStrongBackground#58774450
  • editorCodeLens.foreground#5d5b59
  • editorError.foreground#b34538
  • editorGroup.border#206ec5
  • editorGroup.dropBackground#2c2b2a70
  • editorGroupHeader.tabsBackground#0e0e0e
  • editorGutter.addedBackground#58774480
  • editorGutter.deletedBackground#b3453880
  • editorGutter.modifiedBackground#ac916680
  • editorHoverWidget.background#141414
  • editorHoverWidget.border#5d5b59
  • editorIndentGuide.activeBackground#ffffff45
  • editorIndentGuide.background#ffffff1A
  • editorLineNumber.foreground#5d5b59
  • editorLink.activeForeground#ac9166
  • editorMarkerNavigation.background#1d1c1c
  • editorOverviewRuler.addedForeground#58774480
  • editorOverviewRuler.border#0e0e0e
  • editorOverviewRuler.currentContentForeground#587744
  • editorOverviewRuler.deletedForeground#b3453880
  • editorOverviewRuler.errorForeground#b3453880
  • editorOverviewRuler.incomingContentForeground#206ec5
  • editorOverviewRuler.infoForeground#ac916680
  • editorOverviewRuler.modifiedForeground#ac916680
  • editorOverviewRuler.selectionHighlightForeground#d08949
  • editorOverviewRuler.warningForeground#d0894980
  • editorOverviewRuler.wordHighlightForeground#ac9166
  • editorOverviewRuler.wordHighlightStrongForeground#587744
  • editorRuler.foreground#ffffff1A
  • editorSuggestWidget.background#1d1c1c
  • editorSuggestWidget.foreground#bfbdb7
  • editorSuggestWidget.selectedBackground#191918
  • editorWarning.foreground#d08949
  • editorWhitespace.foreground#ffffff1A
  • editorWidget.background#1d1c1c
  • errorForeground#b34538
  • extensionButton.prominentBackground#58774490
  • extensionButton.prominentForeground#bfbdb7
  • extensionButton.prominentHoverBackground#58774460
  • focusBorder#5d5b59
  • foreground#bfbdb7
  • gitDecoration.conflictingResourceForeground#d08949
  • gitDecoration.deletedResourceForeground#b34538
  • gitDecoration.ignoredResourceForeground#5d5b59
  • gitDecoration.modifiedResourceForeground#ac9166
  • gitDecoration.untrackedResourceForeground#587744
  • input.background#141414
  • input.border#0e0e0e
  • input.foreground#bfbdb7
  • input.placeholderForeground#5d5b59
  • inputOption.activeBorder#206ec5
  • inputValidation.errorBackground#141414
  • inputValidation.errorBorder#b34538
  • inputValidation.errorForeground#b34538
  • inputValidation.infoBackground#141414
  • inputValidation.infoBorder#206ec5
  • inputValidation.infoForeground#206ec5
  • inputValidation.warningBackground#141414
  • inputValidation.warningBorder#d08949
  • inputValidation.warningForeground#d08949
  • list.activeSelectionBackground#191918
  • list.activeSelectionForeground#bfbdb7
  • list.dropBackground#191918
  • list.errorForeground#b34538
  • list.focusBackground#2c2b2a75
  • list.highlightForeground#ac9166
  • list.hoverBackground#2c2b2a75
  • list.inactiveSelectionBackground#2c2b2a75
  • list.warningForeground#d08949
  • listFilterWidget.background#141414
  • listFilterWidget.noMatchesOutline#b34538
  • listFilterWidget.outline#191918
  • merge.currentHeaderBackground#58774490
  • merge.incomingHeaderBackground#206ec590
  • notification.background#141414
  • notification.buttonBackground#191918
  • notification.buttonForeground#bfbdb7
  • notification.buttonHoverBackground#2c2b2a75
  • notification.errorBackground#b34538
  • notification.errorForeground#141414
  • notification.foreground#bfbdb7
  • notification.infoBackground#206ec5
  • notification.infoForeground#141414
  • notification.warningBackground#d08949
  • notification.warningForeground#141414
  • notificationCenter.border#1d1c1c
  • notificationCenterHeader.background#141414
  • notificationCenterHeader.foreground#bfbdb7
  • notificationLink.foreground#ac9166
  • notifications.background#141414
  • notifications.border#1d1c1c
  • notifications.foreground#bfbdb7
  • notificationsErrorIcon.foreground#b34538
  • notificationsInfoIcon.foreground#206ec5
  • notificationsWarningIcon.foreground#d08949
  • notificationToast.border#1d1c1c
  • panel.background#141414
  • panel.border#206ec5
  • panelInput.border#bfbdb7
  • panelTitle.activeBorder#864651
  • panelTitle.activeForeground#bfbdb7
  • panelTitle.inactiveForeground#5d5b59
  • peekView.border#191918
  • peekViewEditor.background#141414
  • peekViewEditor.matchHighlightBackground#c75a2280
  • peekViewResult.background#1d1c1c
  • peekViewResult.fileForeground#bfbdb7
  • peekViewResult.lineForeground#bfbdb7
  • peekViewResult.matchHighlightBackground#c75a2280
  • peekViewResult.selectionBackground#191918
  • peekViewResult.selectionForeground#bfbdb7
  • peekViewTitle.background#0e0e0e
  • peekViewTitleDescription.foreground#5d5b59
  • peekViewTitleLabel.foreground#bfbdb7
  • pickerGroup.border#206ec5
  • pickerGroup.foreground#ac9166
  • progressBar.background#864651
  • scrollbar.shadow#444444
  • selection.background#206ec5
  • settings.checkboxBackground#1d1c1c
  • settings.checkboxBorder#0e0e0e
  • settings.checkboxForeground#bfbdb7
  • settings.dropdownBackground#1d1c1c
  • settings.dropdownBorder#0e0e0e
  • settings.dropdownForeground#bfbdb7
  • settings.headerForeground#bfbdb7
  • settings.modifiedItemIndicator#d08949
  • settings.numberInputBackground#1d1c1c
  • settings.numberInputBorder#0e0e0e
  • settings.numberInputForeground#bfbdb7
  • settings.textInputBackground#1d1c1c
  • settings.textInputBorder#0e0e0e
  • settings.textInputForeground#bfbdb7
  • sideBar.background#1d1c1c
  • sideBarSectionHeader.background#141414
  • sideBarSectionHeader.border#0e0e0e
  • sideBarTitle.foreground#bfbdb7
  • statusBar.background#0e0e0e
  • statusBar.debuggingBackground#b34538
  • statusBar.debuggingForeground#0e0e0e
  • statusBar.foreground#bfbdb7
  • statusBar.noFolderBackground#0e0e0e
  • statusBar.noFolderForeground#bfbdb7
  • statusBarItem.prominentBackground#b34538
  • statusBarItem.prominentHoverBackground#d08949
  • statusBarItem.remoteBackground#206ec5
  • statusBarItem.remoteForeground#141414
  • tab.activeBackground#141414
  • tab.activeBorderTop#86465180
  • tab.activeForeground#bfbdb7
  • tab.border#0e0e0e
  • tab.inactiveBackground#1d1c1c
  • tab.inactiveForeground#5d5b59
  • terminal.ansiBlack#191918
  • terminal.ansiBlue#206ec5
  • terminal.ansiBrightBlack#2c2b2a
  • terminal.ansiBrightBlue#5389c5
  • terminal.ansiBrightCyan#ebc587
  • terminal.ansiBrightGreen#42824a
  • terminal.ansiBrightMagenta#e795a5
  • terminal.ansiBrightRed#b33323
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#c75a22
  • terminal.ansiCyan#ac9166
  • terminal.ansiGreen#587744
  • terminal.ansiMagenta#864651
  • terminal.ansiRed#b34538
  • terminal.ansiWhite#f1eee7
  • terminal.ansiYellow#d08949
  • terminal.background#141414
  • terminal.border#bfbdb7
  • terminal.foreground#bfbdb7
  • terminal.selectionBackground#19191850
  • textBlockQuote.background#1d1c1c
  • titleBar.activeBackground#1d1c1c
  • titleBar.activeForeground#bfbdb7
  • titleBar.inactiveBackground#0e0e0e
  • titleBar.inactiveForeground#5d5b59
  • walkThrough.embeddedEditorBackground#1d1c1c
  • welcomePage.buttonBackground#191918
  • welcomePage.buttonHoverBackground#2c2b2a75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#206ec5
source#bfbdb7
meta.diff, meta.diff.header#5d5b59
markup.inserted#587744
markup.deleted#b34538
markup.changed#d08949
invalid#b34538underline italic
invalid.deprecated#bfbdb7underline italic
entity.name.filename#c75a22
markup.error#b34538
markup.underlineunderline
markup.bold#d08949bold
markup.heading#206ec5bold
markup.italic#c75a22italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#ac9166
markup.inline.raw, markup.raw.restructuredtext#587744
markup.underline.link, markup.underline.link.image#ac9166
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#864651
entity.name.directive.restructuredtext, markup.quote#c75a22italic
meta.separator.markdown#5d5b59
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#587744
punctuation.definition.constant.restructuredtext#206ec5
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#206ec5
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#bfbdb7
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#c75a22
entity.name.type.class, entity.name.class#ac9166normal
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#206ec5italic
entity.other.inherited-class#ac9166italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5d5b59
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#864651
comment.block.documentation entity.name.type#ac9166italic
comment.block.documentation entity.name.type punctuation.definition.bracket#ac9166
comment.block.documentation variable#d08949italic
constant, variable.other.constant#206ec5
constant.character.escape, constant.character.string.escape, constant.regexp#864651
entity.name.tag#864651
entity.other.attribute-name.parent-selector#864651
entity.other.attribute-name#587744italic
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#587744
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#d08949italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#587744italic
meta.decorator variable.other.object#587744
keyword, punctuation.definition.keyword#864651
keyword.control.new, keyword.operator.newbold
meta.selector#864651
support#ac9166italic
support.function.magic, support.variable, variable.other.predefined#206ec5regular
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#864651
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#bfbdb7
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#864651
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#ac9166
constant.other.date, constant.other.timestamp#d08949
variable.other.alias.yaml#587744italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#864651regular
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#ac9166italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#d08949
storage.modifier#864651
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#c75a22
punctuation.definition.group.capture.regexp#864651
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#b34538
punctuation.definition.character-class.regexp#ac9166
punctuation.definition.group.regexp#d08949
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#b34538
meta.assertion.look-ahead.regexp#587744
string#c75a22
punctuation.definition.string.begin, punctuation.definition.string.end#5389c5
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#206ec5
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#5d5b59
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#bfbdb7
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#d08949italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#bfbdb7normal
meta.selectionset.graphql variable#c75a22
meta.selectionset.graphql meta.arguments variable#bfbdb7
entity.name.fragment.graphql, variable.fragment.graphql#ac9166
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#bfbdb7
source.shell variable.other#206ec5
support.constant#206ec5normal
meta.scope.prerequisites.makefile#c75a22
meta.attribute-selector.scss#c75a22
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#bfbdb7
meta.preprocessor.haskell#5d5b59
Tinted VSCode by Tinted Theming - VS Code Theme