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#161212
  • activityBar.foreground#A083B9
  • activityBar.inactiveForeground#6E5F75
  • activityBarBadge.background#1FB854
  • activityBarBadge.foreground#000000
  • breadcrumb.separatorForeground#6E5F75
  • button.background#84CBA5
  • button.border#84CBA5
  • button.foreground#000000
  • dropdown.background#110D0D
  • dropdown.border#84CBA5
  • dropdown.foreground#CAC9C9
  • editor.background#1B1717
  • editor.findMatchHighlightBackground#1FB85455
  • editor.findRangeHighlightBackground#1FB85422
  • editor.foreground#CAC9C9
  • editor.lineHighlightBackground#242020
  • editor.selectionBackground#1FB85433
  • editor.selectionForeground#DCE1DF
  • editor.selectionHighlightBackground#1FB85422
  • editorBracketHighlight.foreground1#1FB8AB
  • editorBracketHighlight.foreground2#FFBE00
  • editorBracketHighlight.foreground3#D49D5B
  • editorBracketHighlight.foreground4#BA9AB6
  • editorBracketHighlight.foreground5#A06C6C
  • editorBracketHighlight.foreground6#AA7B47
  • editorBracketMatch.background#1FB85422
  • editorBracketMatch.border#1FB854
  • editorCodeLens.foreground#6E5F75
  • editorCursor.foreground#1FB854
  • editorError.foreground#FF5861
  • editorGroup.border#2C2828
  • editorGroup.dropBackground#1FB85422
  • editorGroup.dropIntoPromptBackground#110D0D
  • editorGroup.dropIntoPromptForeground#CAC9C9
  • editorGroupHeader.tabsBackground#1B1717
  • editorGroupHeader.tabsBorder#1B1717
  • editorHoverWidget.background#110D0D
  • editorHoverWidget.border#84CBA5
  • editorHoverWidget.foreground#DCE1DF
  • editorHoverWidget.highlightForeground#1FB854
  • editorIndentGuide.background#2C2828
  • editorInfo.foreground#1FB8AB
  • editorInlayHint.background#2A2727
  • editorInlayHint.foreground#8E8585
  • editorLightBulb.foreground#FFBE00
  • editorLightBulbAutoFix.foreground#1FB854
  • editorLineNumber.activeForeground#DCE1DF
  • editorLink.activeForeground#1FB8AB
  • editorOverviewRuler.border#2C2828
  • editorOverviewRuler.bracketMatchForeground#1FB85455
  • editorOverviewRuler.errorForeground#FF586188
  • editorOverviewRuler.findMatchForeground#1FB85455
  • editorOverviewRuler.infoForeground#1FB8AB88
  • editorOverviewRuler.warningForeground#FFBE0088
  • editorOverviewRuler.wordHighlightForeground#1FB85433
  • editorOverviewRuler.wordHighlightStrongForeground#1FB85466
  • editorRuler.foreground#2C2828
  • editorSuggestWidget.background#110D0D
  • editorSuggestWidget.foreground#CAC9C9
  • editorSuggestWidget.highlightForeground#1FB854
  • editorSuggestWidget.selectedBackground#1FB85433
  • editorUnicodeHighlight.background#FF586122
  • editorUnicodeHighlight.border#FF5861
  • editorWarning.foreground#FFBE00
  • editorWhitespace.foreground#3C3A3A
  • editorWidget.background#110D0D
  • editorWidget.foreground#CAC9C9
  • focusBorder#84CBA5
  • input.background#110D0D
  • input.border#84CBA5
  • input.foreground#CAC9C9
  • input.placeholderForeground#5C6370
  • inputOption.activeBackground#1FB85422
  • inputOption.activeBorder#1FB854
  • inputOption.activeForeground#DCE1DF
  • list.activeSelectionBackground#1FB85433
  • list.activeSelectionForeground#DCE1DF
  • list.hoverBackground#1FB85422
  • list.hoverForeground#DCE1DF
  • list.inactiveSelectionBackground#2A2727
  • list.inactiveSelectionForeground#CAC9C9
  • panel.background#1B1717
  • panel.border#A083B9
  • panelTitle.activeBorder#A083B9
  • panelTitle.activeForeground#84CBA5
  • panelTitle.hoverForeground#DCE1DF
  • panelTitle.inactiveForeground#6E6B6B
  • peekViewEditor.background#1B1717
  • peekViewResult.background#110D0D
  • peekViewTitle.background#110D0D
  • scrollbarSlider.activeBackground#84CBA5
  • scrollbarSlider.background#84CBA544
  • scrollbarSlider.hoverBackground#84CBA566
  • settings.dropdownBorder#84CBA5
  • settings.textInputBorder#84CBA5
  • sideBar.background#161212
  • sideBar.foreground#CAC9C9
  • sideBarSectionHeader.foreground#1FB8AB
  • sideBarTitle.foreground#1FB8AB
  • statusBar.background#161212
  • statusBar.debuggingBackground#FF5861
  • statusBar.debuggingForeground#000000
  • statusBar.noFolderBackground#161212
  • tab.activeBackground#1B1717
  • tab.activeForeground#DCE1DF
  • tab.border#1B1717
  • tab.hoverBackground#1FB85411
  • tab.inactiveBackground#161212
  • tab.inactiveForeground#888888
  • tab.unfocusedActiveForeground#AAAAAA
  • tab.unfocusedHoverBackground#1FB85411
  • tab.unfocusedInactiveForeground#555555
  • terminal.ansiBlack#2C2828
  • terminal.ansiBlue#1FB8AB
  • terminal.ansiBrightBlack#3C3A3A
  • terminal.ansiBrightBlue#74D9D0
  • terminal.ansiBrightCyan#AAEEDD
  • terminal.ansiBrightGreen#2BFF88
  • terminal.ansiBrightMagenta#D9A5D4
  • terminal.ansiBrightRed#FF7373
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE36E
  • terminal.ansiCyan#84CBA5
  • terminal.ansiGreen#1FB854
  • terminal.ansiMagenta#BA9AB6
  • terminal.ansiRed#FF5861
  • terminal.ansiWhite#DCE1DF
  • terminal.ansiYellow#FFBE00
  • terminal.background#1B1717
  • terminal.foreground#CAC9C9
  • terminalCursor.foreground#84CBA5
  • titleBar.activeBackground#161212
  • titleBar.activeForeground#CAC9C9
  • titleBar.border#2C2828
  • titleBar.inactiveBackground#161212
  • titleBar.inactiveForeground#6E6B6B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.import, meta.import.ts, meta.import.js#BA9AB6—
meta.jsx.children#1EB88E—
entity.other.attribute-name.jsx, meta.tag.attributes#A06C6C—
storage.type.function.arrow#1FB854—
meta.enum#FFBE00—
meta.return-type#BA9AB6—
meta.arrow#1FB854—
markup.inserted#1FB854italic
markup.deleted#FF5861italic
markup.inline.raw#AA7B47italic
markup.underline#1FB854underline
markup.strikethrough#FF5861strikethrough
constant.character.escape#1FB854bold
meta.annotation#D49D5B—
keyword.other.unit#AA7B47—
support.type.property-name.json#A06C6C—
meta.structure.dictionary.json string.quoted.double.json#1EB88E—
comment, punctuation.definition.comment#c47f47italic
string, constant.other.symbol#1EB88E—
constant.numeric#FFBE00bold
constant.language.boolean, constant.language#1FB854bold
keyword, storage.type, storage.modifier#1FB854—
keyword.operator#1FB854—
variable, identifier, meta.object-literal.key#BFA89C—
entity.name.function, support.function, meta.function-call#1FB854—
variable.parameter#A083B9—
entity.name.type, support.type, entity.name.class#AA7B47—
support.constant, constant.other#1EB88E—
punctuation, punctuation.definition.parameters#999999—
invalid, invalid.illegal#000000—
markup.heading#FFBE00bold
markup.list#1FB854—
markup.bold#1FB854bold
markup.italic, markup.quote#AB7F8Citalic
meta.tag, punctuation.definition.tag, punctuation.separator.key-value, punctuation.definition.jsx#1FB854—
entity.name.tag, meta.tag.jsx, support.class.component#BA9AB6—
keyword.operator.ternary#FFBE00—
meta.brace, punctuation.section.block, punctuation.terminator.statement#BA9AB6—
meta.annotation, storage.type.annotation#D49D5B—
variable.other.readwrite, support.variable.property#DCE1DF—
entity.other.attribute-name#A06C6C—
support.class#D9605B—
support.type.property-name#B2643C—
constant.character#C87C55bold
source.diff#C74854—
meta.function-call, entity.name.function, support.function#D9605B—
meta.import#D9605B—
entity.name.module#E26A2C—
keyword.control.flow#C74854bold
Sprinkle Pack by Kagan Mamak - VS Code Theme