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#D4D0EA66
  • activityBar.activeBorder#9B59B6cc
  • activityBar.background#EAE8F3
  • activityBar.foreground#2E2D3A
  • activityBar.inactiveForeground#7E7899
  • activityBarBadge.background#9B59B6
  • activityBarBadge.foreground#F2F1F8
  • badge.background#D4D0EA
  • badge.foreground#2E2D3A
  • breadcrumb.activeSelectionForeground#2E2D3A
  • breadcrumb.background#F2F1F8
  • breadcrumb.focusForeground#2E2D3A
  • breadcrumb.foreground#7E7899
  • breadcrumbPicker.background#D8D5E6
  • button.background#D4D0EA
  • button.foreground#2E2D3A
  • contrastBorder#D8D5E6
  • debugToolBar.background#E2E0ED
  • diffEditor.insertedTextBackground#3D9A6E33
  • diffEditor.removedTextBackground#C04A5A80
  • dropdown.background#EAE8F3
  • dropdown.border#D8D5E6
  • dropdown.foreground#2E2D3A
  • editor.background#F2F1F8
  • editor.findMatchBackground#C07840cc
  • editor.findMatchHighlightBackground#2E2D3A66
  • editor.findRangeHighlightBackground#E8E6F2
  • editor.foldBackground#E2E0ED
  • editor.foreground#2E2D3A
  • editor.hoverHighlightBackground#D8D5E6
  • editor.inactiveSelectionBackground#D4D0EA59
  • editor.lineHighlightBackground#E8E6F2
  • editor.lineHighlightBorder#F2F1F8
  • editor.rangeHighlightBackground#6B5BD426
  • editor.selectionBackground#D4D0EA
  • editor.selectionHighlightBackground#F7F6FB
  • editor.snippetFinalTabstopHighlightBackground#F2F1F8
  • editor.snippetFinalTabstopHighlightBorder#3D9A6E
  • editor.snippetTabstopHighlightBackground#F2F1F8
  • editor.snippetTabstopHighlightBorder#7E7899
  • editor.wordHighlightBackground#2D9CDB80
  • editor.wordHighlightStrongBackground#3D9A6E80
  • editorBracketHighlight.foreground1#9B59B6
  • editorBracketHighlight.foreground2#2D9CDB
  • editorBracketHighlight.foreground3#3D9A6E
  • editorBracketHighlight.foreground4#9A8A2E
  • editorBracketHighlight.foreground5#C07840
  • editorBracketHighlight.foreground6#6B5BD4
  • editorBracketHighlight.unexpectedBracket.foreground#C04A5A
  • editorBracketMatch.background#D4D0EA73
  • editorBracketMatch.border#9B59B6
  • editorCodeLens.foreground#7E7899
  • editorCursor.foreground#6B5BD4
  • editorError.foreground#C04A5A
  • editorGroup.border#D4D0EA
  • editorGroup.dropBackground#6B5BD430
  • editorGroupHeader.tabsBackground#D8D5E6
  • editorGutter.addedBackground#3D9A6Ecc
  • editorGutter.deletedBackground#C04A5Acc
  • editorGutter.modifiedBackground#2D9CDBcc
  • editorHoverWidget.background#F2F1F8
  • editorHoverWidget.border#7E7899
  • editorIndentGuide.activeBackground#2E2D3A73
  • editorIndentGuide.background#2E2D3A18
  • editorInlineSuggest.background#E2E0ED
  • editorInlineSuggest.foreground#2E2D3A8c
  • editorLineNumber.foreground#7E7899
  • editorLink.activeForeground#2D9CDB
  • editorMarkerNavigation.background#E2E0ED
  • editorOverviewRuler.addedForeground#3D9A6Ecc
  • editorOverviewRuler.border#D8D5E6
  • editorOverviewRuler.currentContentForeground#3D9A6E
  • editorOverviewRuler.deletedForeground#C04A5Acc
  • editorOverviewRuler.errorForeground#C04A5Acc
  • editorOverviewRuler.incomingContentForeground#6B5BD4
  • editorOverviewRuler.infoForeground#2D9CDBcc
  • editorOverviewRuler.modifiedForeground#2D9CDBcc
  • editorOverviewRuler.selectionHighlightForeground#C07840
  • editorOverviewRuler.warningForeground#C07840cc
  • editorOverviewRuler.wordHighlightForeground#2D9CDB
  • editorOverviewRuler.wordHighlightStrongForeground#3D9A6E
  • editorRuler.foreground#2E2D3A18
  • editorSuggestWidget.background#E2E0ED
  • editorSuggestWidget.foreground#2E2D3A
  • editorSuggestWidget.selectedBackground#D4D0EA
  • editorWarning.foreground#2D9CDB
  • editorWhitespace.foreground#2E2D3A18
  • editorWidget.background#E2E0ED
  • errorForeground#C04A5A
  • extensionButton.prominentBackground#3D9A6Ee6
  • extensionButton.prominentForeground#2E2D3A
  • extensionButton.prominentHoverBackground#3D9A6E99
  • focusBorder#7E7899
  • foreground#2E2D3A
  • gitDecoration.conflictingResourceForeground#C07840
  • gitDecoration.deletedResourceForeground#C04A5A
  • gitDecoration.ignoredResourceForeground#7E7899
  • gitDecoration.modifiedResourceForeground#2D9CDB
  • gitDecoration.untrackedResourceForeground#3D9A6E
  • input.background#F2F1F8
  • input.border#D8D5E6
  • input.foreground#2E2D3A
  • input.placeholderForeground#7E7899
  • inputOption.activeBorder#6B5BD4
  • inputValidation.errorBorder#C04A5A
  • inputValidation.infoBorder#9B59B6
  • inputValidation.warningBorder#C07840
  • list.activeSelectionBackground#D4D0EA99
  • list.activeSelectionForeground#2E2D3A
  • list.dropBackground#D4D0EA
  • list.errorForeground#C04A5A
  • list.focusBackground#E8E6F2
  • list.highlightForeground#2D9CDB
  • list.hoverBackground#D4D0EAa6
  • list.inactiveSelectionBackground#D4D0EA66
  • list.warningForeground#C07840
  • listFilterWidget.background#EAE8F3
  • listFilterWidget.noMatchesOutline#C04A5A
  • listFilterWidget.outline#F7F6FB
  • merge.currentHeaderBackground#3D9A6Ee6
  • merge.incomingHeaderBackground#6B5BD4e6
  • notification.background#F2F1F8
  • notification.buttonBackground#D4D0EA
  • notification.buttonForeground#2E2D3A
  • notification.buttonHoverBackground#E8E6F2
  • notification.errorBackground#C04A5A
  • notification.errorForeground#2E2D3A
  • notification.foreground#2E2D3A
  • notification.infoBackground#2D9CDB
  • notification.infoForeground#F2F1F8
  • notification.warningBackground#C07840
  • notification.warningForeground#F2F1F8
  • panel.background#F2F1F8
  • panel.border#9B59B6
  • panelTitle.activeBorder#9B59B6
  • panelTitle.activeForeground#2E2D3A
  • panelTitle.inactiveForeground#2E2D3Acc
  • peekView.border#D4D0EA
  • peekViewEditor.background#F2F1F8
  • peekViewEditor.matchHighlightBackground#9A8A2Ecc
  • peekViewResult.background#E2E0ED
  • peekViewResult.fileForeground#2E2D3A
  • peekViewResult.lineForeground#2E2D3A
  • peekViewResult.matchHighlightBackground#9A8A2Ecc
  • peekViewResult.selectionBackground#D4D0EA
  • peekViewResult.selectionForeground#2E2D3A
  • peekViewTitle.background#D8D5E6
  • peekViewTitleDescription.foreground#7E7899
  • peekViewTitleLabel.foreground#2E2D3A
  • pickerGroup.border#6B5BD4
  • pickerGroup.foreground#2D9CDB
  • progressBar.background#9B59B6
  • selection.background#6B5BD4
  • settings.checkboxBackground#E2E0ED
  • settings.checkboxBorder#D8D5E6
  • settings.checkboxForeground#2E2D3A
  • settings.dropdownBackground#E2E0ED
  • settings.dropdownBorder#D8D5E6
  • settings.dropdownForeground#2E2D3A
  • settings.headerForeground#2E2D3A
  • settings.modifiedItemForeground#C07840
  • settings.modifiedItemIndicator#C07840
  • settings.numberInputBackground#E2E0ED
  • settings.numberInputBorder#D8D5E6
  • settings.numberInputForeground#2E2D3A
  • settings.textInputBackground#E2E0ED
  • settings.textInputBorder#D8D5E6
  • settings.textInputForeground#2E2D3A
  • sideBar.background#E2E0ED
  • sideBar.foreground#2E2D3A
  • sideBarSectionHeader.background#F2F1F8
  • sideBarSectionHeader.border#D8D5E6
  • sideBarTitle.foreground#2E2D3A
  • statusBar.background#D8D5E6
  • statusBar.debuggingBackground#C04A5A
  • statusBar.debuggingForeground#D8D5E6
  • statusBar.foreground#2E2D3A
  • statusBar.noFolderBackground#D8D5E6
  • statusBar.noFolderForeground#2E2D3A
  • statusBarItem.prominentBackground#C04A5A
  • statusBarItem.prominentHoverBackground#C07840
  • statusBarItem.remoteBackground#6B5BD4
  • statusBarItem.remoteForeground#2E2D3A
  • tab.activeBackground#F2F1F8
  • tab.activeBorderTop#9B59B6cc
  • tab.activeForeground#2E2D3A
  • tab.border#D8D5E6
  • tab.inactiveBackground#E2E0ED
  • tab.inactiveForeground#7E7899
  • terminal.ansiBlack#E2E0ED
  • terminal.ansiBlue#4A6FA5
  • terminal.ansiBrightBlack#9A96B0
  • terminal.ansiBrightBlue#5A82B8
  • terminal.ansiBrightCyan#38A8D8
  • terminal.ansiBrightGreen#4AAF78
  • terminal.ansiBrightMagenta#7B6BE0
  • terminal.ansiBrightRed#D04A62
  • terminal.ansiBrightWhite#F7F6FB
  • terminal.ansiBrightYellow#B09A38
  • terminal.ansiCyan#2D9CDB
  • terminal.ansiGreen#3D9A6E
  • terminal.ansiMagenta#6B5BD4
  • terminal.ansiRed#C04A5A
  • terminal.ansiWhite#2E2D3A
  • terminal.ansiYellow#9A8A2E
  • terminal.background#F2F1F8
  • terminal.foreground#2E2D3A
  • terminal.selectionBackground#7E789973
  • terminalCursor.background#E2E0ED
  • terminalCursor.foreground#2E2D3A
  • titleBar.activeBackground#E2E0ED
  • titleBar.activeForeground#2E2D3A
  • titleBar.inactiveBackground#D8D5E6
  • titleBar.inactiveForeground#7E7899
  • walkThrough.embeddedEditorBackground#E2E0ED

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#6B5BD4
source#2E2D3A
meta.diff, meta.diff.header#7E7899
markup.inserted#3D9A6E
markup.deleted#C04A5A
markup.changed#C07840
invalid#C04A5Aunderline italic
invalid.deprecated#2E2D3Aunderline italic
entity.name.filename#9A8A2E
markup.error#C04A5A
markup.underlineunderline
markup.bold#C07840bold
markup.heading#6B5BD4bold
markup.italic#9A8A2Eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#2D9CDB
markup.inline.raw, markup.raw.restructuredtext#3D9A6E
markup.underline.link, markup.underline.link.image#2D9CDB
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#9B59B6
entity.name.directive.restructuredtext, markup.quote#9A8A2Eitalic
meta.separator.markdown#7E7899
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#3D9A6E
punctuation.definition.constant.restructuredtext#6B5BD4
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#6B5BD4
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#2E2D3A
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#9A8A2E
entity.name.type.class, entity.name.class#2D9CDBnormal
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#6B5BD4italic
entity.other.inherited-class#2D9CDBitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7E7899
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#9B59B6
comment.block.documentation entity.name.type#2D9CDBitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#2D9CDB
comment.block.documentation variable#C07840italic
constant, variable.other.constant#6B5BD4
constant.character.escape, constant.character.string.escape, constant.regexp#9B59B6
entity.name.tag#9B59B6
entity.other.attribute-name.parent-selector#9B59B6
entity.other.attribute-name.id#9A8A2Eitalic
entity.other.attribute-name#3D9A6Eitalic
meta.tag.inline source#9A8A2E
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#3D9A6E
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#C07840italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#3D9A6Eitalic
meta.decorator variable.other.object#3D9A6E
keyword, punctuation.definition.keyword#9B59B6
keyword.control.new, keyword.operator.newbold
meta.selector#9B59B6
support#2D9CDBitalic
support.function.magic, support.variable, variable.other.predefined#6B5BD4regular
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#9B59B6
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#2E2D3A
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#9B59B6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#2D9CDB
constant.other.date, constant.other.timestamp#C07840
variable.other.alias.yaml#3D9A6Eitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#9B59B6regular
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#2D9CDBitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#C07840
storage.modifier#9B59B6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#9A8A2E
punctuation.definition.group.capture.regexp#9B59B6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C04A5A
punctuation.definition.character-class.regexp#2D9CDB
punctuation.definition.group.regexp#C07840
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C04A5A
meta.assertion.look-ahead.regexp#3D9A6E
string#9A8A2E
punctuation.definition.string.begin, punctuation.definition.string.end#9A8A2E
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#6B5BD4
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#7E7899
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#2E2D3A
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#C07840italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#2E2D3Anormal
meta.selectionset.graphql variable#9A8A2E
meta.selectionset.graphql meta.arguments variable#2E2D3A
entity.name.fragment.graphql, variable.fragment.graphql#2D9CDB
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.section.embedded.begin.html, punctuation.section.embedded.end.html#9B59B6
meta.embedded.line.cshtml, source.cs meta.embedded.line, string.quoted.double.cshtml, entity.name.tag.cshtml#2D9CDB
keyword.other.DML.sql, keyword.other.DDL.create.II.sql, keyword.other.DDL.create.sql, keyword.other.DDL.sql, keyword.other.sql#9B59B6
support.function.sql, support.type.sql#2D9CDBitalic
string.quoted.single.sql, string.quoted.double.sql#9A8A2E
support.type.property-name.json#2D9CDB
constant.numeric.json, constant.language.json#C07840
entity.name.type.interface, entity.name.type.alias, support.type.builtin.ts, support.type.primitive.ts, support.type.builtin.tsx, support.type.primitive.tsx#2D9CDBitalic
entity.name.namespace, entity.name.scope-resolution#6B5BD4
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical#9B59B6
constant.language.boolean, constant.language.null, constant.language.undefined#6B5BD4italic
constant.numeric, constant.numeric.integer, constant.numeric.float#C07840
support.type.property-name.css, meta.property-name.css#2D9CDB
support.constant.property-value.css, constant.other.color.rgb-value.css#9A8A2E