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#FF3D8C0F
  • activityBar.activeBorder#FF3D8C
  • activityBar.background#08080B
  • activityBar.border#1E1E26
  • activityBar.foreground#F4E4EC
  • activityBar.inactiveForeground#6A5A64
  • activityBarBadge.background#FF3D8C
  • activityBarBadge.foreground#0A0A0D
  • badge.background#FF3D8C
  • badge.foreground#0A0A0D
  • breadcrumb.activeSelectionForeground#FF3D8C
  • breadcrumb.background#15151B
  • breadcrumb.focusForeground#F4E4EC
  • breadcrumb.foreground#B09AA4
  • breadcrumbPicker.background#15151B
  • button.background#FF3D8C
  • button.foreground#0A0A0D
  • button.hoverBackground#F06292
  • button.secondaryBackground#15151B
  • button.secondaryForeground#F4E4EC
  • button.secondaryHoverBackground#2A2A34
  • checkbox.background#1A1A22
  • checkbox.border#2A2A34
  • checkbox.foreground#F4E4EC
  • debugConsole.errorForeground#FF3D6D
  • debugConsole.infoForeground#8DD6FF
  • debugConsole.warningForeground#FFB088
  • debugConsoleInputIcon.foreground#FF3D8C
  • debugIcon.breakpointDisabledForeground#6A5A64
  • debugIcon.breakpointForeground#FF3D8C
  • debugToolBar.background#15151B
  • debugToolBar.border#2A2A34
  • descriptionForeground#B09AA4
  • diffEditor.diagonalFill#1E1E26
  • diffEditor.insertedLineBackground#9EEBCF0F
  • diffEditor.insertedTextBackground#9EEBCF1A
  • diffEditor.removedLineBackground#FF3D6D12
  • diffEditor.removedTextBackground#FF3D6D1F
  • diffEditorGutter.insertedLineBackground#9EEBCF26
  • diffEditorGutter.removedLineBackground#FF3D6D26
  • dropdown.background#15151B
  • dropdown.border#2A2A34
  • dropdown.foreground#F4E4EC
  • dropdown.listBackground#15151B
  • editor.background#0D0D11
  • editor.findMatchBackground#FFD28A59
  • editor.findMatchBorder#FFD28A
  • editor.findMatchHighlightBackground#FFD28A26
  • editor.findRangeHighlightBackground#FFD28A14
  • editor.foreground#F4E4EC
  • editor.inactiveSelectionBackground#FF3D8C20
  • editor.lineHighlightBackground#FF3D8C0F
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FF3D8C14
  • editor.selectionBackground#FF3D8C40
  • editor.selectionHighlightBackground#FF3D8C1F
  • editor.wordHighlightBackground#C4A3FF1A
  • editor.wordHighlightStrongBackground#FF3D8C24
  • editorBracketHighlight.foreground1#FF3D8C
  • editorBracketHighlight.foreground2#C4A3FF
  • editorBracketHighlight.foreground3#8DD6FF
  • editorBracketHighlight.foreground4#FF9CC2
  • editorBracketHighlight.foreground5#9EEBCF
  • editorBracketHighlight.foreground6#FFD28A
  • editorBracketHighlight.unexpectedBracket.foreground#FF3D6D
  • editorBracketMatch.background#FF3D8C26
  • editorBracketMatch.border#FF3D8C
  • editorCursor.foreground#FF3D8C
  • editorError.foreground#FF3D6D
  • editorGhostText.border#00000000
  • editorGhostText.foreground#C4A3FF
  • editorGroup.border#1E1E26
  • editorGroup.emptyBackground#08080B
  • editorGroupHeader.noTabsBackground#08080B
  • editorGroupHeader.tabsBackground#08080B
  • editorGroupHeader.tabsBorder#1E1E26
  • editorGutter.addedBackground#9EEBCF
  • editorGutter.background#0D0D11
  • editorGutter.commentRangeForeground#6A5A64
  • editorGutter.deletedBackground#FF3D6D
  • editorGutter.foldingControlForeground#B09AA4
  • editorGutter.modifiedBackground#FFD28A
  • editorHint.foreground#C4A3FF
  • editorHoverWidget.background#15151B
  • editorHoverWidget.border#2A2A34
  • editorHoverWidget.foreground#F4E4EC
  • editorIndentGuide.activeBackground1#2A2A34
  • editorIndentGuide.background1#1E1E26
  • editorInfo.foreground#8DD6FF
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#6A5A64
  • editorInlayHint.parameterForeground#FF9CC2
  • editorInlayHint.typeForeground#8DD6FF
  • editorLineNumber.activeForeground#F4E4EC
  • editorLineNumber.foreground#3A2E36
  • editorLink.activeForeground#FF3D8C
  • editorOverviewRuler.addedForeground#9EEBCF
  • editorOverviewRuler.deletedForeground#FF3D6D
  • editorOverviewRuler.errorForeground#FF3D6D
  • editorOverviewRuler.findMatchForeground#FFD28ACC
  • editorOverviewRuler.infoForeground#8DD6FF
  • editorOverviewRuler.modifiedForeground#FFD28A
  • editorOverviewRuler.selectionHighlightForeground#FF3D8C66
  • editorOverviewRuler.warningForeground#FFB088
  • editorRuler.foreground#1E1E26
  • editorSuggestWidget.background#15151B
  • editorSuggestWidget.border#2A2A34
  • editorSuggestWidget.focusHighlightForeground#FFB3D1
  • editorSuggestWidget.foreground#F4E4EC
  • editorSuggestWidget.highlightForeground#FF3D8C
  • editorSuggestWidget.selectedBackground#FF3D8C24
  • editorSuggestWidget.selectedForeground#FFB3D1
  • editorWarning.foreground#FFB088
  • editorWhitespace.foreground#2A2A34
  • editorWidget.background#15151B
  • editorWidget.border#2A2A34
  • editorWidget.foreground#F4E4EC
  • errorForeground#FF3D6D
  • extensionBadge.remoteBackground#FF3D8C
  • extensionBadge.remoteForeground#0A0A0D
  • extensionButton.prominentBackground#FF3D8C
  • extensionButton.prominentForeground#0A0A0D
  • extensionButton.prominentHoverBackground#F06292
  • focusBorder#FF3D8C
  • foreground#F4E4EC
  • gitDecoration.addedResourceForeground#9EEBCF
  • gitDecoration.conflictingResourceForeground#FF2DA0
  • gitDecoration.deletedResourceForeground#FF3D6D
  • gitDecoration.ignoredResourceForeground#6A5A64
  • gitDecoration.modifiedResourceForeground#FFD28A
  • gitDecoration.renamedResourceForeground#C4A3FF
  • gitDecoration.stageDeletedResourceForeground#FF3D6D
  • gitDecoration.stageModifiedResourceForeground#FFD28A
  • gitDecoration.submoduleResourceForeground#C4A3FF
  • gitDecoration.untrackedResourceForeground#9EEBCF
  • icon.foreground#B09AA4
  • input.background#1A1A22
  • input.border#2A2A34
  • input.foreground#F4E4EC
  • input.placeholderForeground#6A5A64
  • inputOption.activeBackground#FF3D8C26
  • inputOption.activeBorder#FF3D8C
  • inputOption.activeForeground#FFB3D1
  • inputValidation.errorBackground#FF3D6D
  • inputValidation.errorBorder#FF3D6D
  • inputValidation.errorForeground#0A0A0D
  • inputValidation.infoBackground#8DD6FF
  • inputValidation.infoBorder#8DD6FF
  • inputValidation.infoForeground#0A0A0D
  • inputValidation.warningBackground#FFB088
  • inputValidation.warningBorder#FFB088
  • inputValidation.warningForeground#0A0A0D
  • list.activeSelectionBackground#FF3D8C14
  • list.activeSelectionForeground#FFB3D1
  • list.dropBackground#FF3D8C1F
  • list.errorForeground#FF3D6D
  • list.focusBackground#FF3D8C1A
  • list.focusForeground#F4E4EC
  • list.focusOutline#FF3D8C66
  • list.highlightForeground#FF3D8C
  • list.hoverBackground#FF3D8C0A
  • list.hoverForeground#F4E4EC
  • list.inactiveSelectionBackground#FF3D8C0F
  • list.inactiveSelectionForeground#F4E4EC
  • list.warningForeground#FFB088
  • menu.background#15151B
  • menu.border#2A2A34
  • menu.foreground#F4E4EC
  • menu.selectionBackground#FF3D8C1F
  • menu.selectionForeground#FFB3D1
  • menu.separatorBackground#1E1E26
  • minimap.background#0D0D11
  • minimap.errorHighlight#FF3D6D
  • minimap.findMatchHighlight#FFD28ACC
  • minimap.selectionHighlight#FF3D8C66
  • minimap.warningHighlight#FFB088
  • minimapGutter.addedBackground#9EEBCF
  • minimapGutter.deletedBackground#FF3D6D
  • minimapGutter.modifiedBackground#FFD28A
  • notificationCenter.border#2A2A34
  • notificationCenterHeader.background#0D0D11
  • notificationCenterHeader.foreground#F4E4EC
  • notificationLink.foreground#FF3D8C
  • notifications.background#15151B
  • notifications.border#2A2A34
  • notifications.foreground#F4E4EC
  • notificationsErrorIcon.foreground#FF3D6D
  • notificationsInfoIcon.foreground#8DD6FF
  • notificationsWarningIcon.foreground#FFB088
  • notificationToast.border#2A2A34
  • panel.background#0B0B0F
  • panel.border#1E1E26
  • panelInput.border#2A2A34
  • panelSection.border#1E1E26
  • panelSectionHeader.background#0D0D11
  • panelSectionHeader.foreground#F4E4EC
  • panelTitle.activeBorder#FF3D8C
  • panelTitle.activeForeground#F4E4EC
  • panelTitle.inactiveForeground#6A5A64
  • peekView.border#FF3D8C
  • peekViewEditor.background#0A0A0E
  • peekViewEditor.matchHighlightBackground#FFD28A40
  • peekViewEditorGutter.background#0A0A0E
  • peekViewResult.background#101015
  • peekViewResult.fileForeground#F4E4EC
  • peekViewResult.lineForeground#B09AA4
  • peekViewResult.matchHighlightBackground#FF3D8C2E
  • peekViewResult.selectionBackground#FF3D8C1F
  • peekViewResult.selectionForeground#FFB3D1
  • peekViewTitle.background#0D0D11
  • peekViewTitleDescription.foreground#B09AA4
  • peekViewTitleLabel.foreground#F4E4EC
  • pickerGroup.border#1E1E26
  • pickerGroup.foreground#FF3D8C
  • progressBar.background#FF3D8C
  • quickInput.background#15151B
  • quickInput.foreground#F4E4EC
  • quickInputList.focusBackground#FF3D8C1F
  • quickInputList.focusForeground#FFB3D1
  • quickInputList.focusIconForeground#FF3D8C
  • quickInputTitle.background#0D0D11
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#FF3D8C4D
  • scrollbarSlider.background#FFFFFF10
  • scrollbarSlider.hoverBackground#FF3D8C2E
  • selection.background#FF3D8C40
  • sideBar.background#101015
  • sideBar.border#1E1E26
  • sideBar.foreground#B09AA4
  • sideBarSectionHeader.background#0D0D11
  • sideBarSectionHeader.border#1E1E26
  • sideBarSectionHeader.foreground#F4E4EC
  • sideBarTitle.foreground#F4E4EC
  • statusBar.background#08080B
  • statusBar.border#1E1E26
  • statusBar.debuggingBackground#C4A3FF26
  • statusBar.debuggingBorder#1E1E26
  • statusBar.debuggingForeground#C4A3FF
  • statusBar.foreground#B09AA4
  • statusBar.noFolderBackground#08080B
  • statusBar.noFolderBorder#1E1E26
  • statusBar.noFolderForeground#B09AA4
  • statusBarItem.activeBackground#FF3D8C26
  • statusBarItem.errorBackground#FF3D6D
  • statusBarItem.errorForeground#0A0A0D
  • statusBarItem.hoverBackground#FF3D8C14
  • statusBarItem.prominentBackground#FF3D8C2E
  • statusBarItem.prominentForeground#FFB3D1
  • statusBarItem.prominentHoverBackground#FF3D8C40
  • statusBarItem.remoteBackground#FF3D8C
  • statusBarItem.remoteForeground#0A0A0D
  • statusBarItem.warningBackground#FFB088
  • statusBarItem.warningForeground#0A0A0D
  • symbolIcon.classForeground#8DD6FF
  • symbolIcon.constantForeground#C4A3FF
  • symbolIcon.enumeratorForeground#8DD6FF
  • symbolIcon.enumeratorMemberForeground#8DD6FF
  • symbolIcon.functionForeground#C4A3FF
  • symbolIcon.interfaceForeground#8DD6FF
  • symbolIcon.keywordForeground#FF3D8C
  • symbolIcon.methodForeground#C4A3FF
  • symbolIcon.moduleForeground#C4A3FF
  • symbolIcon.numberForeground#FFD28A
  • symbolIcon.propertyForeground#FFB3D1
  • symbolIcon.stringForeground#FFB088
  • symbolIcon.typeParameterForeground#8DD6FF
  • symbolIcon.variableForeground#F4E4EC
  • tab.activeBackground#0D0D11
  • tab.activeBorder#00000000
  • tab.activeBorderTop#FF3D8C
  • tab.activeForeground#F4E4EC
  • tab.border#1E1E26
  • tab.hoverBackground#15151B
  • tab.hoverForeground#F4E4EC
  • tab.inactiveBackground#08080B
  • tab.inactiveForeground#B09AA4
  • tab.unfocusedActiveBorderTop#F06292
  • tab.unfocusedActiveForeground#B09AA4
  • terminal.ansiBlack#08080B
  • terminal.ansiBlue#8DD6FF
  • terminal.ansiBrightBlack#6A5A64
  • terminal.ansiBrightBlue#A8B5FF
  • terminal.ansiBrightCyan#D4BAFF
  • terminal.ansiBrightGreen#B7F0DB
  • terminal.ansiBrightMagenta#FF2DA0
  • terminal.ansiBrightRed#FF6B8A
  • terminal.ansiBrightWhite#F4E4EC
  • terminal.ansiBrightYellow#FFE0A8
  • terminal.ansiCyan#C4A3FF
  • terminal.ansiGreen#9EEBCF
  • terminal.ansiMagenta#FF3D8C
  • terminal.ansiRed#FF3D6D
  • terminal.ansiWhite#B09AA4
  • terminal.ansiYellow#FFD28A
  • terminal.background#0B0B0F
  • terminal.border#1E1E26
  • terminal.foreground#F4E4EC
  • terminal.selectionBackground#FF3D8C40
  • terminalCursor.background#0B0B0F
  • terminalCursor.foreground#FF3D8C
  • textBlockQuote.background#101015
  • textBlockQuote.border#FF3D8C
  • textCodeBlock.background#15151B
  • textLink.activeForeground#FFB3D1
  • textLink.foreground#FF3D8C
  • textPreformat.foreground#C4A3FF
  • textSeparator.foreground#1E1E26
  • titleBar.activeBackground#08080B
  • titleBar.activeForeground#F4E4EC
  • titleBar.border#1E1E26
  • titleBar.inactiveBackground#050507
  • titleBar.inactiveForeground#6A5A64
  • tree.indentGuidesStroke#1E1E26
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A5A64italic
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#FF3D8C
variable.language, variable.language.this, variable.language.self, variable.language.super#FF3D8Citalic
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#FF5FA8
punctuation, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.block, punctuation.definition.dict, meta.brace, meta.delimiter#D18BA7
string, string.quoted, string.quoted.single, string.quoted.double, string.template, string.unquoted, punctuation.definition.string#FFB088
string.regexp, string.regexp constant.character.escape#9EEBCF
constant.character.escape, constant.character.escape.backslash#9EEBCF
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, keyword.other.unit#FFD28A
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan, constant.language.infinity, support.constant#C4A3FF
constant.other, variable.other.constant#C4A3FF
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#C4A3FF
meta.definition.function entity.name.function, meta.function entity.name.function#C4A3FF
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#8DD6FF
variable.parameter, variable.parameter.function, meta.parameter, meta.function.parameters variable#FF9CC2italic
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#FFB3D1
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.constant.object, string constant.other.placeholder#F4E4EC
entity.name.tag, meta.tag, meta.tag.sgml, punctuation.definition.tag#FF2DA0
entity.other.attribute-name, meta.attribute#FF9CC2
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css#FFD28A
entity.other.attribute-name.id.css#FFB088
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.sass, support.type.property-name.less#FFB3D1
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css#C4A3FF
invalid, invalid.illegal, invalid.deprecated#FF3D6D
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#C4A3FFitalic
markup.inserted, markup.inserted.git_gutter#9EEBCF
markup.deleted, markup.deleted.git_gutter#FF3D6D
markup.changed, markup.changed.git_gutter#FFD28A
markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#FF3D8Cbold
markup.bold, markup.bold string#FFB3D1bold
markup.italic, markup.italic string#FFB3D1italic
markup.bold markup.italic, markup.italic markup.bold, markup.bold markup.italic string, markup.italic markup.bold string#FFB3D1bold italic
markup.quote#B09AA4italic
markup.quote punctuation.definition.blockquote.markdown#6A5A64
string.other.link, string.other.link.title.markdown, markup.underline.link#8DD6FF
string.other.link.description.title.markdown#C4A3FF
constant.other.reference.link.markdown#FFD28A
markup.inline.raw, markup.inline.raw.markdown#C4A3FF
markup.inline.raw.markdown punctuation.definition.raw.markdown#6A5A64
markup.raw.block, markup.raw.block.fenced.markdown#C4A3FF
variable.language.fenced.markdown, fenced_code.block.language.markdown#6A5A64
meta.separator.markdown#FF3D8Cbold
punctuation.definition.list_item.markdown, beginning.punctuation.definition.list.markdown#FF3D8C
text.html.markdown, meta.paragraph.markdown#F4E4EC
*url*, *link*, *uri*underline
source.json meta.structure.dictionary.json support.type.property-name.json#FF3D8C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C4A3FF
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#8DD6FF
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#FFB088
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#FFD28A
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#9EEBCF
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#FF9CC2
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#FFB3D1
entity.name.tag.yaml#FF3D8C
support.class.component, support.class.component.jsx, support.class.component.tsx, entity.name.tag.tsx, entity.name.tag.jsx#8DD6FF
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#FF9CC2
punctuation.definition.template-expression, punctuation.section.embedded#FF5FA8
meta.embedded, source.groovy.embedded#F4E4EC
variable.other.readwrite.alias, meta.import variable, meta.export variable#F4E4EC
entity.name.module, entity.name.namespace, support.module#C4A3FF