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#BD1B570F
  • activityBar.activeBorder#BD1B57
  • activityBar.background#F7DDE8
  • activityBar.border#F1D2DD
  • activityBar.foreground#2A0A17
  • activityBar.inactiveForeground#8E5C70
  • activityBarBadge.background#BD1B57
  • activityBarBadge.foreground#FFFAFD
  • badge.background#BD1B57
  • badge.foreground#FFFAFD
  • breadcrumb.activeSelectionForeground#BD1B57
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#2A0A17
  • breadcrumb.foreground#6E3A4F
  • breadcrumbPicker.background#FFFFFF
  • button.background#BD1B57
  • button.foreground#FFFFFF
  • button.hoverBackground#A1144A
  • button.secondaryBackground#F4DBE5
  • button.secondaryForeground#2A0A17
  • button.secondaryHoverBackground#E3B3C4
  • checkbox.background#F4DBE5
  • checkbox.border#E3B3C4
  • checkbox.foreground#2A0A17
  • debugConsole.errorForeground#C81E3A
  • debugConsole.infoForeground#0E7490
  • debugConsole.warningForeground#B45309
  • debugConsoleInputIcon.foreground#BD1B57
  • debugIcon.breakpointDisabledForeground#8E5C70
  • debugIcon.breakpointForeground#BD1B57
  • debugToolBar.background#FFFFFF
  • debugToolBar.border#E3B3C4
  • descriptionForeground#8E5C70
  • diffEditor.diagonalFill#F1D2DD
  • diffEditor.insertedLineBackground#15803D14
  • diffEditor.insertedTextBackground#15803D1F
  • diffEditor.removedLineBackground#C81E3A14
  • diffEditor.removedTextBackground#C81E3A1F
  • diffEditorGutter.insertedLineBackground#15803D33
  • diffEditorGutter.removedLineBackground#C81E3A33
  • dropdown.background#FFFFFF
  • dropdown.border#E3B3C4
  • dropdown.foreground#2A0A17
  • dropdown.listBackground#FFFFFF
  • editor.background#FFFAFD
  • editor.findMatchBackground#B4530959
  • editor.findMatchBorder#B45309
  • editor.findMatchHighlightBackground#B4530926
  • editor.findRangeHighlightBackground#B4530914
  • editor.foreground#2A0A17
  • editor.inactiveSelectionBackground#BD1B5714
  • editor.lineHighlightBackground#BD1B5712
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#BD1B5714
  • editor.selectionBackground#BD1B571F
  • editor.selectionHighlightBackground#BD1B5714
  • editor.wordHighlightBackground#7C3AED1A
  • editor.wordHighlightStrongBackground#BD1B5724
  • editorBracketHighlight.foreground1#BD1B57
  • editorBracketHighlight.foreground2#7C3AED
  • editorBracketHighlight.foreground3#0E7490
  • editorBracketHighlight.foreground4#15803D
  • editorBracketHighlight.foreground5#B45309
  • editorBracketHighlight.foreground6#92400E
  • editorBracketHighlight.unexpectedBracket.foreground#C81E3A
  • editorBracketMatch.background#BD1B5726
  • editorBracketMatch.border#BD1B57
  • editorCursor.foreground#BD1B57
  • editorError.foreground#C81E3A
  • editorGhostText.border#00000000
  • editorGhostText.foreground#A87890
  • editorGroup.border#F1D2DD
  • editorGroup.emptyBackground#F7DDE8
  • editorGroupHeader.noTabsBackground#F7DDE8
  • editorGroupHeader.tabsBackground#F7DDE8
  • editorGroupHeader.tabsBorder#F1D2DD
  • editorGutter.addedBackground#15803D
  • editorGutter.background#FFFAFD
  • editorGutter.commentRangeForeground#8E5C70
  • editorGutter.deletedBackground#C81E3A
  • editorGutter.foldingControlForeground#6E3A4F
  • editorGutter.modifiedBackground#92400E
  • editorHint.foreground#7C3AED
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#E3B3C4
  • editorHoverWidget.foreground#2A0A17
  • editorIndentGuide.activeBackground1#E3B3C4
  • editorIndentGuide.background1#F1D2DD
  • editorInfo.foreground#0E7490
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#6E3A4F
  • editorInlayHint.parameterForeground#9E3F66
  • editorInlayHint.typeForeground#0E7490
  • editorLineNumber.activeForeground#BD1B57
  • editorLineNumber.foreground#D4A5B8
  • editorLink.activeForeground#BD1B57
  • editorOverviewRuler.addedForeground#15803D
  • editorOverviewRuler.deletedForeground#C81E3A
  • editorOverviewRuler.errorForeground#C81E3A
  • editorOverviewRuler.findMatchForeground#B45309CC
  • editorOverviewRuler.infoForeground#0E7490
  • editorOverviewRuler.modifiedForeground#92400E
  • editorOverviewRuler.selectionHighlightForeground#BD1B5766
  • editorOverviewRuler.warningForeground#B45309
  • editorRuler.foreground#F1D2DD
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#E3B3C4
  • editorSuggestWidget.focusHighlightForeground#BD1B57
  • editorSuggestWidget.foreground#2A0A17
  • editorSuggestWidget.highlightForeground#BD1B57
  • editorSuggestWidget.selectedBackground#BD1B5724
  • editorSuggestWidget.selectedForeground#BD1B57
  • editorWarning.foreground#B45309
  • editorWhitespace.foreground#E3B3C4
  • editorWidget.background#FFFFFF
  • editorWidget.border#E3B3C4
  • editorWidget.foreground#2A0A17
  • errorForeground#C81E3A
  • extensionBadge.remoteBackground#BD1B57
  • extensionBadge.remoteForeground#FFFFFF
  • extensionButton.prominentBackground#BD1B57
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#A1144A
  • focusBorder#C71F5D
  • foreground#2A0A17
  • gitDecoration.addedResourceForeground#15803D
  • gitDecoration.conflictingResourceForeground#B8175A
  • gitDecoration.deletedResourceForeground#C81E3A
  • gitDecoration.ignoredResourceForeground#D4A5B8
  • gitDecoration.modifiedResourceForeground#92400E
  • gitDecoration.renamedResourceForeground#7C3AED
  • gitDecoration.stageDeletedResourceForeground#C81E3A
  • gitDecoration.stageModifiedResourceForeground#92400E
  • gitDecoration.submoduleResourceForeground#7C3AED
  • gitDecoration.untrackedResourceForeground#15803D
  • icon.foreground#8E5C70
  • input.background#F4DBE5
  • input.border#E3B3C4
  • input.foreground#2A0A17
  • input.placeholderForeground#8E5C70
  • inputOption.activeBackground#BD1B5726
  • inputOption.activeBorder#BD1B57
  • inputOption.activeForeground#BD1B57
  • inputValidation.errorBackground#C81E3A
  • inputValidation.errorBorder#C81E3A
  • inputValidation.errorForeground#FFFFFF
  • inputValidation.infoBackground#0E7490
  • inputValidation.infoBorder#0E7490
  • inputValidation.infoForeground#FFFFFF
  • inputValidation.warningBackground#B45309
  • inputValidation.warningBorder#B45309
  • inputValidation.warningForeground#FFFFFF
  • list.activeSelectionBackground#BD1B571F
  • list.activeSelectionForeground#BD1B57
  • list.dropBackground#BD1B571F
  • list.errorForeground#C81E3A
  • list.focusBackground#BD1B5714
  • list.focusForeground#2A0A17
  • list.focusOutline#BD1B57
  • list.highlightForeground#BD1B57
  • list.hoverBackground#BD1B570A
  • list.hoverForeground#2A0A17
  • list.inactiveSelectionBackground#BD1B570F
  • list.inactiveSelectionForeground#2A0A17
  • list.warningForeground#B45309
  • menu.background#FFFFFF
  • menu.border#E3B3C4
  • menu.foreground#2A0A17
  • menu.selectionBackground#BD1B571F
  • menu.selectionForeground#BD1B57
  • menu.separatorBackground#F1D2DD
  • minimap.background#FFFAFD
  • minimap.errorHighlight#C81E3A
  • minimap.findMatchHighlight#B45309CC
  • minimap.selectionHighlight#BD1B5766
  • minimap.warningHighlight#B45309
  • minimapGutter.addedBackground#15803D
  • minimapGutter.deletedBackground#C81E3A
  • minimapGutter.modifiedBackground#92400E
  • notificationCenter.border#E3B3C4
  • notificationCenterHeader.background#F7DDE8
  • notificationCenterHeader.foreground#2A0A17
  • notificationLink.foreground#BD1B57
  • notifications.background#FFFFFF
  • notifications.border#E3B3C4
  • notifications.foreground#2A0A17
  • notificationsErrorIcon.foreground#C81E3A
  • notificationsInfoIcon.foreground#0E7490
  • notificationsWarningIcon.foreground#B45309
  • notificationToast.border#E3B3C4
  • panel.background#FDF2F6
  • panel.border#F1D2DD
  • panelInput.border#E3B3C4
  • panelSection.border#F1D2DD
  • panelSectionHeader.background#F7DDE8
  • panelSectionHeader.foreground#2A0A17
  • panelTitle.activeBorder#BD1B57
  • panelTitle.activeForeground#2A0A17
  • panelTitle.inactiveForeground#8E5C70
  • peekView.border#BD1B57
  • peekViewEditor.background#FFFAFD
  • peekViewEditor.matchHighlightBackground#B4530959
  • peekViewEditorGutter.background#FFFAFD
  • peekViewResult.background#FBECF2
  • peekViewResult.fileForeground#2A0A17
  • peekViewResult.lineForeground#6E3A4F
  • peekViewResult.matchHighlightBackground#BD1B572E
  • peekViewResult.selectionBackground#BD1B571F
  • peekViewResult.selectionForeground#BD1B57
  • peekViewTitle.background#F7DDE8
  • peekViewTitleDescription.foreground#6E3A4F
  • peekViewTitleLabel.foreground#2A0A17
  • pickerGroup.border#F1D2DD
  • pickerGroup.foreground#BD1B57
  • progressBar.background#BD1B57
  • quickInput.background#FFFFFF
  • quickInput.foreground#2A0A17
  • quickInputList.focusBackground#BD1B571F
  • quickInputList.focusForeground#BD1B57
  • quickInputList.focusIconForeground#BD1B57
  • quickInputTitle.background#F7DDE8
  • scrollbar.shadow#2A0A1722
  • scrollbarSlider.activeBackground#BD1B574D
  • scrollbarSlider.background#2A0A1714
  • scrollbarSlider.hoverBackground#BD1B572E
  • selection.background#BD1B5740
  • sideBar.background#FBECF2
  • sideBar.border#F1D2DD
  • sideBar.foreground#6E3A4F
  • sideBarSectionHeader.background#F7DDE8
  • sideBarSectionHeader.border#F1D2DD
  • sideBarSectionHeader.foreground#2A0A17
  • sideBarTitle.foreground#2A0A17
  • statusBar.background#BE2E5E
  • statusBar.border#E3B3C4
  • statusBar.debuggingBackground#7C3AED
  • statusBar.debuggingBorder#E3B3C4
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#BE2E5E
  • statusBar.noFolderBorder#E3B3C4
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.activeBackground#FFFFFF40
  • statusBarItem.errorBackground#C81E3A
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.hoverBackground#FFFFFF26
  • statusBarItem.prominentBackground#BD1B574D
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.prominentHoverBackground#BD1B5766
  • statusBarItem.remoteBackground#BD1B57
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.warningBackground#B45309
  • statusBarItem.warningForeground#FFFFFF
  • symbolIcon.classForeground#0E7490
  • symbolIcon.constantForeground#7C3AED
  • symbolIcon.enumeratorForeground#0E7490
  • symbolIcon.enumeratorMemberForeground#0E7490
  • symbolIcon.functionForeground#7C3AED
  • symbolIcon.interfaceForeground#0E7490
  • symbolIcon.keywordForeground#BD1B57
  • symbolIcon.methodForeground#7C3AED
  • symbolIcon.moduleForeground#7C3AED
  • symbolIcon.numberForeground#92400E
  • symbolIcon.propertyForeground#B8175A
  • symbolIcon.stringForeground#B45309
  • symbolIcon.typeParameterForeground#0E7490
  • symbolIcon.variableForeground#2A0A17
  • tab.activeBackground#FFFAFD
  • tab.activeBorder#00000000
  • tab.activeBorderTop#BD1B57
  • tab.activeForeground#2A0A17
  • tab.border#F1D2DD
  • tab.hoverBackground#FFFFFF
  • tab.hoverForeground#2A0A17
  • tab.inactiveBackground#FBE6EE
  • tab.inactiveForeground#6E3A4F
  • tab.unfocusedActiveBorderTop#BE2E5E
  • tab.unfocusedActiveForeground#6E3A4F
  • terminal.ansiBlack#2A0A17
  • terminal.ansiBlue#0E7490
  • terminal.ansiBrightBlack#6E3A4F
  • terminal.ansiBrightBlue#155E75
  • terminal.ansiBrightCyan#6D28D9
  • terminal.ansiBrightGreen#166534
  • terminal.ansiBrightMagenta#B8175A
  • terminal.ansiBrightRed#BD1B57
  • terminal.ansiBrightWhite#2A0A17
  • terminal.ansiBrightYellow#92400E
  • terminal.ansiCyan#7C3AED
  • terminal.ansiGreen#15803D
  • terminal.ansiMagenta#BD1B57
  • terminal.ansiRed#C81E3A
  • terminal.ansiWhite#8E5C70
  • terminal.ansiYellow#B45309
  • terminal.background#FDF2F6
  • terminal.border#F1D2DD
  • terminal.foreground#2A0A17
  • terminal.selectionBackground#BD1B5740
  • terminalCursor.background#FDF2F6
  • terminalCursor.foreground#BD1B57
  • textBlockQuote.background#FBECF2
  • textBlockQuote.border#BD1B57
  • textCodeBlock.background#F4DBE5
  • textLink.activeForeground#B8175A
  • textLink.foreground#BD1B57
  • textPreformat.foreground#7C3AED
  • textSeparator.foreground#F1D2DD
  • titleBar.activeBackground#F7DDE8
  • titleBar.activeForeground#2A0A17
  • titleBar.border#F1D2DD
  • titleBar.inactiveBackground#FBE6EE
  • titleBar.inactiveForeground#8E5C70
  • tree.indentGuidesStroke#F1D2DD
  • widget.shadow#2A0A1722

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8E5C70italic
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.conditional, keyword.control.loop, keyword.declaration, storage, storage.type, storage.modifier#BD1B57
variable.language, variable.language.this, variable.language.self, variable.language.super#BD1B57italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.relational, keyword.operator.arrow, keyword.operator.ternary, keyword.operator.spread, punctuation.accessor, storage.type.function.arrow#C42466
punctuation, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.block, punctuation.definition.dict, meta.brace, meta.delimiter#82475E
string, string.quoted, string.quoted.single, string.quoted.double, string.template, string.unquoted, punctuation.definition.string#B45309
string.regexp, string.regexp constant.character.escape#15803D
constant.character.escape, constant.character.escape.backslash#15803D
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, keyword.other.unit#92400E
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan, constant.language.infinity, support.constant#7C3AED
constant.other, variable.other.constant#7C3AED
entity.name.function, meta.function-call, meta.function-call entity.name.function, variable.function, support.function, keyword.other.special-method, entity.name.method, meta.method-call entity.name.function#7C3AED
meta.definition.function entity.name.function, meta.function entity.name.function#7C3AED
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, entity.name.struct, entity.name.namespace, entity.other.inherited-class, support.type, support.class, support.type.primitive, support.type.builtin, meta.type.name, meta.return-type, storage.type.class, storage.type.interface, storage.type.enum#0E7490
variable.parameter, variable.parameter.function, meta.parameter, meta.function.parameters variable#9E3F66italic
variable.other.property, variable.other.object.property, support.variable.property, support.type.property-name, meta.property variable, meta.object.member, meta.object-literal.key, variable.other.member#B8175A
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.constant.object, string constant.other.placeholder#2A0A17
entity.name.tag, meta.tag, meta.tag.sgml, punctuation.definition.tag#B8175A
entity.other.attribute-name, meta.attribute#9E3F66
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css#B45309
entity.other.attribute-name.id.css#B8175A
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.sass, support.type.property-name.less#B8175A
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css#7C3AED
invalid, invalid.illegal, invalid.deprecated#C81E3A
meta.decorator, meta.decorator variable.other, meta.decorator entity.name.function, punctuation.decorator, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7C3AEDitalic
markup.inserted, markup.inserted.git_gutter#15803D
markup.deleted, markup.deleted.git_gutter#C81E3A
markup.changed, markup.changed.git_gutter#92400E
markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#BD1B57bold
markup.bold, markup.bold string#B8175Abold
markup.italic, markup.italic string#B8175Aitalic
markup.bold markup.italic, markup.italic markup.bold, markup.bold markup.italic string, markup.italic markup.bold string#B8175Abold italic
markup.quote#6E3A4Fitalic
markup.quote punctuation.definition.blockquote.markdown#8E5C70
string.other.link, string.other.link.title.markdown, markup.underline.link#0E7490
string.other.link.description.title.markdown#7C3AED
constant.other.reference.link.markdown#92400E
markup.inline.raw, markup.inline.raw.markdown#7C3AED
markup.inline.raw.markdown punctuation.definition.raw.markdown#8E5C70
markup.raw.block, markup.raw.block.fenced.markdown#7C3AED
variable.language.fenced.markdown, fenced_code.block.language.markdown#8E5C70
meta.separator.markdown#BD1B57bold
punctuation.definition.list_item.markdown, beginning.punctuation.definition.list.markdown#BD1B57
text.html.markdown, meta.paragraph.markdown#2A0A17
*url*, *link*, *uri*underline
source.json meta.structure.dictionary.json support.type.property-name.json#BD1B57
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7C3AED
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0E7490
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B45309
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#92400E
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#15803D
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9E3F66
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B8175A
entity.name.tag.yaml#BD1B57
support.class.component, support.class.component.jsx, support.class.component.tsx, entity.name.tag.tsx, entity.name.tag.jsx#0E7490
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#9E3F66
punctuation.definition.template-expression, punctuation.section.embedded#C42466
meta.embedded, source.groovy.embedded#2A0A17
variable.other.readwrite.alias, meta.import variable, meta.export variable#2A0A17
entity.name.module, entity.name.namespace, support.module#7C3AED
pinkode by Prathmesh Ghatol - VS Code Theme