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.background#1F2330
  • activityBar.border#0F1320
  • activityBar.dropBackground#0F1320
  • activityBar.foreground#f6f0ff
  • activityBar.inactiveForeground#919CB9
  • activityBarBadge.background#E34F8C
  • badge.background#E34F8C
  • badge.foreground#f8f8f2
  • breadcrumb.activeSelectionForeground#FCF6FF
  • breadcrumb.background#27273A
  • breadcrumb.focusForeground#FCF6FF
  • breadcrumb.foreground#919CB9
  • breadcrumbPicker.background#27273A
  • button.background#E34F8C
  • button.hoverBackground#F661B1
  • debugExceptionWidget.border#24E8D8
  • debugToolBar.background#1F2330
  • debugToolBar.border#24E8D8
  • descriptionForeground#919CB9
  • diffEditor.insertedTextBackground#6EEEC425
  • diffEditor.removedTextBackground#E34F8C25
  • dropdown.background#1F2330
  • dropdown.border#B2CFFB3A
  • dropdown.foreground#D7D6DF
  • dropdown.listBackground#27273A
  • editor.background#27273A
  • editor.findMatchBackground#C7ADFB90
  • editor.findMatchBorder#C7ADFB00
  • editor.findMatchHighlightBackground#C7ADFB30
  • editor.findMatchHighlightBorder#C7ADFB50
  • editor.findRangeHighlightBackground#2A2A46
  • editor.foreground#fcf6ff
  • editor.lineHighlightBackground#2A2A46
  • editor.rangeHighlightBackground#2A2A46
  • editor.selectionBackground#42557BC0
  • editor.selectionForeground#25313e
  • editor.selectionHighlightBackground#42557B50
  • editor.selectionHighlightBorder#42557B
  • editor.snippetFinalTabstopHighlightBackground#1F2330
  • editor.snippetFinalTabstopHighlightBorder#24E8D890
  • editor.snippetTabstopHighlightBackground#1F2330
  • editor.snippetTabstopHighlightBorder#24E8D890
  • editor.wordHighlightBackground#42557B30
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#42557B30
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#2A2A46
  • editorBracketMatch.border#97EE91
  • editorCursor.foreground#97EE91
  • editorError.foreground#F36F98
  • editorGroup.border#0F1320
  • editorGroup.dropBackground#363C4C5f
  • editorGroup.emptyBackground#1F2330
  • editorGroupHeader.tabsBackground#1F2330
  • editorHint.foreground#F2C88C
  • editorHoverWidget.background#27273A
  • editorHoverWidget.border#24E8D8
  • editorIndentGuide.activeBackground#B2CFFB3A
  • editorIndentGuide.background#B2CFFB1A
  • editorLineNumber.activeForeground#24E8D8
  • editorLineNumber.foreground#919CB9
  • editorMarkerNavigation.background#1F2330
  • editorOverviewRuler.border#B2CFFB2A
  • editorOverviewRuler.selectionHighlightForeground#97EE91
  • editorPane.background#1F2330
  • editorRuler.foreground#C7ADFB2f
  • editorSuggestWidget.background#27273A
  • editorSuggestWidget.border#24E8D8
  • editorSuggestWidget.foreground#919CB9
  • editorSuggestWidget.highlightForeground#fcf6ff
  • editorSuggestWidget.selectedBackground#35355190
  • editorWarning.foreground#f2c88c
  • editorWhitespace.foreground#B2CFFB1A
  • editorWidget.background#1F2330
  • editorWidget.border#24E8D8
  • errorForeground#E34F8C
  • extensionButton.prominentBackground#97EE91
  • extensionButton.prominentForeground#0F1320
  • extensionButton.prominentHoverBackground#AFFA90
  • focusBorder#B2CFFB3A
  • foreground#fcf6ff
  • gitDecoration.conflictingResourceForeground#07ADFB
  • gitDecoration.deletedResourceForeground#E34F8C55
  • gitDecoration.ignoredResourceForeground#919CB9af
  • gitDecoration.modifiedResourceForeground#F2C88C
  • gitDecoration.submoduleResourceForeground#C7ADFB5f
  • gitDecoration.untrackedResourceForeground#e7ADFBa0
  • input.background#1F2330
  • input.border#B2CFFB1A
  • input.foreground#D7D6DF
  • input.placeholderForeground#919CB99c
  • inputOption.activeBorder#363C4C
  • inputValidation.errorBackground#1F2330
  • inputValidation.errorBorder#E34F8C
  • inputValidation.errorForeground#E34F8C
  • inputValidation.infoBackground#1F2330
  • inputValidation.infoBorder#919CB9
  • inputValidation.infoForeground#D7D6DF
  • inputValidation.warningBackground#1F2330
  • inputValidation.warningBorder#F2C88C
  • inputValidation.warningForeground#F2C88C
  • list.activeSelectionBackground#899BBF3a
  • list.dropBackground#f6f0ff15
  • list.errorForeground#F36F98
  • list.focusBackground#899BBF30
  • list.focusForeground#f6f0ff
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#919CB915
  • list.hoverForeground#f6f0ffea
  • list.inactiveSelectionBackground#899BBF2c
  • list.inactiveSelectionForeground#fcf6ff
  • list.warningForeground#F2C88C
  • menu.background#27273A
  • menu.foreground#919CB9
  • menu.selectionBackground#899BBF3A
  • menu.selectionBorder#0F13207A
  • menu.selectionForeground#FCF6FF
  • menu.separatorBackground#B2CFFB3A
  • menubar.selectionBackground#899BBF3A
  • menubar.selectionBorder#0F13200A
  • menubar.selectionForeground#FCF6FF
  • notificationCenter.border#24E8D8
  • notificationCenterHeader.background#1F2330
  • notifications.border#24E8D8
  • notificationToast.border#24E8D8
  • panel.background#1F2330
  • panel.border#0F1320
  • panelTitle.activeBorder#24E8D8
  • panelTitle.activeForeground#24E8D8
  • panelTitle.inactiveForeground#919CB9
  • peekView.border#24E8D8
  • peekViewEditor.background#27273A
  • peekViewEditor.matchHighlightBackground#363C4C
  • peekViewResult.background#27273A
  • peekViewResult.matchHighlightBackground#363C4C
  • peekViewResult.selectionBackground#35355190
  • peekViewTitle.background#1F2330
  • pickerGroup.border#B2CFFB1A
  • pickerGroup.foreground#E752A1
  • progressBar.background#24E8D8
  • scrollbar.shadow#0F1320
  • scrollbarSlider.activeBackground#0F1320C0
  • scrollbarSlider.background#06080E4A
  • scrollbarSlider.hoverBackground#0F132090
  • selection.background#94cbf87a
  • settings.checkboxBackground#1F2330
  • settings.checkboxBorder#97EE9150
  • settings.checkboxForeground#97EE91
  • settings.dropdownBackground#1F2330
  • settings.dropdownBorder#B2CFFB1A
  • settings.dropdownForeground#E7ADFB
  • settings.dropdownListBorder#B2CFFB1A
  • settings.headerForeground#24E8D8
  • settings.inactiveSelectedItemBorder#B2CFFB1A
  • settings.modifiedItemForeground#E34F8C
  • settings.modifiedItemIndicator#E34F8C
  • settings.numberInputBackground#1F2330
  • settings.numberInputBorder#B2CFFB1A
  • settings.numberInputForeground#F8C275
  • settings.textInputBackground#1F2330
  • settings.textInputBorder#B2CFFB1A
  • settings.textInputForeground#50DFFE
  • sideBar.background#27273A
  • sideBar.border#0F1320
  • sideBar.dropBackground#363C4C5f
  • sideBar.foreground#919CB9
  • sideBarSectionHeader.background#1F2330
  • sideBarSectionHeader.border#27273A
  • sideBarSectionHeader.foreground#f6f0ff
  • sideBarTitle.foreground#24E8D8
  • statusBar.background#1F2330
  • statusBar.border#0F1320
  • statusBar.debuggingBackground#6EEEC4
  • statusBar.debuggingForeground#27273A
  • statusBar.foreground#919CB9
  • statusBar.noFolderBackground#E34FBC
  • statusBar.noFolderForeground#FCF6FF
  • tab.activeBackground#27273A
  • tab.activeBorder#0000
  • tab.activeForeground#24E8D8
  • tab.activeModifiedBorder#E34F8C
  • tab.border#353551
  • tab.hoverBorder#24E8D8
  • tab.inactiveBackground#1F2330
  • tab.inactiveForeground#919CB9
  • tab.inactiveModifiedBorder#E34F8C90
  • tab.unfocusedActiveBorder#0000
  • tab.unfocusedActiveForeground#47A9BC
  • tab.unfocusedActiveModifiedBorder#E34F8CA0
  • tab.unfocusedHoverBorder#47A9BC
  • tab.unfocusedInactiveForeground#79839C
  • tab.unfocusedInactiveModifiedBorder#E34F8C70
  • terminal.ansiBlack#353551
  • terminal.ansiBlue#C7ADFB
  • terminal.ansiBrightBlack#919CB9
  • terminal.ansiBrightBlue#74D6E9
  • terminal.ansiBrightCyan#8DF9F9
  • terminal.ansiBrightGreen#AFFA90
  • terminal.ansiBrightMagenta#F799C7
  • terminal.ansiBrightRed#F36F98
  • terminal.ansiBrightWhite#D7D6DF
  • terminal.ansiBrightYellow#FAFAA0
  • terminal.ansiCyan#24E8D8
  • terminal.ansiGreen#97F36D
  • terminal.ansiMagenta#E752A1
  • terminal.ansiRed#E34F8C
  • terminal.ansiWhite#FBD3E1
  • terminal.ansiYellow#F8C275
  • terminal.background#27273A
  • terminal.foreground#f6f0ff
  • terminal.selectionBackground#42557B5A
  • terminalCursor.background#0F1320
  • terminalCursor.foreground#97EE91
  • textBlockQuote.background#919CB91c
  • textBlockQuote.border#E34F8C
  • textLink.activeForeground#74D6E9
  • textLink.foreground#40afee
  • textPreformat.foreground#24E8D8
  • textSeparator.foreground#919CB9
  • titleBar.activeBackground#1F2330
  • titleBar.activeForeground#D7D6DF
  • titleBar.border#0F1320
  • titleBar.inactiveBackground#1F2330
  • titleBar.inactiveForeground#919CB9
  • welcomePage.buttonBackground#353551
  • welcomePage.buttonHoverBackground#919CB91c
  • widget.shadow#0F1320

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.brace, punctuation.definition.array, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.dictionary, punctuation.definition.string, punctuation.definition.tag, punctuation.curlybrace, punctuation.fullstop, punctuation.section, punctuation.support, punctuation.terminator, meta.structure.dictionary.json, string.quoted.double.json, constant.other.table-name.sql#F6F0FF—
support.variable, variable, support.type.property-name, variable.other.object.property, meta.object-literal.key.js, string.other.link.description.markdown#8DF9F9—
keyword.var, keyword.const, constant, keyword.struct, keyword.interface, keyword.function, markup.inline.raw, punctuation.parenthesis.named.begin.regexp, punctuation.parenthesis.named.end.regexp, punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, support.constant, support.type, support.class, markup.inserted, entity.name.type, entity.name.class, entity.other.inherited-class, entity.other.attribute-name.id.css#97EE91—
punctuation.terminator, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css#919CB9—
constant.other.database-name.sql, variable.other.object#C5B9DF—
comment#8059A2—
string, markup.quote, markup.bold, markup.italic, string.quoted.single.js, string.quoted.double.js, meta.link.inline.markdown, meta.image.inline.markdown, markup.underline.link, entity.name.type.js#50DFFE—
string.quoted.docstring, storage.type.function, keyword.type, storage.type, punctuation.accessor, punctuation.separator, meta.brace.square.js, meta.brace.square.ts#E7ADFB—
entity.name.class, entity.name.function, entity.name.type, entity.other.attribute-name, entity.other.inherited-class, markup.heading.setext, meta.function-call.generic, support.function, support.other.escape.special.regexp#F36F98—
entity.name.tag, storage, support.function.builtin, variable.language, constant.numeric, variable.parameter, markup.bold, markup.underline, markup.italic, string.quoted.double.css, punctuation.definition.string.css#F8C275—
entity.name.section, keyword, punctuation.definition.heading, punctuation.definition.keyword, keyword.other.DML.sql, constant.character.escape.markdown, entity.other.attribute-name.class.css#E752A1—
meta.brace, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.begin.bracket, punctuation.definition.binding-pattern, punctuation.definition.block, punctuation.definition.bracket, punctuation.definition.dict, punctuation.definition.dictionary, punctuation.definition.end.bracket, punctuation.definition.list, punctuation.definition.parameters, punctuation.definition.string, punctuation.definition.tag, punctuation.other.comma, punctuation.other.period, punctuation.section, punctuation.support, punctuation.terminator#FBD3E1—
punctuation.definition.template-expression, punctuation.section.embedded, storage, markup.deleted, markup.heading, entity.name.section.markdown, token.error-token#E34F8C—
markup.changed, entity.name.filename.find-in-files, markup.quote, keyword.other.unit.px.css, keyword.other.unit.fr.css, keyword.other.unit.s.css, keyword.other.unit.percentage.css#FAFAA0—
markup.fenced_code.block.markdown, keyword.type, keyword.other.alias.sql, meta.functiona.variable.css, variable.argument.css, constant.numeric.line-number.find-in-files - match#C7ADFB—
variable, text.html.markdown, support.constant.property-value.css#FCF6FF—
beginning.punctuation.definition.list.markdown, constant.language.null, constant.language.boolean.true, constant.language.boolean.false, entity.other.attribute-name.pseudo-element.css#F39B35—
meta.link.inline.markdown, meta.image.inline.markdown, markup.underline.link#99ddff—
markup.bold.markdown, punctuation.definition.bold.markdown—bold
entity.other.inherited-class, entity.name.type, entity.name.class, entity.other.inherited-class—underline
comment, entity.other.attribute-name.pseudo-element.css, entity.other.inherited-class, markup.italic.markdown, markup.quote, meta.function.variable.css, punctuation.definition.italic.markdown, punctuation.definition.string.css, storage.type.function, string.quoted.double.css, variable.argument.css, entity.name.tag.custom, entity.name.type.ts, italic, keyword.operator.type.annotation, keyword.control.import, modifier, punctuation.section.embedded, quote, storage.type, storage.type.class, support.class, support.class.builtin, support.constant, support.function.basic_functions, support.function.builtin, support.type.primitive, support.type.property.css, this, type.function, variable.parameter—italic