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.activeBorder#FF8AB4
  • activityBar.background#141518
  • activityBar.border#282A33
  • activityBar.foreground#E4E6F0
  • activityBar.inactiveForeground#767880
  • activityBarBadge.background#FF8AB4
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF8AB4
  • badge.foreground#FFFFFF
  • button.background#2D2F3A
  • button.foreground#E6E8EE
  • button.hoverBackground#2E344D
  • button.secondaryBackground#262830
  • button.secondaryForeground#E4E6F0
  • checkbox.background#1B1C1F
  • checkbox.border#282A33
  • checkbox.foreground#E4E6F0
  • diffEditor.diagonalFill#282A33
  • diffEditor.insertedLineBackground#33887799
  • diffEditor.insertedTextBackground#33887799
  • diffEditor.removedLineBackground#66444499
  • diffEditor.removedTextBackground#66444499
  • disabledForeground#767880
  • dropdown.background#23252D
  • dropdown.border#282A33
  • dropdown.foreground#E4E6F0
  • dropdown.listBackground#23252D
  • editor.background#1B1C1F
  • editor.findMatchBackground#FFD166
  • editor.findMatchForeground#1A1A1D
  • editor.findMatchHighlightBackground#2E344D
  • editor.foldBackground#1F2028
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#3F2B5A
  • editor.lineHighlightBackground#21232B
  • editor.rangeHighlightBackground#2E344D
  • editor.selectionBackground#45336B
  • editor.selectionForeground#FFFFFF
  • editor.wordHighlightBackground#444A5F
  • editor.wordHighlightStrongBackground#444A5F
  • editorBracketHighlight.foreground1#FF8AB4
  • editorBracketHighlight.foreground2#85D1FF
  • editorBracketHighlight.foreground3#E55A8A
  • editorBracketHighlight.foreground4#C0365B
  • editorBracketHighlight.foreground5#FFC0D6
  • editorBracketHighlight.foreground6#D7D755
  • editorBracketHighlight.unexpectedBracket.foreground#D85A8C
  • editorBracketMatch.background#2E344D
  • editorBracketMatch.border#FF8AB4
  • editorCursor.foreground#FF8AB4
  • editorGroupHeader.noTabsBackground#16171D
  • editorGroupHeader.tabsBackground#16171D
  • editorGutter.addedBackground#42E66C
  • editorGutter.background#1B1C1F
  • editorGutter.deletedBackground#D85A8C
  • editorGutter.modifiedBackground#E6B3FF
  • editorIndentGuide.activeBackground1#FF8AB4
  • editorIndentGuide.background1#282A33
  • editorLineNumber.activeForeground#FF8AB4
  • editorLineNumber.foreground#888A93
  • editorRuler.foreground#282A33
  • editorWhitespace.foreground#282A33
  • errorForeground#D85A8C
  • extensionButton.prominentBackground#45336B
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#2E344D
  • focusBorder#FF8AB444
  • foreground#E4E6F0
  • gitDecoration.addedResourceForeground#42E66C
  • gitDecoration.conflictingResourceForeground#FF8AB4
  • gitDecoration.deletedResourceForeground#D85A8C
  • gitDecoration.ignoredResourceForeground#767880
  • gitDecoration.modifiedResourceForeground#E6B3FF
  • gitDecoration.submoduleResourceForeground#D7D755
  • gitDecoration.untrackedResourceForeground#42E66C
  • icon.foreground#C2C6CC
  • input.background#1B1C1F
  • input.border#282A33
  • input.foreground#E4E6F0
  • input.placeholderForeground#767880
  • inputOption.activeBackground#45336B
  • inputOption.activeBorder#FF8AB4
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#45336B
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#45336B
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FF8AB4
  • list.hoverBackground#2E344D
  • list.inactiveFocusBackground#3F2B5A
  • list.inactiveSelectionBackground#3F2B5A
  • menu.background#23252D
  • menu.border#282A3333
  • menu.foreground#E4E6F0
  • menu.selectionBackground#45336B
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#282A33
  • menubar.selectionBackground#2E344D
  • menubar.selectionForeground#E4E6F0
  • minimap.background#1B1C1F
  • minimapSlider.activeBackground#FF8AB488
  • minimapSlider.background#26283033
  • minimapSlider.hoverBackground#2E344D55
  • notificationCenterHeader.background#16171D
  • notifications.background#17181E
  • notifications.border#282A33
  • notifications.foreground#E4E6F0
  • panel.background#16171A
  • panel.border#282A33
  • panelTitle.activeBorder#FF8AB4
  • panelTitle.activeForeground#E4E6F0
  • panelTitle.inactiveForeground#767880
  • peekView.border#FF8AB4
  • peekViewEditor.background#1B1C1F
  • peekViewEditor.matchHighlightBackground#2E344D
  • peekViewResult.background#17181E
  • peekViewResult.matchHighlightBackground#2E344D
  • peekViewResult.selectionBackground#45336B
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#16171D
  • peekViewTitleDescription.foreground#767880
  • peekViewTitleLabel.foreground#E4E6F0
  • pickerGroup.border#282A33
  • pickerGroup.foreground#FF8AB4
  • progressBar.background#FF8AB4
  • quickInput.background#23252D
  • quickInput.foreground#E4E6F0
  • scrollbar.shadow#282A33
  • scrollbarSlider.activeBackground#FF8AB4
  • scrollbarSlider.background#262830
  • scrollbarSlider.hoverBackground#2E344D
  • selection.background#45336B
  • sideBar.background#16171A
  • sideBar.border#282A33
  • sideBar.foreground#E4E6F0
  • sideBarSectionHeader.background#16171D
  • sideBarSectionHeader.border#282A33
  • sideBarSectionHeader.foreground#E4E6F0
  • sideBarTitle.foreground#E4E6F0
  • statusBar.background#16171D
  • statusBar.border#282A33
  • statusBar.debuggingBackground#45336B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E4E6F0
  • statusBar.noFolderBackground#16171D
  • statusBarItem.activeBackground#2E344D
  • statusBarItem.hoverBackground#2E344D
  • statusBarItem.remoteBackground#FF8AB4
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#191A1C
  • tab.activeBorder#FF8AB4
  • tab.activeForeground#E4E6F0
  • tab.activeModifiedBorder#FF8AB4
  • tab.border#282A33
  • tab.hoverBackground#2E344D
  • tab.inactiveBackground#2C2E38
  • tab.inactiveForeground#767880
  • tab.inactiveModifiedBorder#767880
  • tab.unfocusedActiveForeground#767880
  • tab.unfocusedInactiveForeground#767880
  • terminal.ansiBlue#9B6BDF
  • terminal.ansiBrightBlue#9B6BDF
  • terminal.ansiBrightCyan#75D7EC
  • terminal.ansiBrightGreen#42E66C
  • terminal.ansiBrightMagenta#E64747
  • terminal.ansiBrightRed#E356A7
  • terminal.ansiBrightYellow#EFA554
  • terminal.ansiCyan#75D7EC
  • terminal.ansiGreen#42E66C
  • terminal.ansiMagenta#E64747
  • terminal.ansiRed#E356A7
  • terminal.ansiYellow#EFA554
  • terminal.background#1B1C1F
  • terminal.foreground#F8F8F2
  • terminal.selectionBackground#45336B
  • terminalCursor.background#1B1C1F
  • terminalCursor.foreground#FF8AB4
  • textBlockQuote.background#1B1C1F
  • textCodeBlock.background#1B1C1F
  • textLink.activeForeground#FF8AB4
  • textLink.foreground#FF8AB4
  • textPreformat.foreground#F8F8F2
  • titleBar.activeBackground#16171D
  • titleBar.activeForeground#E4E6F0
  • titleBar.border#282A33
  • titleBar.inactiveBackground#2C2E38
  • titleBar.inactiveForeground#767880
  • tree.indentGuidesStroke#282A33
  • widget.shadow#282A33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#F8F8F2
comment, punctuation.definition.comment, string.quoted.docstring#6272A4
storage.type.class.jsdoc, keyword.other.documentation, punctuation.definition.block.tag.jsdoc, entity.name.tag.yaml#E6B3FFbold italic
variable.other.jsdoc, meta.other.type.phpdoc, variable.parameter.jsdoc#85D1FF
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.other, keyword.declaration, storage.type, storage.modifier#E55A8A
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template#85D1FF
constant.character.escape, constant.character.unicode#85D1FF
invalid.illegal.escape#C0365B
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#FDB73E
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, variable.other.constant, support.constant#FDB73E
entity.name.class, entity.name.type.class, entity.name.type, entity.other.inherited-class, support.class, meta.class entity.name#C0365B
entity.name.type.instance, support.type, storage.type.generic, entity.name.type.parameter, meta.type.annotation entity.name.type#C0365B
entity.name.interface, entity.name.type.interface, entity.name.type.enum#FFC0D6
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#C0365B
meta.function-call, meta.function-call entity.name.function, variable.function, support.function#FF8AB4
variable.parameter, meta.function.parameter variable, meta.parameter#FDDCBC
variable, variable.other, variable.other.readwrite, variable.other.object#F8F8F2
variable.other.object.property, variable.other.member, variable.other.property, support.variable.property, meta.object-literal.key#F8F8F2bold
variable.other.global, variable.other.static, support.variable, meta.property-access support.variable#FFD166
variable.language, variable.language.this, variable.language.self, variable.language.super#C0365B
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type#FFD166
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#FFD166
entity.name.tag, meta.tag.sgml, punctuation.definition.tag#FFD166
entity.other.attribute-name, entity.other.attribute-name.html, meta.tag entity.other.attribute-name#FF8AB4
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html string#85D1FF
constant.character.entity, punctuation.definition.entity.html#FDB73E
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#FF8AB4
support.type.property-name, support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#E6B3FF
support.constant.property-value, support.constant.color, support.constant.font-name, meta.property-value#85D1FF
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.id, entity.other.attribute-name.class.css#C0365B
keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#E55A8A
string.regexp, string.regexp.character-class, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, keyword.control.anchor.regexp#85D1FF
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, keyword.operator.or.regexp#FFD166
support.type.property-name.json, meta.structure.dictionary.key.json string, meta.mapping.key string#FF8AB4
entity.name.tag.yaml, meta.mapping.key.yaml string#FF8AB4
punctuation.definition.function.kotlin, keyword.operator.arrow.kotlin#E55A8A
markup.heading, markup.heading.markdown, entity.name.section.markdown#E55A8Abold
markup.bold, punctuation.definition.bold#C0365Bbold
markup.italic, punctuation.definition.italic#FDDCBCitalic
markup.inline.raw, markup.raw.inline, markup.raw.block#85D1FF
markup.underline.link, string.other.link, meta.link#FF8AB4
markup.quote, markup.quote.markdown#6272A4
meta.import variable.other.readwrite.alias, meta.import variable.other.readwrite, meta.export variable.other.readwrite.alias, meta.export variable.other.readwrite, meta.statement.import variable, meta.import-from variable#C0365B
invalid, invalid.illegal#D85A8C