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#E18885
  • activityBar.background#130B0B
  • activityBar.border#302625
  • activityBar.foreground#D8D2C4
  • activityBar.inactiveForeground#8A867C
  • activityBarBadge.background#E88E8B
  • activityBarBadge.foreground#1F211D
  • badge.background#372A29
  • badge.foreground#D8D2C4
  • button.background#E18885
  • button.border#1F211D1A
  • button.foreground#1F211D
  • button.hoverBackground#FDA19E
  • button.secondaryBackground#372A29
  • button.secondaryForeground#D8D2C4
  • button.secondaryHoverBackground#291D1D
  • chat.editedFileForeground#E5A880
  • chat.slashCommandBackground#5C2D2D99
  • chat.slashCommandForeground#FDA19E
  • checkbox.background#1F1413
  • checkbox.border#473938
  • debugToolBar.background#130B0B
  • descriptionForeground#8A867C
  • dropdown.background#1F1413
  • dropdown.border#473938
  • dropdown.foreground#D8D2C4
  • dropdown.listBackground#1F1413
  • editor.background#1F1413
  • editor.findMatchBackground#E5A88088
  • editor.findMatchHighlightBackground#E5A88044
  • editor.foreground#D8D2C4
  • editor.inactiveSelectionBackground#372A29
  • editor.lineHighlightBackground#291D1D
  • editor.selectionBackground#5C2D2D
  • editor.selectionHighlightBackground#5C2D2D88
  • editor.wordHighlightBackground#E5A88033
  • editor.wordHighlightStrongBackground#CFAB6D55
  • editorBracketMatch.background#E5A88055
  • editorBracketMatch.border#E5A880
  • editorCursor.foreground#E88E8B
  • editorGroup.border#302625
  • editorGroupHeader.tabsBackground#130B0B
  • editorGroupHeader.tabsBorder#302625
  • editorGutter.addedBackground#C4979D
  • editorGutter.deletedBackground#ED8B88
  • editorGutter.modifiedBackground#DC96B2
  • editorIndentGuide.activeBackground1#8A867C
  • editorIndentGuide.background1#302625
  • editorLineNumber.activeForeground#E18885
  • editorLineNumber.foreground#8A867C
  • editorOverviewRuler.border#302625
  • editorSuggestWidget.background#291D1D
  • editorSuggestWidget.border#473938
  • editorSuggestWidget.foreground#D8D2C4
  • editorSuggestWidget.highlightForeground#DC96B2
  • editorSuggestWidget.selectedBackground#372A29
  • editorWidget.background#291D1D
  • editorWidget.border#473938
  • errorForeground#ED8B88
  • focusBorder#E18885
  • foreground#D8D2C4
  • icon.foreground#D8D2C4
  • input.background#1F1413
  • input.border#473938
  • input.foreground#D8D2C4
  • input.placeholderForeground#8A867C
  • inputOption.activeBackground#5C2D2D99
  • inputOption.activeBorder#E18885
  • inputOption.activeForeground#FFFFFF
  • keybindingLabel.background#372A29
  • keybindingLabel.border#473938
  • keybindingLabel.foreground#D8D2C4
  • list.activeSelectionBackground#5C2D2D
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#E5A88055
  • list.focusAndSelectionOutline#E18885
  • list.focusBackground#5C2D2D88
  • list.highlightForeground#DC96B2
  • list.hoverBackground#291D1D
  • list.inactiveSelectionBackground#372A29
  • menu.background#1F1413
  • menu.border#473938
  • menu.foreground#D8D2C4
  • menu.selectionBackground#E18885
  • menu.selectionForeground#1F211D
  • notebook.cellBorderColor#302625
  • notebook.selectedCellBackground#5C2D2D66
  • notificationCenterHeader.background#130B0B
  • notificationCenterHeader.foreground#D8D2C4
  • notifications.background#1F1413
  • notifications.border#302625
  • notifications.foreground#D8D2C4
  • panel.background#291D1D
  • panel.border#302625
  • panelInput.border#473938
  • panelTitle.activeBorder#E18885
  • panelTitle.activeForeground#D8D2C4
  • panelTitle.inactiveForeground#8A867C
  • peekViewEditor.background#1F1413
  • peekViewEditor.matchHighlightBackground#E5A88066
  • peekViewResult.background#291D1D
  • peekViewResult.matchHighlightBackground#E5A88066
  • pickerGroup.border#473938
  • pickerGroup.foreground#C4979D
  • ports.iconRunningProcessForeground#E18885
  • progressBar.background#E18885
  • quickInput.background#291D1D
  • quickInput.foreground#D8D2C4
  • searchEditor.textInputBorder#473938
  • settings.dropdownBackground#1F1413
  • settings.dropdownBorder#473938
  • settings.headerForeground#F0E8D8
  • settings.modifiedItemIndicator#E5A880
  • settings.numberInputBorder#473938
  • settings.textInputBorder#473938
  • sideBar.background#130B0B
  • sideBar.border#302625
  • sideBar.foreground#D8D2C4
  • sideBarSectionHeader.background#291D1D
  • sideBarSectionHeader.border#302625
  • sideBarSectionHeader.foreground#D8D2C4
  • sideBarTitle.foreground#F0E8D8
  • statusBar.background#130B0B
  • statusBar.border#302625
  • statusBar.debuggingBackground#E5A880
  • statusBar.debuggingForeground#1F211D
  • statusBar.focusBorder#E18885
  • statusBar.foreground#D8D2C4
  • statusBar.noFolderBackground#1F1413
  • statusBarItem.errorBackground#ED8B88
  • statusBarItem.focusBorder#E18885
  • statusBarItem.hoverBackground#FFFFFF1A
  • statusBarItem.hoverForeground#F0E8D8
  • statusBarItem.prominentBackground#372A29
  • statusBarItem.remoteBackground#E18885
  • statusBarItem.remoteForeground#1F211D
  • tab.activeBackground#1F1413
  • tab.activeBorder#1F1413
  • tab.activeBorderTop#E18885
  • tab.activeForeground#F0E8D8
  • tab.border#302625
  • tab.hoverBackground#1F1413
  • tab.inactiveBackground#130B0B
  • tab.inactiveForeground#8A867C
  • tab.lastPinnedBorder#473938
  • tab.selectedBorderTop#E88E8B
  • tab.unfocusedActiveBorder#1F1413
  • tab.unfocusedActiveBorderTop#302625
  • tab.unfocusedHoverBackground#130B0B
  • terminal.ansiBlack#1A1B18
  • terminal.ansiBlue#DC96B2
  • terminal.ansiBrightBlack#8A867C
  • terminal.ansiBrightBlue#DC96B2
  • terminal.ansiBrightCyan#DBA4C8
  • terminal.ansiBrightGreen#E18885
  • terminal.ansiBrightMagenta#CFAB6D
  • terminal.ansiBrightRed#E88E8B
  • terminal.ansiBrightWhite#F0E8D8
  • terminal.ansiBrightYellow#E5A880
  • terminal.ansiCyan#DBA4C8
  • terminal.ansiGreen#E2A38F
  • terminal.ansiMagenta#CFAB6D
  • terminal.ansiRed#ED8B88
  • terminal.ansiWhite#D8D2C4
  • terminal.ansiYellow#E5A880
  • terminal.background#1F1413
  • terminal.foreground#D8D2C4
  • terminal.inactiveSelectionBackground#372A29
  • terminal.tab.activeBorder#E18885
  • terminalCursor.foreground#E88E8B
  • textBlockQuote.background#291D1D
  • textBlockQuote.border#C4979D
  • textCodeBlock.background#291D1D
  • textLink.activeForeground#E88E8B
  • textLink.foreground#DC96B2
  • textPreformat.background#372A29
  • textPreformat.foreground#D8D2C4
  • textSeparator.foreground#473938
  • titleBar.activeBackground#130B0B
  • titleBar.activeForeground#D8D2C4
  • titleBar.border#302625
  • titleBar.inactiveBackground#1F1413
  • titleBar.inactiveForeground#8A867C
  • welcomePage.progress.foreground#E18885
  • welcomePage.tileBackground#291D1D
  • widget.border#473938

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D8D2C4
emphasisitalic
strongbold
comment#C4979D
constant.language#DC96B2
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#E2A38F
constant.regexp#CFAB6D
entity.name.tag, entity.name.selector#E88E8B
entity.other.attribute-name#DC96B2
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.scss#E5A880
invalid#ED8B88
markup.underlineunderline
markup.bold#DC96B2bold
markup.heading#E88E8Bbold
markup.italic#CFAB6Ditalic
markup.strikethroughstrikethrough
markup.deleted#ED8B88
markup.inserted#C4979D
markup.changed#E5A880
markup.quote#C4979D
markup.inline.raw#E2A38F
meta.diff.header#DC96B2
storage#E88E8B
storage.type#E88E8B
keyword, keyword.control, keyword.operator.expression#E88E8B
keyword.operator#D8D2C4
string, constant.other.symbol#E2A38F
punctuation.definition.string, punctuation.definition.comment#8A867C
support.function, entity.name.function#E5A880
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#DC96B2
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#C6D6DE
variable.language, constant.character.escape#E88E8B
meta.object-literal.key, entity.name.label#C6D6DE
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#E5A880
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#E88E8B
keyword.operator.quantifier.regexp#D8D2C4
constant.character, constant.other.option#DC96B2