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#205ea610
  • activityBar.activeBorder#5e409d80
  • activityBar.background#fffcf0
  • activityBar.foreground#403e3c
  • activityBar.inactiveForeground#cecdc3
  • activityBarBadge.background#5e409d
  • activityBarBadge.foreground#fffcf0
  • badge.background#f2f0e5
  • badge.foreground#403e3c
  • breadcrumb.activeSelectionForeground#403e3c
  • breadcrumb.background#fffcf0
  • breadcrumb.focusForeground#403e3c
  • breadcrumb.foreground#cecdc3
  • breadcrumbPicker.background#ffffff
  • button.background#f2f0e5
  • button.foreground#403e3c
  • checkbox.background#f2f0e5
  • checkbox.border#ffffff
  • checkbox.foreground#403e3c
  • contrastBorder#ffffff
  • debugToolBar.background#f2f0e5
  • diffEditor.insertedTextBackground#66800b20
  • diffEditor.removedTextBackground#af302950
  • dropdown.background#fffcf0
  • dropdown.border#ffffff
  • dropdown.foreground#403e3c
  • editor.background#fffcf0
  • editor.findMatchBackground#bc521580
  • editor.findMatchHighlightBackground#100f0f40
  • editor.findRangeHighlightBackground#e6e4d975
  • editor.foldBackground#f2f0e5
  • editor.foreground#403e3c
  • editor.hoverHighlightBackground#ffffff
  • editor.lineHighlightBorder#f2f0e5
  • editor.rangeHighlightBackground#205ea615
  • editor.selectionBackground#f2f0e5
  • editor.selectionHighlightBackground#f2f0e5
  • editor.snippetFinalTabstopHighlightBackground#fffcf0
  • editor.snippetFinalTabstopHighlightBorder#66800b
  • editor.snippetTabstopHighlightBackground#fffcf0
  • editor.snippetTabstopHighlightBorder#cecdc3
  • editor.wordHighlightBackground#24837b50
  • editor.wordHighlightStrongBackground#66800b50
  • editorCodeLens.foreground#cecdc3
  • editorError.foreground#af3029
  • editorGroup.border#205ea6
  • editorGroup.dropBackground#e6e4d970
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#66800b80
  • editorGutter.deletedBackground#af302980
  • editorGutter.modifiedBackground#24837b80
  • editorHoverWidget.background#fffcf0
  • editorHoverWidget.border#cecdc3
  • editorIndentGuide.activeBackground#100f0f45
  • editorIndentGuide.background#100f0f1A
  • editorLineNumber.foreground#cecdc3
  • editorLink.activeForeground#24837b
  • editorMarkerNavigation.background#f2f0e5
  • editorOverviewRuler.addedForeground#66800b80
  • editorOverviewRuler.border#ffffff
  • editorOverviewRuler.currentContentForeground#66800b
  • editorOverviewRuler.deletedForeground#af302980
  • editorOverviewRuler.errorForeground#af302980
  • editorOverviewRuler.incomingContentForeground#205ea6
  • editorOverviewRuler.infoForeground#24837b80
  • editorOverviewRuler.modifiedForeground#24837b80
  • editorOverviewRuler.selectionHighlightForeground#bc5215
  • editorOverviewRuler.warningForeground#bc521580
  • editorOverviewRuler.wordHighlightForeground#24837b
  • editorOverviewRuler.wordHighlightStrongForeground#66800b
  • editorRuler.foreground#100f0f1A
  • editorSuggestWidget.background#f2f0e5
  • editorSuggestWidget.foreground#403e3c
  • editorSuggestWidget.selectedBackground#f2f0e5
  • editorWarning.foreground#bc5215
  • editorWhitespace.foreground#100f0f1A
  • editorWidget.background#f2f0e5
  • errorForeground#af3029
  • extensionButton.prominentBackground#66800b90
  • extensionButton.prominentForeground#403e3c
  • extensionButton.prominentHoverBackground#66800b60
  • focusBorder#cecdc3
  • foreground#403e3c
  • gitDecoration.conflictingResourceForeground#bc5215
  • gitDecoration.deletedResourceForeground#af3029
  • gitDecoration.ignoredResourceForeground#cecdc3
  • gitDecoration.modifiedResourceForeground#24837b
  • gitDecoration.untrackedResourceForeground#66800b
  • input.background#fffcf0
  • input.border#ffffff
  • input.foreground#403e3c
  • input.placeholderForeground#cecdc3
  • inputOption.activeBorder#205ea6
  • inputValidation.errorBackground#fffcf0
  • inputValidation.errorBorder#af3029
  • inputValidation.errorForeground#af3029
  • inputValidation.infoBackground#fffcf0
  • inputValidation.infoBorder#205ea6
  • inputValidation.infoForeground#205ea6
  • inputValidation.warningBackground#fffcf0
  • inputValidation.warningBorder#bc5215
  • inputValidation.warningForeground#bc5215
  • list.activeSelectionBackground#f2f0e5
  • list.activeSelectionForeground#403e3c
  • list.dropBackground#f2f0e5
  • list.errorForeground#af3029
  • list.focusBackground#e6e4d975
  • list.highlightForeground#24837b
  • list.hoverBackground#e6e4d975
  • list.inactiveSelectionBackground#e6e4d975
  • list.warningForeground#bc5215
  • listFilterWidget.background#fffcf0
  • listFilterWidget.noMatchesOutline#af3029
  • listFilterWidget.outline#f2f0e5
  • merge.currentHeaderBackground#66800b90
  • merge.incomingHeaderBackground#205ea690
  • notification.background#fffcf0
  • notification.buttonBackground#f2f0e5
  • notification.buttonForeground#403e3c
  • notification.buttonHoverBackground#e6e4d975
  • notification.errorBackground#af3029
  • notification.errorForeground#fffcf0
  • notification.foreground#403e3c
  • notification.infoBackground#205ea6
  • notification.infoForeground#fffcf0
  • notification.warningBackground#bc5215
  • notification.warningForeground#fffcf0
  • notificationCenter.border#f2f0e5
  • notificationCenterHeader.background#fffcf0
  • notificationCenterHeader.foreground#403e3c
  • notificationLink.foreground#24837b
  • notifications.background#fffcf0
  • notifications.border#f2f0e5
  • notifications.foreground#403e3c
  • notificationsErrorIcon.foreground#af3029
  • notificationsInfoIcon.foreground#205ea6
  • notificationsWarningIcon.foreground#bc5215
  • notificationToast.border#f2f0e5
  • panel.background#fffcf0
  • panel.border#205ea6
  • panelInput.border#403e3c
  • panelTitle.activeBorder#5e409d
  • panelTitle.activeForeground#403e3c
  • panelTitle.inactiveForeground#cecdc3
  • peekView.border#f2f0e5
  • peekViewEditor.background#fffcf0
  • peekViewEditor.matchHighlightBackground#da702c80
  • peekViewResult.background#f2f0e5
  • peekViewResult.fileForeground#403e3c
  • peekViewResult.lineForeground#403e3c
  • peekViewResult.matchHighlightBackground#da702c80
  • peekViewResult.selectionBackground#f2f0e5
  • peekViewResult.selectionForeground#403e3c
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#cecdc3
  • peekViewTitleLabel.foreground#403e3c
  • pickerGroup.border#205ea6
  • pickerGroup.foreground#24837b
  • progressBar.background#5e409d
  • scrollbar.shadow#444444
  • selection.background#205ea6
  • settings.checkboxBackground#f2f0e5
  • settings.checkboxBorder#ffffff
  • settings.checkboxForeground#403e3c
  • settings.dropdownBackground#f2f0e5
  • settings.dropdownBorder#ffffff
  • settings.dropdownForeground#403e3c
  • settings.headerForeground#403e3c
  • settings.modifiedItemIndicator#bc5215
  • settings.numberInputBackground#f2f0e5
  • settings.numberInputBorder#ffffff
  • settings.numberInputForeground#403e3c
  • settings.textInputBackground#f2f0e5
  • settings.textInputBorder#ffffff
  • settings.textInputForeground#403e3c
  • sideBar.background#f2f0e5
  • sideBarSectionHeader.background#fffcf0
  • sideBarSectionHeader.border#ffffff
  • sideBarTitle.foreground#403e3c
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#af3029
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#403e3c
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#403e3c
  • statusBarItem.prominentBackground#af3029
  • statusBarItem.prominentHoverBackground#bc5215
  • statusBarItem.remoteBackground#205ea6
  • statusBarItem.remoteForeground#fffcf0
  • tab.activeBackground#fffcf0
  • tab.activeBorderTop#5e409d80
  • tab.activeForeground#403e3c
  • tab.border#ffffff
  • tab.inactiveBackground#f2f0e5
  • tab.inactiveForeground#cecdc3
  • terminal.ansiBlack#f2f0e5
  • terminal.ansiBlue#205ea6
  • terminal.ansiBrightBlack#e6e4d9
  • terminal.ansiBrightBlue#3aa99f
  • terminal.ansiBrightCyan#879a39
  • terminal.ansiBrightGreen#d0a215
  • terminal.ansiBrightMagenta#4385be
  • terminal.ansiBrightRed#d14d41
  • terminal.ansiBrightWhite#100f0f
  • terminal.ansiBrightYellow#da702c
  • terminal.ansiCyan#24837b
  • terminal.ansiGreen#66800b
  • terminal.ansiMagenta#5e409d
  • terminal.ansiRed#af3029
  • terminal.ansiWhite#282726
  • terminal.ansiYellow#bc5215
  • terminal.background#fffcf0
  • terminal.border#403e3c
  • terminal.foreground#403e3c
  • terminal.selectionBackground#f2f0e550
  • textBlockQuote.background#f2f0e5
  • titleBar.activeBackground#f2f0e5
  • titleBar.activeForeground#403e3c
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#cecdc3
  • walkThrough.embeddedEditorBackground#f2f0e5
  • welcomePage.buttonBackground#f2f0e5
  • welcomePage.buttonHoverBackground#e6e4d975
  • widget.shadow#444444

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#205ea6
source#403e3c
meta.diff, meta.diff.header#cecdc3
markup.inserted#66800b
markup.deleted#af3029
markup.changed#bc5215
invalid#af3029underline italic
invalid.deprecated#403e3cunderline italic
entity.name.filename#da702c
markup.error#af3029
markup.underlineunderline
markup.bold#bc5215bold
markup.heading#205ea6bold
markup.italic#da702citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#24837b
markup.inline.raw, markup.raw.restructuredtext#66800b
markup.underline.link, markup.underline.link.image#24837b
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#5e409d
entity.name.directive.restructuredtext, markup.quote#da702citalic
meta.separator.markdown#cecdc3
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#66800b
punctuation.definition.constant.restructuredtext#205ea6
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#205ea6
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#403e3c
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#da702c
entity.name.type.class, entity.name.class#24837bnormal
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#205ea6italic
entity.other.inherited-class#24837bitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#cecdc3
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#5e409d
comment.block.documentation entity.name.type#24837bitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#24837b
comment.block.documentation variable#bc5215italic
constant, variable.other.constant#205ea6
constant.character.escape, constant.character.string.escape, constant.regexp#5e409d
entity.name.tag#5e409d
entity.other.attribute-name.parent-selector#5e409d
entity.other.attribute-name#66800bitalic
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#66800b
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#bc5215italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#66800bitalic
meta.decorator variable.other.object#66800b
keyword, punctuation.definition.keyword#5e409d
keyword.control.new, keyword.operator.newbold
meta.selector#5e409d
support#24837bitalic
support.function.magic, support.variable, variable.other.predefined#205ea6regular
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#5e409d
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#403e3c
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#5e409d
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#24837b
constant.other.date, constant.other.timestamp#bc5215
variable.other.alias.yaml#66800bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#5e409dregular
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#24837bitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#bc5215
storage.modifier#5e409d
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#da702c
punctuation.definition.group.capture.regexp#5e409d
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#af3029
punctuation.definition.character-class.regexp#24837b
punctuation.definition.group.regexp#bc5215
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#af3029
meta.assertion.look-ahead.regexp#66800b
string#da702c
punctuation.definition.string.begin, punctuation.definition.string.end#ad8301
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#205ea6
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#cecdc3
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#403e3c
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#bc5215italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#403e3cnormal
meta.selectionset.graphql variable#da702c
meta.selectionset.graphql meta.arguments variable#403e3c
entity.name.fragment.graphql, variable.fragment.graphql#24837b
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#403e3c
source.shell variable.other#205ea6
support.constant#205ea6normal
meta.scope.prerequisites.makefile#da702c
meta.attribute-selector.scss#da702c
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#403e3c
meta.preprocessor.haskell#cecdc3