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
emphasisitalic
strongbold
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.underlineunderline
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.newbold
meta.selector#D1336C
support#008C99italic
support.function.magic, support.variable, variable.other.predefined#7748B7regular
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#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