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#0E0A16
  • activityBar.border#1A0F22
  • activityBar.foreground#EEC0D4
  • activityBar.inactiveForeground#543253
  • activityBarBadge.background#276188
  • activityBarBadge.foreground#EEC0D4
  • badge.background#276188
  • badge.foreground#EEC0D4
  • breadcrumb.activeSelectionForeground#F7D0BD
  • breadcrumb.focusForeground#EEC0D4
  • breadcrumb.foreground#543253
  • breadcrumbPicker.background#120818
  • button.background#276188
  • button.foreground#EEC0D4
  • button.hoverBackground#3A7EAA
  • button.secondaryBackground#543253
  • button.secondaryForeground#EEC0D4
  • descriptionForeground#C8A0B8
  • diffEditor.insertedTextBackground#4E8FA820
  • diffEditor.removedTextBackground#A8507020
  • disabledForeground#543253
  • dropdown.background#120818
  • dropdown.border#3A1E3A
  • dropdown.foreground#EEC0D4
  • editor.background#1A0F22
  • editor.findMatchBackground#F7D0BD55
  • editor.findMatchHighlightBackground#F7D0BD28
  • editor.foreground#EEC0D4
  • editor.lineHighlightBackground#20142A
  • editor.rangeHighlightBackground#54325322
  • editor.selectionBackground#54325355
  • editor.selectionHighlightBackground#54325333
  • editor.wordHighlightBackground#27618833
  • editor.wordHighlightStrongBackground#27618855
  • editorBracketMatch.background#27618844
  • editorBracketMatch.border#276188
  • editorCursor.foreground#EEC0D4
  • editorError.foreground#C06080
  • editorGroupHeader.tabsBackground#0E0A16
  • editorGroupHeader.tabsBorder#0E0A16
  • editorGutter.addedBackground#4E8FA8
  • editorGutter.background#160A1E
  • editorGutter.deletedBackground#A85070
  • editorGutter.modifiedBackground#276188
  • editorHint.foreground#EEC0D4
  • editorHoverWidget.background#120818
  • editorHoverWidget.border#3A1E3A
  • editorIndentGuide.activeBackground#54325399
  • editorIndentGuide.background#2A153066
  • editorInfo.foreground#4E8FA8
  • editorLineNumber.activeForeground#543253
  • editorLineNumber.foreground#3A1E3A
  • editorOverviewRuler.border#1A0F22
  • editorRuler.foreground#2A1530
  • editorSuggestWidget.background#120818
  • editorSuggestWidget.border#3A1E3A
  • editorSuggestWidget.foreground#EEC0D4
  • editorSuggestWidget.highlightForeground#F7D0BD
  • editorSuggestWidget.selectedBackground#20142A
  • editorWarning.foreground#F7D0BD
  • editorWhitespace.foreground#2A1530
  • editorWidget.background#120818
  • editorWidget.border#543253
  • errorForeground#C06080
  • focusBorder#276188
  • foreground#EEC0D4
  • gitDecoration.addedResourceForeground#4E8FA8
  • gitDecoration.conflictingResourceForeground#D090B8
  • gitDecoration.deletedResourceForeground#C06080
  • gitDecoration.ignoredResourceForeground#543253
  • gitDecoration.modifiedResourceForeground#F7D0BD
  • gitDecoration.untrackedResourceForeground#7AAAA0
  • icon.foreground#EEC0D4
  • input.background#120818
  • input.border#3A1E3A
  • input.foreground#EEC0D4
  • input.placeholderForeground#543253
  • inputOption.activeBackground#20142A
  • inputOption.activeBorder#276188
  • inputOption.activeForeground#F7D0BD
  • list.activeSelectionBackground#20142A
  • list.activeSelectionForeground#F7D0BD
  • list.focusBackground#20142A
  • list.highlightForeground#F7D0BD
  • list.hoverBackground#1E1226
  • list.hoverForeground#EEC0D4
  • list.inactiveSelectionBackground#1A0F22
  • list.inactiveSelectionForeground#EEC0D4
  • menu.background#120818
  • menu.border#3A1E3A
  • menu.foreground#EEC0D4
  • menu.selectionBackground#20142A
  • menu.selectionForeground#F7D0BD
  • menu.separatorBackground#3A1E3A
  • menubar.selectionBackground#1A0F22
  • menubar.selectionForeground#EEC0D4
  • notifications.background#120818
  • notifications.border#3A1E3A
  • notifications.foreground#EEC0D4
  • panel.background#0E0A16
  • panel.border#1A0F22
  • panelTitle.activeBorder#276188
  • panelTitle.activeForeground#EEC0D4
  • panelTitle.inactiveForeground#543253
  • scrollbarSlider.activeBackground#543253AA
  • scrollbarSlider.background#2A153066
  • scrollbarSlider.hoverBackground#3A1E3A88
  • selection.background#54325344
  • settings.headerForeground#F7D0BD
  • settings.modifiedItemIndicator#276188
  • sideBar.background#140B1C
  • sideBar.border#1A0F22
  • sideBar.foreground#C8A0B8
  • sideBarSectionHeader.background#1A0F22
  • sideBarSectionHeader.border#0E0A16
  • sideBarSectionHeader.foreground#EEC0D4
  • sideBarTitle.foreground#EEC0D4
  • statusBar.background#543253
  • statusBar.border#3A1E3A
  • statusBar.debuggingBackground#3A527A
  • statusBar.debuggingForeground#F7D0BD
  • statusBar.foreground#EEC0D4
  • statusBar.noFolderBackground#0E0A16
  • statusBarItem.hoverBackground#3A1E3A
  • statusBarItem.remoteBackground#276188
  • statusBarItem.remoteForeground#EEC0D4
  • tab.activeBackground#1A0F22
  • tab.activeBorder#276188
  • tab.activeForeground#F7D0BD
  • tab.border#0E0A16
  • tab.hoverBackground#20142A
  • tab.hoverForeground#EEC0D4
  • tab.inactiveBackground#0E0A16
  • tab.inactiveForeground#543253
  • terminal.ansiBlack#0E0A16
  • terminal.ansiBlue#276188
  • terminal.ansiBrightBlack#543253
  • terminal.ansiBrightBlue#3A7EAA
  • terminal.ansiBrightCyan#4E8FA8
  • terminal.ansiBrightGreen#7AAAA0
  • terminal.ansiBrightMagenta#D090B8
  • terminal.ansiBrightRed#C06080
  • terminal.ansiBrightWhite#F7D0BD
  • terminal.ansiBrightYellow#F0C0A0
  • terminal.ansiCyan#3A7090
  • terminal.ansiGreen#5A8878
  • terminal.ansiMagenta#A07090
  • terminal.ansiRed#A05070
  • terminal.ansiWhite#EEC0D4
  • terminal.ansiYellow#D0A888
  • terminal.background#0E0A16
  • terminal.foreground#EEC0D4
  • terminal.selectionBackground#54325355
  • terminalCursor.background#0E0A16
  • terminalCursor.foreground#EEC0D4
  • titleBar.activeBackground#0E0A16
  • titleBar.activeForeground#EEC0D4
  • titleBar.border#1A0F22
  • titleBar.inactiveBackground#0A0712
  • titleBar.inactiveForeground#543253
  • widget.shadow#0E0A1699

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#543253italic
keyword, keyword.control, storage.type, storage.modifier, keyword.operator.new#276188
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#276188italic
keyword.operator#C8A0B8
string, string.quoted, string.template#F7D0BD
constant.character.escape, string.regexp#F0C0D8
constant.numeric#F0C0A0
constant.language#4E8FA8bold
variable.other.constant#F7D0BD
entity.name.function, support.function, meta.function-call entity.name.function#4E8FA8bold
variable.parameter#EEC0D4italic
entity.name.class, entity.name.type, entity.other.inherited-class, support.class#D4A0C0bold
entity.name.type.interface#D4A0C0italic
variable, variable.other#EEC0D4
variable.other.property, support.variable.property, meta.object-literal.key#D8B0C8
entity.name.tag#276188
entity.other.attribute-name#EEC0D4
entity.other.attribute-name.class, entity.other.attribute-name.id#F7D0BD
support.type.property-name#4E8FA8
support.constant.property-value#F7D0BD
keyword.other.unit#F0C0A0
punctuation, punctuation.definition#A080A0
variable.language.this, variable.language.self#276188italic
meta.decorator, entity.name.function.decorator#F7D0BDitalic
support.type.property-name.json#4E8FA8
markup.heading#EEC0D4bold
markup.bold#F7D0BDbold
markup.italic#EEC0D4italic
markup.inline.raw#4E8FA8
markup.underline.link#276188underline
invalid#C06080strikethrough
Pepe Themes by pepeelpollo - VS Code Theme