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#FF85B50F
  • activityBar.activeBorder#FF85B5
  • activityBar.background#17171D
  • activityBar.border#33333D
  • activityBar.foreground#D8CDD4
  • activityBar.inactiveForeground#7C6C76
  • activityBarBadge.background#FF85B5
  • activityBarBadge.foreground#1A1A20
  • badge.background#FF85B5
  • badge.foreground#1A1A20
  • breadcrumb.activeSelectionForeground#FF85B5
  • breadcrumb.background#26262E
  • breadcrumb.focusForeground#D8CDD4
  • breadcrumb.foreground#B09AA4
  • breadcrumbPicker.background#26262E
  • button.background#FF85B5
  • button.foreground#1A1A20
  • button.hoverBackground#E58BA8
  • button.secondaryBackground#26262E
  • button.secondaryForeground#D8CDD4
  • button.secondaryHoverBackground#3E3E48
  • checkbox.background#2C2C36
  • checkbox.border#3E3E48
  • checkbox.foreground#D8CDD4
  • debugConsole.errorForeground#FF3D6D
  • debugConsole.infoForeground#8DD6FF
  • debugConsole.warningForeground#FFB088
  • debugConsoleInputIcon.foreground#FF85B5
  • debugIcon.breakpointDisabledForeground#7C6C76
  • debugIcon.breakpointForeground#FF85B5
  • debugToolBar.background#26262E
  • debugToolBar.border#3E3E48
  • descriptionForeground#B09AA4
  • diffEditor.diagonalFill#33333D
  • diffEditor.insertedLineBackground#9EEBCF0F
  • diffEditor.insertedTextBackground#9EEBCF1A
  • diffEditor.removedLineBackground#FF3D6D12
  • diffEditor.removedTextBackground#FF3D6D1F
  • diffEditorGutter.insertedLineBackground#9EEBCF26
  • diffEditorGutter.removedLineBackground#FF3D6D26
  • dropdown.background#26262E
  • dropdown.border#3E3E48
  • dropdown.foreground#D8CDD4
  • dropdown.listBackground#26262E
  • editor.background#1C1C22
  • editor.findMatchBackground#FFD28A59
  • editor.findMatchBorder#FFD28A
  • editor.findMatchHighlightBackground#FFD28A26
  • editor.findRangeHighlightBackground#FFD28A14
  • editor.foreground#D8CDD4
  • editor.inactiveSelectionBackground#FF85B520
  • editor.lineHighlightBackground#FF85B50F
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FF85B514
  • editor.selectionBackground#FF85B540
  • editor.selectionHighlightBackground#FF85B51F
  • editor.wordHighlightBackground#B6A0E81A
  • editor.wordHighlightStrongBackground#FF85B524
  • editorBracketHighlight.foreground1#FF85B5
  • editorBracketHighlight.foreground2#B6A0E8
  • editorBracketHighlight.foreground3#93C9EC
  • editorBracketHighlight.foreground4#FFB6D0
  • editorBracketHighlight.foreground5#A6DEC6
  • editorBracketHighlight.foreground6#E8C794
  • editorBracketHighlight.unexpectedBracket.foreground#FF3D6D
  • editorBracketMatch.background#FF85B526
  • editorBracketMatch.border#FF85B5
  • editorCursor.foreground#FF85B5
  • editorError.foreground#FF3D6D
  • editorGhostText.border#00000000
  • editorGhostText.foreground#B6A0E8
  • editorGroup.border#33333D
  • editorGroup.emptyBackground#17171D
  • editorGroupHeader.noTabsBackground#17171D
  • editorGroupHeader.tabsBackground#17171D
  • editorGroupHeader.tabsBorder#33333D
  • editorGutter.addedBackground#9EEBCF
  • editorGutter.background#1C1C22
  • editorGutter.commentRangeForeground#7C6C76
  • editorGutter.deletedBackground#FF3D6D
  • editorGutter.foldingControlForeground#B09AA4
  • editorGutter.modifiedBackground#FFD28A
  • editorHint.foreground#B6A0E8
  • editorHoverWidget.background#26262E
  • editorHoverWidget.border#3E3E48
  • editorHoverWidget.foreground#D8CDD4
  • editorIndentGuide.activeBackground1#3E3E48
  • editorIndentGuide.background1#33333D
  • editorInfo.foreground#8DD6FF
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#7C6C76
  • editorInlayHint.parameterForeground#FFB6D0
  • editorInlayHint.typeForeground#93C9EC
  • editorLineNumber.activeForeground#D8CDD4
  • editorLineNumber.foreground#524650
  • editorLink.activeForeground#FF85B5
  • editorOverviewRuler.addedForeground#9EEBCF
  • editorOverviewRuler.deletedForeground#FF3D6D
  • editorOverviewRuler.errorForeground#FF3D6D
  • editorOverviewRuler.findMatchForeground#FFD28ACC
  • editorOverviewRuler.infoForeground#8DD6FF
  • editorOverviewRuler.modifiedForeground#FFD28A
  • editorOverviewRuler.selectionHighlightForeground#FF85B566
  • editorOverviewRuler.warningForeground#FFB088
  • editorRuler.foreground#33333D
  • editorSuggestWidget.background#26262E
  • editorSuggestWidget.border#3E3E48
  • editorSuggestWidget.focusHighlightForeground#FFC8DD
  • editorSuggestWidget.foreground#D8CDD4
  • editorSuggestWidget.highlightForeground#FF85B5
  • editorSuggestWidget.selectedBackground#FF85B524
  • editorSuggestWidget.selectedForeground#FFC8DD
  • editorWarning.foreground#FFB088
  • editorWhitespace.foreground#3E3E48
  • editorWidget.background#26262E
  • editorWidget.border#3E3E48
  • editorWidget.foreground#D8CDD4
  • errorForeground#FF3D6D
  • extensionBadge.remoteBackground#FF85B5
  • extensionBadge.remoteForeground#1A1A20
  • extensionButton.prominentBackground#FF85B5
  • extensionButton.prominentForeground#1A1A20
  • extensionButton.prominentHoverBackground#E58BA8
  • focusBorder#FF85B5
  • foreground#D8CDD4
  • gitDecoration.addedResourceForeground#9EEBCF
  • gitDecoration.conflictingResourceForeground#FF2DA0
  • gitDecoration.deletedResourceForeground#FF3D6D
  • gitDecoration.ignoredResourceForeground#7C6C76
  • gitDecoration.modifiedResourceForeground#FFD28A
  • gitDecoration.renamedResourceForeground#B6A0E8
  • gitDecoration.stageDeletedResourceForeground#FF3D6D
  • gitDecoration.stageModifiedResourceForeground#FFD28A
  • gitDecoration.submoduleResourceForeground#B6A0E8
  • gitDecoration.untrackedResourceForeground#9EEBCF
  • icon.foreground#B09AA4
  • input.background#2C2C36
  • input.border#3E3E48
  • input.foreground#D8CDD4
  • input.placeholderForeground#7C6C76
  • inputOption.activeBackground#FF85B526
  • inputOption.activeBorder#FF85B5
  • inputOption.activeForeground#FFC8DD
  • inputValidation.errorBackground#FF3D6D
  • inputValidation.errorBorder#FF3D6D
  • inputValidation.errorForeground#1A1A20
  • inputValidation.infoBackground#8DD6FF
  • inputValidation.infoBorder#8DD6FF
  • inputValidation.infoForeground#1A1A20
  • inputValidation.warningBackground#FFB088
  • inputValidation.warningBorder#FFB088
  • inputValidation.warningForeground#1A1A20
  • list.activeSelectionBackground#FF85B514
  • list.activeSelectionForeground#FFC8DD
  • list.dropBackground#FF85B51F
  • list.errorForeground#FF3D6D
  • list.focusBackground#FF85B51A
  • list.focusForeground#D8CDD4
  • list.focusOutline#FF85B566
  • list.highlightForeground#FF85B5
  • list.hoverBackground#FF85B50A
  • list.hoverForeground#D8CDD4
  • list.inactiveSelectionBackground#FF85B50F
  • list.inactiveSelectionForeground#D8CDD4
  • list.warningForeground#FFB088
  • menu.background#26262E
  • menu.border#3E3E48
  • menu.foreground#D8CDD4
  • menu.selectionBackground#FF85B51F
  • menu.selectionForeground#FFC8DD
  • menu.separatorBackground#33333D
  • minimap.background#1C1C22
  • minimap.errorHighlight#FF3D6D
  • minimap.findMatchHighlight#FFD28ACC
  • minimap.selectionHighlight#FF85B566
  • minimap.warningHighlight#FFB088
  • minimapGutter.addedBackground#9EEBCF
  • minimapGutter.deletedBackground#FF3D6D
  • minimapGutter.modifiedBackground#FFD28A
  • notificationCenter.border#3E3E48
  • notificationCenterHeader.background#1C1C22
  • notificationCenterHeader.foreground#D8CDD4
  • notificationLink.foreground#FF85B5
  • notifications.background#26262E
  • notifications.border#3E3E48
  • notifications.foreground#D8CDD4
  • notificationsErrorIcon.foreground#FF3D6D
  • notificationsInfoIcon.foreground#8DD6FF
  • notificationsWarningIcon.foreground#FFB088
  • notificationToast.border#3E3E48
  • panel.background#1A1A20
  • panel.border#33333D
  • panelInput.border#3E3E48
  • panelSection.border#33333D
  • panelSectionHeader.background#1C1C22
  • panelSectionHeader.foreground#D8CDD4
  • panelTitle.activeBorder#FF85B5
  • panelTitle.activeForeground#D8CDD4
  • panelTitle.inactiveForeground#7C6C76
  • peekView.border#FF85B5
  • peekViewEditor.background#18181E
  • peekViewEditor.matchHighlightBackground#FFD28A40
  • peekViewEditorGutter.background#18181E
  • peekViewResult.background#202027
  • peekViewResult.fileForeground#D8CDD4
  • peekViewResult.lineForeground#B09AA4
  • peekViewResult.matchHighlightBackground#FF85B52E
  • peekViewResult.selectionBackground#FF85B51F
  • peekViewResult.selectionForeground#FFC8DD
  • peekViewTitle.background#1C1C22
  • peekViewTitleDescription.foreground#B09AA4
  • peekViewTitleLabel.foreground#D8CDD4
  • pickerGroup.border#33333D
  • pickerGroup.foreground#FF85B5
  • progressBar.background#FF85B5
  • quickInput.background#26262E
  • quickInput.foreground#D8CDD4
  • quickInputList.focusBackground#FF85B51F
  • quickInputList.focusForeground#FFC8DD
  • quickInputList.focusIconForeground#FF85B5
  • quickInputTitle.background#1C1C22
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#FF85B54D
  • scrollbarSlider.background#FFFFFF10
  • scrollbarSlider.hoverBackground#FF85B52E
  • selection.background#FF85B540
  • sideBar.background#202027
  • sideBar.border#33333D
  • sideBar.foreground#B09AA4
  • sideBarSectionHeader.background#1C1C22
  • sideBarSectionHeader.border#33333D
  • sideBarSectionHeader.foreground#D8CDD4
  • sideBarTitle.foreground#D8CDD4
  • statusBar.background#17171D
  • statusBar.border#33333D
  • statusBar.debuggingBackground#B6A0E826
  • statusBar.debuggingBorder#33333D
  • statusBar.debuggingForeground#B6A0E8
  • statusBar.foreground#B09AA4
  • statusBar.noFolderBackground#17171D
  • statusBar.noFolderBorder#33333D
  • statusBar.noFolderForeground#B09AA4
  • statusBarItem.activeBackground#FF85B526
  • statusBarItem.errorBackground#FF3D6D
  • statusBarItem.errorForeground#1A1A20
  • statusBarItem.hoverBackground#FF85B514
  • statusBarItem.prominentBackground#FF85B52E
  • statusBarItem.prominentForeground#FFC8DD
  • statusBarItem.prominentHoverBackground#FF85B540
  • statusBarItem.remoteBackground#FF85B5
  • statusBarItem.remoteForeground#1A1A20
  • statusBarItem.warningBackground#FFB088
  • statusBarItem.warningForeground#1A1A20
  • symbolIcon.classForeground#93C9EC
  • symbolIcon.constantForeground#B6A0E8
  • symbolIcon.enumeratorForeground#93C9EC
  • symbolIcon.enumeratorMemberForeground#93C9EC
  • symbolIcon.functionForeground#B6A0E8
  • symbolIcon.interfaceForeground#93C9EC
  • symbolIcon.keywordForeground#FF85B5
  • symbolIcon.methodForeground#B6A0E8
  • symbolIcon.moduleForeground#B6A0E8
  • symbolIcon.numberForeground#E8C794
  • symbolIcon.propertyForeground#FFC8DD
  • symbolIcon.stringForeground#ECAC8E
  • symbolIcon.typeParameterForeground#93C9EC
  • symbolIcon.variableForeground#D8CDD4
  • tab.activeBackground#1C1C22
  • tab.activeBorder#00000000
  • tab.activeBorderTop#FF85B5
  • tab.activeForeground#D8CDD4
  • tab.border#33333D
  • tab.hoverBackground#26262E
  • tab.hoverForeground#D8CDD4
  • tab.inactiveBackground#17171D
  • tab.inactiveForeground#B09AA4
  • tab.unfocusedActiveBorderTop#E58BA8
  • tab.unfocusedActiveForeground#B09AA4
  • terminal.ansiBlack#17171D
  • terminal.ansiBlue#8DD6FF
  • terminal.ansiBrightBlack#7C6C76
  • terminal.ansiBrightBlue#A8B5FF
  • terminal.ansiBrightCyan#C8B2EC
  • terminal.ansiBrightGreen#B7F0DB
  • terminal.ansiBrightMagenta#FF2DA0
  • terminal.ansiBrightRed#FF6B8A
  • terminal.ansiBrightWhite#D8CDD4
  • terminal.ansiBrightYellow#FFE0A8
  • terminal.ansiCyan#B6A0E8
  • terminal.ansiGreen#9EEBCF
  • terminal.ansiMagenta#FF85B5
  • terminal.ansiRed#FF3D6D
  • terminal.ansiWhite#B09AA4
  • terminal.ansiYellow#FFD28A
  • terminal.background#1A1A20
  • terminal.border#33333D
  • terminal.foreground#D8CDD4
  • terminal.selectionBackground#FF85B540
  • terminalCursor.background#1A1A20
  • terminalCursor.foreground#FF85B5
  • textBlockQuote.background#202027
  • textBlockQuote.border#FF85B5
  • textCodeBlock.background#26262E
  • textLink.activeForeground#FFC8DD
  • textLink.foreground#FF85B5
  • textPreformat.foreground#B6A0E8
  • textSeparator.foreground#33333D
  • titleBar.activeBackground#17171D
  • titleBar.activeForeground#D8CDD4
  • titleBar.border#33333D
  • titleBar.inactiveBackground#131318
  • titleBar.inactiveForeground#7C6C76
  • tree.indentGuidesStroke#33333D
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7C6C76italic
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#FF85B5
variable.language, variable.language.this, variable.language.self, variable.language.super#FF85B5italic
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#FF96C0
punctuation, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.block, punctuation.definition.dict, meta.brace, meta.delimiter#C79FAF
string, string.quoted, string.quoted.single, string.quoted.double, string.template, string.unquoted, punctuation.definition.string#ECAC8E
string.regexp, string.regexp constant.character.escape#A6DEC6
constant.character.escape, constant.character.escape.backslash#A6DEC6
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, keyword.other.unit#E8C794
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan, constant.language.infinity, support.constant#B6A0E8
constant.other, variable.other.constant#B6A0E8
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#B6A0E8
meta.definition.function entity.name.function, meta.function entity.name.function#B6A0E8
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#93C9EC
variable.parameter, variable.parameter.function, meta.parameter, meta.function.parameters variable#FFB6D0italic
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#FFC8DD
variable, variable.other, variable.other.readwrite, variable.other.object, variable.other.constant.object, string constant.other.placeholder#D8CDD4
entity.name.tag, meta.tag, meta.tag.sgml, punctuation.definition.tag#FF6FBE
entity.other.attribute-name, meta.attribute#FFB6D0
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css#E8C794
entity.other.attribute-name.id.css#ECAC8E
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.sass, support.type.property-name.less#FFC8DD
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css#B6A0E8
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#B6A0E8italic
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#FF85B5bold
markup.bold, markup.bold string#FFC8DDbold
markup.italic, markup.italic string#FFC8DDitalic
markup.bold markup.italic, markup.italic markup.bold, markup.bold markup.italic string, markup.italic markup.bold string#FFC8DDbold italic
markup.quote#B09AA4italic
markup.quote punctuation.definition.blockquote.markdown#7C6C76
string.other.link, string.other.link.title.markdown, markup.underline.link#93C9EC
string.other.link.description.title.markdown#B6A0E8
constant.other.reference.link.markdown#E8C794
markup.inline.raw, markup.inline.raw.markdown#B6A0E8
markup.inline.raw.markdown punctuation.definition.raw.markdown#7C6C76
markup.raw.block, markup.raw.block.fenced.markdown#B6A0E8
variable.language.fenced.markdown, fenced_code.block.language.markdown#7C6C76
meta.separator.markdown#FF85B5bold
punctuation.definition.list_item.markdown, beginning.punctuation.definition.list.markdown#FF85B5
text.html.markdown, meta.paragraph.markdown#D8CDD4
*url*, *link*, *uri*underline
source.json meta.structure.dictionary.json support.type.property-name.json#FF85B5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#B6A0E8
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#93C9EC
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#ECAC8E
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#E8C794
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#A6DEC6
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#FFB6D0
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#FFC8DD
entity.name.tag.yaml#FF85B5
support.class.component, support.class.component.jsx, support.class.component.tsx, entity.name.tag.tsx, entity.name.tag.jsx#93C9EC
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#FFB6D0
punctuation.definition.template-expression, punctuation.section.embedded#FF96C0
meta.embedded, source.groovy.embedded#D8CDD4
variable.other.readwrite.alias, meta.import variable, meta.export variable#D8CDD4
entity.name.module, entity.name.namespace, support.module#B6A0E8