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#644ac910
  • activityBar.activeBorder#a3144d80
  • activityBar.background#fffbeb
  • activityBar.foreground#1f1f1f
  • activityBar.inactiveForeground#6c664b
  • activityBarBadge.background#a3144d
  • activityBarBadge.foreground#fffbeb
  • badge.background#ceccc0
  • badge.foreground#1f1f1f
  • breadcrumb.activeSelectionForeground#1f1f1f
  • breadcrumb.background#fffbeb
  • breadcrumb.focusForeground#1f1f1f
  • breadcrumb.foreground#6c664b
  • breadcrumbPicker.background#f5f0da
  • button.background#fdf8e2
  • button.foreground#1f1f1f
  • checkbox.background#fdf8e2
  • checkbox.border#f5f0da
  • checkbox.foreground#1f1f1f
  • contrastBorder#f5f0da
  • debugToolBar.background#fdf8e2
  • diffEditor.insertedTextBackground#14710a20
  • diffEditor.removedTextBackground#cb3a2a50
  • dropdown.background#fffbeb
  • dropdown.border#f5f0da
  • dropdown.foreground#1f1f1f
  • editor.background#fffbeb
  • editor.findMatchBackground#a34d1480
  • editor.findMatchHighlightBackground#2c2b3140
  • editor.findRangeHighlightBackground#cfcfde75
  • editor.foldBackground#fdf8e2
  • editor.foreground#1f1f1f
  • editor.hoverHighlightBackground#f5f0da
  • editor.lineHighlightBorder#ceccc0
  • editor.rangeHighlightBackground#644ac915
  • editor.selectionBackground#ceccc0
  • editor.selectionHighlightBackground#ceccc0
  • editor.snippetFinalTabstopHighlightBackground#fffbeb
  • editor.snippetFinalTabstopHighlightBorder#14710a
  • editor.snippetTabstopHighlightBackground#fffbeb
  • editor.snippetTabstopHighlightBorder#6c664b
  • editor.wordHighlightBackground#036a9650
  • editor.wordHighlightStrongBackground#14710a50
  • editorCodeLens.foreground#6c664b
  • editorError.foreground#cb3a2a
  • editorGroup.border#644ac9
  • editorGroup.dropBackground#cfcfde70
  • editorGroupHeader.tabsBackground#f5f0da
  • editorGutter.addedBackground#14710a80
  • editorGutter.deletedBackground#cb3a2a80
  • editorGutter.modifiedBackground#036a9680
  • editorHoverWidget.background#fffbeb
  • editorHoverWidget.border#6c664b
  • editorIndentGuide.activeBackground#2c2b3145
  • editorIndentGuide.background#2c2b311A
  • editorLineNumber.foreground#6c664b
  • editorLink.activeForeground#036a96
  • editorMarkerNavigation.background#fdf8e2
  • editorOverviewRuler.addedForeground#14710a80
  • editorOverviewRuler.border#f5f0da
  • editorOverviewRuler.currentContentForeground#14710a
  • editorOverviewRuler.deletedForeground#cb3a2a80
  • editorOverviewRuler.errorForeground#cb3a2a80
  • editorOverviewRuler.incomingContentForeground#644ac9
  • editorOverviewRuler.infoForeground#036a9680
  • editorOverviewRuler.modifiedForeground#036a9680
  • editorOverviewRuler.selectionHighlightForeground#a34d14
  • editorOverviewRuler.warningForeground#a34d1480
  • editorOverviewRuler.wordHighlightForeground#036a96
  • editorOverviewRuler.wordHighlightStrongForeground#14710a
  • editorRuler.foreground#2c2b311A
  • editorSuggestWidget.background#fdf8e2
  • editorSuggestWidget.foreground#1f1f1f
  • editorSuggestWidget.selectedBackground#ceccc0
  • editorWarning.foreground#a34d14
  • editorWhitespace.foreground#2c2b311A
  • editorWidget.background#fdf8e2
  • errorForeground#cb3a2a
  • extensionButton.prominentBackground#14710a90
  • extensionButton.prominentForeground#1f1f1f
  • extensionButton.prominentHoverBackground#14710a60
  • focusBorder#6c664b
  • foreground#1f1f1f
  • gitDecoration.conflictingResourceForeground#a34d14
  • gitDecoration.deletedResourceForeground#cb3a2a
  • gitDecoration.ignoredResourceForeground#6c664b
  • gitDecoration.modifiedResourceForeground#036a96
  • gitDecoration.untrackedResourceForeground#14710a
  • input.background#fffbeb
  • input.border#f5f0da
  • input.foreground#1f1f1f
  • input.placeholderForeground#6c664b
  • inputOption.activeBorder#644ac9
  • inputValidation.errorBackground#fffbeb
  • inputValidation.errorBorder#cb3a2a
  • inputValidation.errorForeground#cb3a2a
  • inputValidation.infoBackground#fffbeb
  • inputValidation.infoBorder#644ac9
  • inputValidation.infoForeground#644ac9
  • inputValidation.warningBackground#fffbeb
  • inputValidation.warningBorder#a34d14
  • inputValidation.warningForeground#a34d14
  • list.activeSelectionBackground#ceccc0
  • list.activeSelectionForeground#1f1f1f
  • list.dropBackground#ceccc0
  • list.errorForeground#cb3a2a
  • list.focusBackground#cfcfde75
  • list.highlightForeground#036a96
  • list.hoverBackground#cfcfde75
  • list.inactiveSelectionBackground#cfcfde75
  • list.warningForeground#a34d14
  • listFilterWidget.background#fffbeb
  • listFilterWidget.noMatchesOutline#cb3a2a
  • listFilterWidget.outline#ceccc0
  • merge.currentHeaderBackground#14710a90
  • merge.incomingHeaderBackground#644ac990
  • notification.background#fffbeb
  • notification.buttonBackground#ceccc0
  • notification.buttonForeground#1f1f1f
  • notification.buttonHoverBackground#cfcfde75
  • notification.errorBackground#cb3a2a
  • notification.errorForeground#fffbeb
  • notification.foreground#1f1f1f
  • notification.infoBackground#644ac9
  • notification.infoForeground#fffbeb
  • notification.warningBackground#a34d14
  • notification.warningForeground#fffbeb
  • notificationCenter.border#fdf8e2
  • notificationCenterHeader.background#fffbeb
  • notificationCenterHeader.foreground#1f1f1f
  • notificationLink.foreground#036a96
  • notifications.background#fffbeb
  • notifications.border#fdf8e2
  • notifications.foreground#1f1f1f
  • notificationsErrorIcon.foreground#cb3a2a
  • notificationsInfoIcon.foreground#644ac9
  • notificationsWarningIcon.foreground#a34d14
  • notificationToast.border#fdf8e2
  • panel.background#fffbeb
  • panel.border#644ac9
  • panelInput.border#1f1f1f
  • panelTitle.activeBorder#a3144d
  • panelTitle.activeForeground#1f1f1f
  • panelTitle.inactiveForeground#6c664b
  • peekView.border#ceccc0
  • peekViewEditor.background#fffbeb
  • peekViewEditor.matchHighlightBackground#9e841a80
  • peekViewResult.background#fdf8e2
  • peekViewResult.fileForeground#1f1f1f
  • peekViewResult.lineForeground#1f1f1f
  • peekViewResult.matchHighlightBackground#9e841a80
  • peekViewResult.selectionBackground#ceccc0
  • peekViewResult.selectionForeground#1f1f1f
  • peekViewTitle.background#f5f0da
  • peekViewTitleDescription.foreground#6c664b
  • peekViewTitleLabel.foreground#1f1f1f
  • pickerGroup.border#644ac9
  • pickerGroup.foreground#036a96
  • progressBar.background#a3144d
  • scrollbar.shadow#444444
  • selection.background#644ac9
  • settings.checkboxBackground#fdf8e2
  • settings.checkboxBorder#f5f0da
  • settings.checkboxForeground#1f1f1f
  • settings.dropdownBackground#fdf8e2
  • settings.dropdownBorder#f5f0da
  • settings.dropdownForeground#1f1f1f
  • settings.headerForeground#1f1f1f
  • settings.modifiedItemIndicator#a34d14
  • settings.numberInputBackground#fdf8e2
  • settings.numberInputBorder#f5f0da
  • settings.numberInputForeground#1f1f1f
  • settings.textInputBackground#fdf8e2
  • settings.textInputBorder#f5f0da
  • settings.textInputForeground#1f1f1f
  • sideBar.background#fdf8e2
  • sideBarSectionHeader.background#fffbeb
  • sideBarSectionHeader.border#f5f0da
  • sideBarTitle.foreground#1f1f1f
  • statusBar.background#f5f0da
  • statusBar.debuggingBackground#cb3a2a
  • statusBar.debuggingForeground#f5f0da
  • statusBar.foreground#1f1f1f
  • statusBar.noFolderBackground#f5f0da
  • statusBar.noFolderForeground#1f1f1f
  • statusBarItem.prominentBackground#cb3a2a
  • statusBarItem.prominentHoverBackground#a34d14
  • statusBarItem.remoteBackground#644ac9
  • statusBarItem.remoteForeground#fffbeb
  • tab.activeBackground#fffbeb
  • tab.activeBorderTop#a3144d80
  • tab.activeForeground#1f1f1f
  • tab.border#f5f0da
  • tab.inactiveBackground#fdf8e2
  • tab.inactiveForeground#6c664b
  • terminal.ansiBlack#ceccc0
  • terminal.ansiBlue#644ac9
  • terminal.ansiBrightBlack#cfcfde
  • terminal.ansiBrightBlue#7862d0
  • terminal.ansiBrightCyan#047fb4
  • terminal.ansiBrightGreen#198d0c
  • terminal.ansiBrightMagenta#bf185a
  • terminal.ansiBrightRed#d74c3d
  • terminal.ansiBrightWhite#2c2b31
  • terminal.ansiBrightYellow#9e841a
  • terminal.ansiCyan#036a96
  • terminal.ansiGreen#14710a
  • terminal.ansiMagenta#a3144d
  • terminal.ansiRed#cb3a2a
  • terminal.ansiWhite#1f1f1f
  • terminal.ansiYellow#a34d14
  • terminal.background#fffbeb
  • terminal.border#1f1f1f
  • terminal.foreground#1f1f1f
  • terminal.selectionBackground#ceccc050
  • textBlockQuote.background#fdf8e2
  • titleBar.activeBackground#fdf8e2
  • titleBar.activeForeground#1f1f1f
  • titleBar.inactiveBackground#f5f0da
  • titleBar.inactiveForeground#6c664b
  • walkThrough.embeddedEditorBackground#fdf8e2
  • welcomePage.buttonBackground#ceccc0
  • welcomePage.buttonHoverBackground#cfcfde75
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#644ac9
source#1f1f1f
meta.diff, meta.diff.header#6c664b
markup.inserted#14710a
markup.deleted#cb3a2a
markup.changed#a34d14
invalid#cb3a2aunderline italic
invalid.deprecated#1f1f1funderline italic
entity.name.filename#9e841a
markup.error#cb3a2a
markup.underlineunderline
markup.bold#a34d14bold
markup.heading#644ac9bold
markup.italic#9e841aitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#036a96
markup.inline.raw, markup.raw.restructuredtext#14710a
markup.underline.link, markup.underline.link.image#036a96
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#a3144d
entity.name.directive.restructuredtext, markup.quote#9e841aitalic
meta.separator.markdown#6c664b
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#14710a
punctuation.definition.constant.restructuredtext#644ac9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#644ac9
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#1f1f1f
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#9e841a
entity.name.type.class, entity.name.class#036a96normal
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#644ac9italic
entity.other.inherited-class#036a96italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6c664b
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#a3144d
comment.block.documentation entity.name.type#036a96italic
comment.block.documentation entity.name.type punctuation.definition.bracket#036a96
comment.block.documentation variable#a34d14italic
constant, variable.other.constant#644ac9
constant.character.escape, constant.character.string.escape, constant.regexp#a3144d
entity.name.tag#a3144d
entity.other.attribute-name.parent-selector#a3144d
entity.other.attribute-name#14710aitalic
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#14710a
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#a34d14italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#14710aitalic
meta.decorator variable.other.object#14710a
keyword, punctuation.definition.keyword#a3144d
keyword.control.new, keyword.operator.newbold
meta.selector#a3144d
support#036a96italic
support.function.magic, support.variable, variable.other.predefined#644ac9regular
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#a3144d
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#1f1f1f
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#a3144d
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#036a96
constant.other.date, constant.other.timestamp#a34d14
variable.other.alias.yaml#14710aitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#a3144dregular
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#036a96italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#a34d14
storage.modifier#a3144d
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#9e841a
punctuation.definition.group.capture.regexp#a3144d
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#cb3a2a
punctuation.definition.character-class.regexp#036a96
punctuation.definition.group.regexp#a34d14
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#cb3a2a
meta.assertion.look-ahead.regexp#14710a
string#9e841a
punctuation.definition.string.begin, punctuation.definition.string.end#846e15
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#644ac9
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#6c664b
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#1f1f1f
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#a34d14italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#1f1f1fnormal
meta.selectionset.graphql variable#9e841a
meta.selectionset.graphql meta.arguments variable#1f1f1f
entity.name.fragment.graphql, variable.fragment.graphql#036a96
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#1f1f1f
source.shell variable.other#644ac9
support.constant#644ac9normal
meta.scope.prerequisites.makefile#9e841a
meta.attribute-selector.scss#9e841a
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#1f1f1f
meta.preprocessor.haskell#6c664b