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#E5989B10
  • activityBar.activeBorder#BE95C480
  • activityBar.background#3d3d3d
  • activityBar.foreground#d9dbdf
  • activityBar.inactiveForeground#7b828a
  • activityBarBadge.background#b2a5b3
  • activityBarBadge.foreground#d9dbdf
  • badge.background#4e4e4e
  • badge.foreground#d9dbdf
  • breadcrumb.activeSelectionForeground#d9dbdf
  • breadcrumb.background#2f2f2f
  • breadcrumb.focusForeground#d9dbdf
  • breadcrumb.foreground#7b828a
  • breadcrumbPicker.background#2f2f2f
  • button.background#4e4e4e
  • button.foreground#d9dbdf
  • button.secondaryBackground#2f2f2f
  • button.secondaryForeground#d9dbdf
  • button.secondaryHoverBackground#3d3d3d
  • debugToolBar.background#262626
  • diffEditor.insertedTextBackground#E1C34020
  • diffEditor.removedTextBackground#BC474950
  • dropdown.background#3d3d3d
  • dropdown.border#2f2f2f
  • dropdown.foreground#d9dbdf
  • editor.background#2f2f2f
  • editor.findMatchBackground#FFD6A580
  • editor.findMatchHighlightBackground#F5F3EF40
  • editor.findRangeHighlightBackground#4f4f4f
  • editor.foldBackground#21222C80
  • editor.foreground#d9dbdf
  • editor.hoverHighlightBackground#A9DEF950
  • editor.lineHighlightBorder#4e4e4e
  • editor.rangeHighlightBackground#E5989B15
  • editor.selectionBackground#4e4e4e
  • editor.selectionHighlightBackground#494949
  • editor.snippetFinalTabstopHighlightBackground#2f2f2f
  • editor.snippetFinalTabstopHighlightBorder#cbb556
  • editor.snippetTabstopHighlightBackground#2f2f2f
  • editor.snippetTabstopHighlightBorder#7b828a
  • editor.wordHighlightBackground#A9DEF950
  • editor.wordHighlightStrongBackground#E1C34050
  • editorBracketHighlight.foreground1#d9dbdf
  • editorBracketHighlight.foreground2#b2a5b3
  • editorBracketHighlight.foreground3#b2dbf0
  • editorBracketHighlight.foreground4#cbb556
  • editorBracketHighlight.foreground5#d8a5a7
  • editorBracketHighlight.foreground6#f6d5ae
  • editorBracketHighlight.unexpectedBracket.foreground#a36061
  • editorCodeLens.foreground#7b828a
  • editorError.foreground#a36061
  • editorGroup.border#d8a5a7
  • editorGroup.dropBackground#4f4f4f
  • editorGroupHeader.tabsBackground#2f2f2f
  • editorGutter.addedBackground#E1C34080
  • editorGutter.deletedBackground#BC474980
  • editorGutter.modifiedBackground#A9DEF980
  • editorHoverWidget.background#2f2f2f
  • editorHoverWidget.border#7b828a
  • editorIndentGuide.activeBackground#272D3845
  • editorIndentGuide.background#f2f2f2
  • editorLineNumber.foreground#7b828a
  • editorLink.activeForeground#b2dbf0
  • editorMarkerNavigation.background#262626
  • editorOverviewRuler.addedForeground#E1C34080
  • editorOverviewRuler.border#2f2f2f
  • editorOverviewRuler.currentContentForeground#cbb556
  • editorOverviewRuler.deletedForeground#BC474980
  • editorOverviewRuler.errorForeground#BC474980
  • editorOverviewRuler.incomingContentForeground#d8a5a7
  • editorOverviewRuler.infoForeground#A9DEF980
  • editorOverviewRuler.modifiedForeground#A9DEF980
  • editorOverviewRuler.selectionHighlightForeground#f6d5ae
  • editorOverviewRuler.warningForeground#FFD6A580
  • editorOverviewRuler.wordHighlightForeground#b2dbf0
  • editorOverviewRuler.wordHighlightStrongForeground#cbb556
  • editorRuler.foreground#f2f2f2
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.foreground#d9dbdf
  • editorSuggestWidget.selectedBackground#4e4e4e
  • editorWarning.foreground#b2dbf0
  • editorWhitespace.foreground#f2f2f2
  • editorWidget.background#262626
  • errorForeground#a36061
  • extensionButton.prominentBackground#E1C34090
  • extensionButton.prominentForeground#d9dbdf
  • extensionButton.prominentHoverBackground#E1C34060
  • focusBorder#7b828a
  • foreground#d9dbdf
  • gitDecoration.conflictingResourceForeground#f6d5ae
  • gitDecoration.deletedResourceForeground#a36061
  • gitDecoration.ignoredResourceForeground#7b828a
  • gitDecoration.modifiedResourceForeground#b2dbf0
  • gitDecoration.untrackedResourceForeground#cbb556
  • input.background#2f2f2f
  • input.border#2f2f2f
  • input.foreground#d9dbdf
  • input.placeholderForeground#7b828a
  • inputOption.activeBorder#d8a5a7
  • inputValidation.errorBorder#a36061
  • inputValidation.infoBorder#b2a5b3
  • inputValidation.warningBorder#f6d5ae
  • list.activeSelectionBackground#d9dbdf
  • list.activeSelectionForeground#2f2f2f
  • list.dropBackground#4e4e4e
  • list.errorForeground#a36061
  • list.focusBackground#4f4f4f
  • list.highlightForeground#b2dbf0
  • list.hoverBackground#4f4f4f
  • list.inactiveSelectionBackground#4f4f4f
  • list.warningForeground#f6d5ae
  • listFilterWidget.background#3d3d3d
  • listFilterWidget.noMatchesOutline#a36061
  • listFilterWidget.outline#494949
  • merge.currentHeaderBackground#E1C34090
  • merge.incomingHeaderBackground#E5989B90
  • panel.background#2f2f2f
  • panel.border#d8a5a7
  • panelTitle.activeBorder#b2a5b3
  • panelTitle.activeForeground#d9dbdf
  • panelTitle.inactiveForeground#7b828a
  • peekView.border#4e4e4e
  • peekViewEditor.background#2f2f2f
  • peekViewEditor.matchHighlightBackground#8CB36980
  • peekViewResult.background#262626
  • peekViewResult.fileForeground#d9dbdf
  • peekViewResult.lineForeground#d9dbdf
  • peekViewResult.matchHighlightBackground#8CB36980
  • peekViewResult.selectionBackground#4e4e4e
  • peekViewResult.selectionForeground#d9dbdf
  • peekViewTitle.background#2f2f2f
  • peekViewTitleDescription.foreground#7b828a
  • peekViewTitleLabel.foreground#d9dbdf
  • pickerGroup.border#d8a5a7
  • pickerGroup.foreground#b2dbf0
  • progressBar.background#b2a5b3
  • selection.background#d8a5a7
  • settings.checkboxBackground#262626
  • settings.checkboxBorder#2f2f2f
  • settings.checkboxForeground#d9dbdf
  • settings.dropdownBackground#262626
  • settings.dropdownBorder#2f2f2f
  • settings.dropdownForeground#d9dbdf
  • settings.headerForeground#d9dbdf
  • settings.modifiedItemIndicator#f6d5ae
  • settings.numberInputBackground#262626
  • settings.numberInputBorder#2f2f2f
  • settings.numberInputForeground#d9dbdf
  • settings.textInputBackground#262626
  • settings.textInputBorder#2f2f2f
  • settings.textInputForeground#d9dbdf
  • sideBar.background#262626
  • sideBarSectionHeader.background#2f2f2f
  • sideBarSectionHeader.border#2f2f2f
  • sideBarTitle.foreground#d9dbdf
  • statusBar.background#2f2f2f
  • statusBar.debuggingBackground#a36061
  • statusBar.debuggingForeground#2f2f2f
  • statusBar.foreground#d9dbdf
  • statusBar.noFolderBackground#2f2f2f
  • statusBar.noFolderForeground#d9dbdf
  • statusBarItem.prominentBackground#a36061
  • statusBarItem.prominentHoverBackground#f6d5ae
  • statusBarItem.remoteBackground#d8a5a7
  • statusBarItem.remoteForeground#2f2f2f
  • tab.activeBackground#2f2f2f
  • tab.activeBorderTop#BE95C480
  • tab.activeForeground#d9dbdf
  • tab.border#2f2f2f
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#7b828a
  • terminal.ansiBlack#272727
  • terminal.ansiBlue#8ac6d4
  • terminal.ansiBrightBlack#6e7479
  • terminal.ansiBrightBlue#18b3d6
  • terminal.ansiBrightCyan#d98218
  • terminal.ansiBrightGreen#17b384
  • terminal.ansiBrightMagenta#b41c84
  • terminal.ansiBrightRed#e6191d
  • terminal.ansiBrightWhite#fcfcfc
  • terminal.ansiBrightYellow#e8d52e
  • terminal.ansiCyan#bc956c
  • terminal.ansiGreen#829787
  • terminal.ansiMagenta#a97b9a
  • terminal.ansiRed#bf5d5f
  • terminal.ansiWhite#e6e6e2
  • terminal.ansiYellow#d1d16e
  • terminal.background#2f2f2f
  • terminal.foreground#d9dbdf
  • titleBar.activeBackground#262626
  • titleBar.activeForeground#d9dbdf
  • titleBar.inactiveBackground#2f2f2f
  • titleBar.inactiveForeground#7b828a
  • walkThrough.embeddedEditorBackground#262626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#d8a5a7
meta.diff, meta.diff.header#7b828a
markup.inserted#cbb556
markup.deleted#a36061
markup.changed#f6d5ae
invalid#a36061underline italic
invalid.deprecated#d9dbdfunderline italic
entity.name.filename#8d9c80
markup.error#a36061
markup.underlineunderline
markup.bold#f6d5aebold
markup.heading#d8a5a7bold
markup.italic#8d9c80italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#b2dbf0
markup.inline.raw, markup.raw.restructuredtext#cbb556
markup.underline.link, markup.underline.link.image#b2dbf0
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#b2a5b3
entity.name.directive.restructuredtext, markup.quote#8d9c80italic
meta.separator.markdown#7b828a
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#cbb556
punctuation.definition.constant.restructuredtext#d8a5a7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#d8a5a7
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#d9dbdf
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#8d9c80
entity.name.type.class, entity.name.class#b2dbf0normal
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#d8a5a7italic
entity.other.inherited-class#b2dbf0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7b828a
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#b2a5b3
comment.block.documentation entity.name.type#b2dbf0italic
comment.block.documentation entity.name.type punctuation.definition.bracket#b2dbf0
comment.block.documentation variable#f6d5aeitalic
constant, variable.other.constant#d8a5a7
constant.character.escape, constant.character.string.escape, constant.regexp#b2a5b3
entity.name.tag#b2a5b3
entity.other.attribute-name.parent-selector#b2a5b3
entity.other.attribute-name#cbb556italic
entity.name.function, 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#cbb556
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#f6d5aeitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#cbb556italic
meta.decorator variable.other.object#cbb556
keyword, punctuation.definition.keyword#b2a5b3
keyword.control.new, keyword.operator.newbold
meta.selector#b2a5b3
support#b2dbf0italic
support.function.magic, support.variable, variable.other.predefined#d8a5a7regular
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#b2a5b3
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, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#d9dbdf
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#b2a5b3
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#b2dbf0
constant.other.date, constant.other.timestamp#f6d5ae
variable.other.alias.yaml#cbb556italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#b2a5b3regular
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#b2dbf0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#f6d5ae
storage.modifier#b2a5b3
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#8d9c80
punctuation.definition.group.capture.regexp#b2a5b3
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#a36061
punctuation.definition.character-class.regexp#b2dbf0
punctuation.definition.group.regexp#f6d5ae
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#a36061
meta.assertion.look-ahead.regexp#cbb556
string#8d9c80
punctuation.definition.string.begin, punctuation.definition.string.end#c9d081
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#a0d4df
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#7b828a
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#d9dbdf
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#f6d5aeitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#d9dbdfnormal
meta.selectionset.graphql variable#8d9c80
meta.selectionset.graphql meta.arguments variable#d9dbdf
entity.name.fragment.graphql, variable.fragment.graphql#b2dbf0
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#d9dbdf
source.shell variable.other#d8a5a7
support.constant#d8a5a7normal
meta.scope.prerequisites.makefile#8d9c80
meta.attribute-selector.scss#8d9c80
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#d9dbdf
meta.preprocessor.haskell#7b828a
log.error#a36061bold
log.warning#8d9c80bold