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#7748B710
  • activityBar.activeBorder#D1336C80
  • activityBar.background#D0E8F0
  • activityBar.foreground#1A1A1A
  • activityBar.inactiveForeground#768696
  • activityBarBadge.background#D1336C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#768696
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#1A1A1A
  • breadcrumb.background#F7F7F7
  • breadcrumb.focusForeground#1A1A1A
  • breadcrumb.foreground#768696
  • breadcrumbPicker.background#FAFAFA
  • button.background#768696
  • button.foreground#FFFFFF
  • contrastBorder#FAFAFA
  • debugToolBar.background#E5EFF5
  • diffEditor.insertedTextBackground#00A36220
  • diffEditor.removedTextBackground#CF292950
  • dropdown.background#D0E8F0
  • dropdown.border#FAFAFA
  • dropdown.foreground#1A1A1A
  • editor.background#F7F7F7
  • editor.findMatchBackground#D97A0080
  • editor.findMatchHighlightBackground#00000040
  • editor.findRangeHighlightBackground#76869675
  • editor.foldBackground#E5EFF5
  • editor.foreground#1A1A1A
  • editor.hoverHighlightBackground#008C9950
  • editor.lineHighlightBorder#768696
  • editor.rangeHighlightBackground#7748B715
  • editor.selectionBackground#768696
  • editor.selectionHighlightBackground#CCCCCC
  • editor.snippetFinalTabstopHighlightBackground#F7F7F7
  • editor.snippetFinalTabstopHighlightBorder#00A362
  • editor.snippetTabstopHighlightBackground#F7F7F7
  • editor.snippetTabstopHighlightBorder#768696
  • editor.wordHighlightBackground#008C9950
  • editor.wordHighlightStrongBackground#00A36250
  • editorCodeLens.foreground#768696
  • editorError.foreground#CF2929
  • editorGroup.border#7748B7
  • editorGroup.dropBackground#76869670
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorGutter.addedBackground#00A36280
  • editorGutter.deletedBackground#CF292980
  • editorGutter.modifiedBackground#008C9980
  • editorHoverWidget.background#F7F7F7
  • editorHoverWidget.border#768696
  • editorIndentGuide.activeBackground#00000045
  • editorIndentGuide.background#0000001A
  • editorLineNumber.foreground#768696
  • editorLink.activeForeground#008C99
  • editorMarkerNavigation.background#E5EFF5
  • editorOverviewRuler.addedForeground#00A36280
  • editorOverviewRuler.border#FAFAFA
  • editorOverviewRuler.currentContentForeground#00A362
  • editorOverviewRuler.deletedForeground#CF292980
  • editorOverviewRuler.errorForeground#CF292980
  • editorOverviewRuler.incomingContentForeground#7748B7
  • editorOverviewRuler.infoForeground#008C9980
  • editorOverviewRuler.modifiedForeground#008C9980
  • editorOverviewRuler.selectionHighlightForeground#D97A00
  • editorOverviewRuler.warningForeground#D97A0080
  • editorOverviewRuler.wordHighlightForeground#008C99
  • editorOverviewRuler.wordHighlightStrongForeground#00A362
  • editorRuler.foreground#0000001A
  • editorSuggestWidget.background#E5EFF5
  • editorSuggestWidget.foreground#1A1A1A
  • editorSuggestWidget.selectedBackground#768696
  • editorWarning.foreground#008C99
  • editorWhitespace.foreground#0000001A
  • editorWidget.background#E5EFF5
  • errorForeground#CF2929
  • extensionButton.prominentBackground#00A36290
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#00A36260
  • focusBorder#768696
  • foreground#1A1A1A
  • gitDecoration.conflictingResourceForeground#D97A00
  • gitDecoration.deletedResourceForeground#CF2929
  • gitDecoration.ignoredResourceForeground#768696
  • gitDecoration.modifiedResourceForeground#008C99
  • gitDecoration.untrackedResourceForeground#00A362
  • input.background#F7F7F7
  • input.border#FAFAFA
  • input.foreground#1A1A1A
  • input.placeholderForeground#768696
  • inputOption.activeBorder#7748B7
  • inputValidation.errorBorder#CF2929
  • inputValidation.infoBorder#D1336C
  • inputValidation.warningBorder#D97A00
  • list.activeSelectionBackground#768696
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#768696
  • list.errorForeground#CF2929
  • list.focusBackground#76869675
  • list.highlightForeground#008C99
  • list.hoverBackground#76869675
  • list.inactiveSelectionBackground#76869675
  • list.warningForeground#D97A00
  • listFilterWidget.background#D0E8F0
  • listFilterWidget.noMatchesOutline#CF2929
  • listFilterWidget.outline#CCCCCC
  • merge.currentHeaderBackground#00A36290
  • merge.incomingHeaderBackground#7748B790
  • notification.background#F7F7F7
  • notification.buttonBackground#768696
  • notification.buttonForeground#FFFFFF
  • notification.buttonHoverBackground#76869675
  • notification.errorBackground#CF2929
  • notification.errorForeground#FFFFFF
  • notification.foreground#1A1A1A
  • notification.infoBackground#008C99
  • notification.infoForeground#FFFFFF
  • notification.warningBackground#D97A00
  • notification.warningForeground#FFFFFF
  • panel.background#F7F7F7
  • panel.border#7748B7
  • panelTitle.activeBorder#D1336C
  • panelTitle.activeForeground#1A1A1A
  • panelTitle.inactiveForeground#768696
  • peekView.border#768696
  • peekViewEditor.background#F7F7F7
  • peekViewEditor.matchHighlightBackground#B58A0080
  • peekViewResult.background#E5EFF5
  • peekViewResult.fileForeground#1A1A1A
  • peekViewResult.lineForeground#1A1A1A
  • peekViewResult.matchHighlightBackground#B58A0080
  • peekViewResult.selectionBackground#768696
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#FAFAFA
  • peekViewTitleDescription.foreground#768696
  • peekViewTitleLabel.foreground#1A1A1A
  • pickerGroup.border#7748B7
  • pickerGroup.foreground#008C99
  • progressBar.background#D1336C
  • selection.background#D0E8F0
  • settings.checkboxBackground#E5EFF5
  • settings.checkboxBorder#FAFAFA
  • settings.checkboxForeground#1A1A1A
  • settings.dropdownBackground#E5EFF5
  • settings.dropdownBorder#FAFAFA
  • settings.dropdownForeground#1A1A1A
  • settings.headerForeground#1A1A1A
  • settings.modifiedItemForeground#D97A00
  • settings.modifiedItemIndicator#D97A00
  • settings.numberInputBackground#E5EFF5
  • settings.numberInputBorder#FAFAFA
  • settings.numberInputForeground#1A1A1A
  • settings.textInputBackground#E5EFF5
  • settings.textInputBorder#FAFAFA
  • settings.textInputForeground#1A1A1A
  • sideBar.background#E5EFF5
  • sideBarSectionHeader.background#F7F7F7
  • sideBarSectionHeader.border#FAFAFA
  • sideBarTitle.foreground#1A1A1A
  • statusBar.background#FAFAFA
  • statusBar.debuggingBackground#CF2929
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#1A1A1A
  • statusBar.noFolderBackground#FAFAFA
  • statusBar.noFolderForeground#1A1A1A
  • statusBarItem.prominentBackground#CF2929
  • statusBarItem.prominentHoverBackground#D97A00
  • statusBarItem.remoteBackground#00B46E
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F7F7F7
  • tab.activeBorderTop#D1336C80
  • tab.activeForeground#1A1A1A
  • tab.border#FAFAFA
  • tab.inactiveBackground#E5EFF5
  • tab.inactiveForeground#768696
  • terminal.ansiBlack#F0F0F0
  • terminal.ansiBlue#7748B7
  • terminal.ansiBrightBlack#768696
  • terminal.ansiBrightBlue#9B75D7
  • terminal.ansiBrightCyan#1CADB7
  • terminal.ansiBrightGreen#00B974
  • terminal.ansiBrightMagenta#E55A87
  • terminal.ansiBrightRed#E74E4E
  • terminal.ansiBrightWhite#333333
  • terminal.ansiBrightYellow#D6A81F
  • terminal.ansiCyan#008C99
  • terminal.ansiGreen#00A362
  • terminal.ansiMagenta#D1336C
  • terminal.ansiRed#CF2929
  • terminal.ansiWhite#1A1A1A
  • terminal.ansiYellow#B58A00
  • terminal.background#F7F7F7
  • terminal.foreground#1A1A1A
  • titleBar.activeBackground#E5EFF5
  • titleBar.activeForeground#1A1A1A
  • titleBar.inactiveBackground#FAFAFA
  • titleBar.inactiveForeground#768696
  • walkThrough.embeddedEditorBackground#E5EFF5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#7748B7—
source#1A1A1A—
meta.diff, meta.diff.header#768696—
markup.inserted#00A362—
markup.deleted#CF2929—
markup.changed#D97A00—
invalid#CF2929underline italic
invalid.deprecated#1A1A1Aunderline italic
entity.name.filename#B58A00—
markup.error#CF2929—
markup.underline—underline
markup.bold#D97A00bold
markup.heading#7748B7bold
markup.italic#B58A00italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#008C99—
markup.inline.raw, markup.raw.restructuredtext#00A362—
markup.underline.link, markup.underline.link.image#008C99—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#D1336C—
entity.name.directive.restructuredtext, markup.quote#B58A00italic
meta.separator.markdown#768696—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#00A362—
punctuation.definition.constant.restructuredtext#7748B7—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#7748B7—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#1A1A1A—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#B58A00—
entity.name.type.class, entity.name.class#008C99normal
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#7748B7italic
entity.other.inherited-class#008C99italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#768696—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#D1336C—
comment.block.documentation entity.name.type#008C99italic
comment.block.documentation entity.name.type punctuation.definition.bracket#008C99—
comment.block.documentation variable#D97A00italic
constant, variable.other.constant#7748B7—
constant.character.escape, constant.character.string.escape, constant.regexp#D1336C—
entity.name.tag#D1336C—
entity.other.attribute-name.parent-selector#D1336C—
entity.other.attribute-name#00A362italic
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#00A362—
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#D97A00italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#00A362italic
meta.decorator variable.other.object#00A362—
keyword, punctuation.definition.keyword#D1336C—
keyword.control.new, keyword.operator.new—bold
meta.selector#D1336C—
support#008C99italic
support.function.magic, support.variable, variable.other.predefined#7748B7regular
support.function, support.type.property-name—regular
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#D1336C—
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#1A1A1A—
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#D1336C—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#008C99—
constant.other.date, constant.other.timestamp#D97A00—
variable.other.alias.yaml#00A362italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#D1336Cregular
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#008C99italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#D97A00—
storage.modifier#D1336C—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#B58A00—
punctuation.definition.group.capture.regexp#D1336C—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#CF2929—
punctuation.definition.character-class.regexp#008C99—
punctuation.definition.group.regexp#D97A00—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#CF2929—
meta.assertion.look-ahead.regexp#00A362—
string#B58A00—
punctuation.definition.string.begin, punctuation.definition.string.end#B58A00—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#008C99—
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#768696—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#1A1A1A—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#D97A00italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#1A1A1Anormal
meta.selectionset.graphql variable#B58A00—
meta.selectionset.graphql meta.arguments variable#1A1A1A—
entity.name.fragment.graphql, variable.fragment.graphql#008C99—
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#1A1A1A—
source.shell variable.other#7748B7—
support.constant#7748B7normal
meta.scope.prerequisites.makefile#B58A00—
meta.attribute-selector.scss#B58A00—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#1A1A1A—
meta.preprocessor.haskell#768696—