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#4c99d310
  • activityBar.activeBorder#a57fc480
  • activityBar.background#1d1d1d
  • activityBar.foreground#d0d2ce
  • activityBar.inactiveForeground#80827f
  • activityBarBadge.background#a57fc4
  • activityBarBadge.foreground#1d1d1d
  • badge.background#343835
  • badge.foreground#d0d2ce
  • breadcrumb.activeSelectionForeground#d0d2ce
  • breadcrumb.background#1d1d1d
  • breadcrumb.focusForeground#d0d2ce
  • breadcrumb.foreground#80827f
  • breadcrumbPicker.background#1d1e1d
  • button.background#3a3c3a
  • button.foreground#d0d2ce
  • checkbox.background#3a3c3a
  • checkbox.border#1d1e1d
  • checkbox.foreground#d0d2ce
  • contrastBorder#1d1e1d
  • debugToolBar.background#3a3c3a
  • diffEditor.insertedTextBackground#7bb75b20
  • diffEditor.removedTextBackground#ce3e6050
  • dropdown.background#1d1d1d
  • dropdown.border#1d1e1d
  • dropdown.foreground#d0d2ce
  • editor.background#1d1d1d
  • editor.findMatchBackground#e8b32a80
  • editor.findMatchHighlightBackground#b1b5ae40
  • editor.findRangeHighlightBackground#585a5875
  • editor.foldBackground#3a3c3a
  • editor.foreground#d0d2ce
  • editor.hoverHighlightBackground#1d1e1d
  • editor.lineHighlightBorder#343835
  • editor.rangeHighlightBackground#4c99d315
  • editor.selectionBackground#343835
  • editor.selectionHighlightBackground#343835
  • editor.snippetFinalTabstopHighlightBackground#1d1d1d
  • editor.snippetFinalTabstopHighlightBorder#7bb75b
  • editor.snippetTabstopHighlightBackground#1d1d1d
  • editor.snippetTabstopHighlightBorder#80827f
  • editor.wordHighlightBackground#389aac50
  • editor.wordHighlightStrongBackground#7bb75b50
  • editorCodeLens.foreground#80827f
  • editorError.foreground#ce3e60
  • editorGroup.border#4c99d3
  • editorGroup.dropBackground#585a5870
  • editorGroupHeader.tabsBackground#1d1e1d
  • editorGutter.addedBackground#7bb75b80
  • editorGutter.deletedBackground#ce3e6080
  • editorGutter.modifiedBackground#389aac80
  • editorHoverWidget.background#1d1d1d
  • editorHoverWidget.border#80827f
  • editorIndentGuide.activeBackground#b1b5ae45
  • editorIndentGuide.background#b1b5ae1A
  • editorLineNumber.foreground#80827f
  • editorLink.activeForeground#389aac
  • editorMarkerNavigation.background#3a3c3a
  • editorOverviewRuler.addedForeground#7bb75b80
  • editorOverviewRuler.border#1d1e1d
  • editorOverviewRuler.currentContentForeground#7bb75b
  • editorOverviewRuler.deletedForeground#ce3e6080
  • editorOverviewRuler.errorForeground#ce3e6080
  • editorOverviewRuler.incomingContentForeground#4c99d3
  • editorOverviewRuler.infoForeground#389aac80
  • editorOverviewRuler.modifiedForeground#389aac80
  • editorOverviewRuler.selectionHighlightForeground#e8b32a
  • editorOverviewRuler.warningForeground#e8b32a80
  • editorOverviewRuler.wordHighlightForeground#389aac
  • editorOverviewRuler.wordHighlightStrongForeground#7bb75b
  • editorRuler.foreground#b1b5ae1A
  • editorSuggestWidget.background#3a3c3a
  • editorSuggestWidget.foreground#d0d2ce
  • editorSuggestWidget.selectedBackground#343835
  • editorWarning.foreground#e8b32a
  • editorWhitespace.foreground#b1b5ae1A
  • editorWidget.background#3a3c3a
  • errorForeground#ce3e60
  • extensionButton.prominentBackground#7bb75b90
  • extensionButton.prominentForeground#d0d2ce
  • extensionButton.prominentHoverBackground#7bb75b60
  • focusBorder#80827f
  • foreground#d0d2ce
  • gitDecoration.conflictingResourceForeground#e8b32a
  • gitDecoration.deletedResourceForeground#ce3e60
  • gitDecoration.ignoredResourceForeground#80827f
  • gitDecoration.modifiedResourceForeground#389aac
  • gitDecoration.untrackedResourceForeground#7bb75b
  • input.background#1d1d1d
  • input.border#1d1e1d
  • input.foreground#d0d2ce
  • input.placeholderForeground#80827f
  • inputOption.activeBorder#4c99d3
  • inputValidation.errorBackground#1d1d1d
  • inputValidation.errorBorder#ce3e60
  • inputValidation.errorForeground#ce3e60
  • inputValidation.infoBackground#1d1d1d
  • inputValidation.infoBorder#4c99d3
  • inputValidation.infoForeground#4c99d3
  • inputValidation.warningBackground#1d1d1d
  • inputValidation.warningBorder#e8b32a
  • inputValidation.warningForeground#e8b32a
  • list.activeSelectionBackground#343835
  • list.activeSelectionForeground#d0d2ce
  • list.dropBackground#343835
  • list.errorForeground#ce3e60
  • list.focusBackground#585a5875
  • list.highlightForeground#389aac
  • list.hoverBackground#585a5875
  • list.inactiveSelectionBackground#585a5875
  • list.warningForeground#e8b32a
  • listFilterWidget.background#1d1d1d
  • listFilterWidget.noMatchesOutline#ce3e60
  • listFilterWidget.outline#343835
  • merge.currentHeaderBackground#7bb75b90
  • merge.incomingHeaderBackground#4c99d390
  • notification.background#1d1d1d
  • notification.buttonBackground#343835
  • notification.buttonForeground#d0d2ce
  • notification.buttonHoverBackground#585a5875
  • notification.errorBackground#ce3e60
  • notification.errorForeground#1d1d1d
  • notification.foreground#d0d2ce
  • notification.infoBackground#4c99d3
  • notification.infoForeground#1d1d1d
  • notification.warningBackground#e8b32a
  • notification.warningForeground#1d1d1d
  • notificationCenter.border#3a3c3a
  • notificationCenterHeader.background#1d1d1d
  • notificationCenterHeader.foreground#d0d2ce
  • notificationLink.foreground#389aac
  • notifications.background#1d1d1d
  • notifications.border#3a3c3a
  • notifications.foreground#d0d2ce
  • notificationsErrorIcon.foreground#ce3e60
  • notificationsInfoIcon.foreground#4c99d3
  • notificationsWarningIcon.foreground#e8b32a
  • notificationToast.border#3a3c3a
  • panel.background#1d1d1d
  • panel.border#4c99d3
  • panelInput.border#d0d2ce
  • panelTitle.activeBorder#a57fc4
  • panelTitle.activeForeground#d0d2ce
  • panelTitle.inactiveForeground#80827f
  • peekView.border#343835
  • peekViewEditor.background#1d1d1d
  • peekViewEditor.matchHighlightBackground#77592e80
  • peekViewResult.background#3a3c3a
  • peekViewResult.fileForeground#d0d2ce
  • peekViewResult.lineForeground#d0d2ce
  • peekViewResult.matchHighlightBackground#77592e80
  • peekViewResult.selectionBackground#343835
  • peekViewResult.selectionForeground#d0d2ce
  • peekViewTitle.background#1d1e1d
  • peekViewTitleDescription.foreground#80827f
  • peekViewTitleLabel.foreground#d0d2ce
  • pickerGroup.border#4c99d3
  • pickerGroup.foreground#389aac
  • progressBar.background#a57fc4
  • scrollbar.shadow#444444
  • selection.background#4c99d3
  • settings.checkboxBackground#3a3c3a
  • settings.checkboxBorder#1d1e1d
  • settings.checkboxForeground#d0d2ce
  • settings.dropdownBackground#3a3c3a
  • settings.dropdownBorder#1d1e1d
  • settings.dropdownForeground#d0d2ce
  • settings.headerForeground#d0d2ce
  • settings.modifiedItemIndicator#e8b32a
  • settings.numberInputBackground#3a3c3a
  • settings.numberInputBorder#1d1e1d
  • settings.numberInputForeground#d0d2ce
  • settings.textInputBackground#3a3c3a
  • settings.textInputBorder#1d1e1d
  • settings.textInputForeground#d0d2ce
  • sideBar.background#3a3c3a
  • sideBarSectionHeader.background#1d1d1d
  • sideBarSectionHeader.border#1d1e1d
  • sideBarTitle.foreground#d0d2ce
  • statusBar.background#1d1e1d
  • statusBar.debuggingBackground#ce3e60
  • statusBar.debuggingForeground#1d1e1d
  • statusBar.foreground#d0d2ce
  • statusBar.noFolderBackground#1d1e1d
  • statusBar.noFolderForeground#d0d2ce
  • statusBarItem.prominentBackground#ce3e60
  • statusBarItem.prominentHoverBackground#e8b32a
  • statusBarItem.remoteBackground#4c99d3
  • statusBarItem.remoteForeground#1d1d1d
  • tab.activeBackground#1d1d1d
  • tab.activeBorderTop#a57fc480
  • tab.activeForeground#d0d2ce
  • tab.border#1d1e1d
  • tab.inactiveBackground#3a3c3a
  • tab.inactiveForeground#80827f
  • terminal.ansiBlack#343835
  • terminal.ansiBlue#4c99d3
  • terminal.ansiBrightBlack#585a58
  • terminal.ansiBrightBlue#135879
  • terminal.ansiBrightCyan#76bbca
  • terminal.ansiBrightGreen#767e2b
  • terminal.ansiBrightMagenta#5f4190
  • terminal.ansiBrightRed#d18ea6
  • terminal.ansiBrightWhite#b1b5ae
  • terminal.ansiBrightYellow#77592e
  • terminal.ansiCyan#389aac
  • terminal.ansiGreen#7bb75b
  • terminal.ansiMagenta#a57fc4
  • terminal.ansiRed#ce3e60
  • terminal.ansiWhite#f9faf6
  • terminal.ansiYellow#e8b32a
  • terminal.background#1d1d1d
  • terminal.border#d0d2ce
  • terminal.foreground#d0d2ce
  • terminal.selectionBackground#34383550
  • textBlockQuote.background#3a3c3a
  • titleBar.activeBackground#3a3c3a
  • titleBar.activeForeground#d0d2ce
  • titleBar.inactiveBackground#1d1e1d
  • titleBar.inactiveForeground#80827f
  • walkThrough.embeddedEditorBackground#3a3c3a
  • welcomePage.buttonBackground#343835
  • welcomePage.buttonHoverBackground#585a5875
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#4c99d3
source#d0d2ce
meta.diff, meta.diff.header#80827f
markup.inserted#7bb75b
markup.deleted#ce3e60
markup.changed#e8b32a
invalid#ce3e60underline italic
invalid.deprecated#d0d2ceunderline italic
entity.name.filename#77592e
markup.error#ce3e60
markup.underlineunderline
markup.bold#e8b32abold
markup.heading#4c99d3bold
markup.italic#77592eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#389aac
markup.inline.raw, markup.raw.restructuredtext#7bb75b
markup.underline.link, markup.underline.link.image#389aac
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a57fc4
entity.name.directive.restructuredtext, markup.quote#77592eitalic
meta.separator.markdown#80827f
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#7bb75b
punctuation.definition.constant.restructuredtext#4c99d3
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#4c99d3
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d0d2ce
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#77592e
entity.name.type.class, entity.name.class#389aacnormal
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#4c99d3italic
entity.other.inherited-class#389aacitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#80827f
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a57fc4
comment.block.documentation entity.name.type#389aacitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#389aac
comment.block.documentation variable#e8b32aitalic
constant, variable.other.constant#4c99d3
constant.character.escape, constant.character.string.escape, constant.regexp#a57fc4
entity.name.tag#a57fc4
entity.other.attribute-name.parent-selector#a57fc4
entity.other.attribute-name#7bb75bitalic
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#7bb75b
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#e8b32aitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#7bb75bitalic
meta.decorator variable.other.object#7bb75b
keyword, punctuation.definition.keyword#a57fc4
keyword.control.new, keyword.operator.newbold
meta.selector#a57fc4
support#389aacitalic
support.function.magic, support.variable, variable.other.predefined#4c99d3regular
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#a57fc4
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#d0d2ce
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#a57fc4
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#389aac
constant.other.date, constant.other.timestamp#e8b32a
variable.other.alias.yaml#7bb75bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a57fc4regular
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#389aacitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#e8b32a
storage.modifier#a57fc4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#77592e
punctuation.definition.group.capture.regexp#a57fc4
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ce3e60
punctuation.definition.character-class.regexp#389aac
punctuation.definition.group.regexp#e8b32a
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ce3e60
meta.assertion.look-ahead.regexp#7bb75b
string#77592e
punctuation.definition.string.begin, punctuation.definition.string.end#135879
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#4c99d3
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#80827f
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d0d2ce
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#e8b32aitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d0d2cenormal
meta.selectionset.graphql variable#77592e
meta.selectionset.graphql meta.arguments variable#d0d2ce
entity.name.fragment.graphql, variable.fragment.graphql#389aac
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#d0d2ce
source.shell variable.other#4c99d3
support.constant#4c99d3normal
meta.scope.prerequisites.makefile#77592e
meta.attribute-selector.scss#77592e
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d0d2ce
meta.preprocessor.haskell#80827f
Tinted VSCode by Tinted Theming - VS Code Theme