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.activeBackground
  • activityBar.activeBorder#F05454
  • activityBar.activeFocusBorder
  • activityBar.background#1A1E23
  • activityBar.border#3747578D
  • activityBar.dropBorder#F054544C
  • activityBar.foreground#ADB5BDFF
  • activityBar.inactiveForeground#374757
  • activityBarBadge.background#54A2F0FF
  • activityBarBadge.foreground#000000
  • badge.background#54A2F0FF
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.background
  • breadcrumb.focusForeground#DDDDDD
  • breadcrumb.foreground#71757B
  • breadcrumbPicker.background#1A1E23
  • button.background#54F0A2FF
  • button.border
  • button.foreground#000000
  • button.hoverBackground
  • button.secondaryBackground#374757
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground
  • button.separator
  • checkbox.background
  • checkbox.border#3747578D
  • checkbox.foreground#54F0A2FF
  • debugToolBar.background#1A1E23
  • dropdown.background#1A1E23
  • dropdown.border#3747578D
  • dropdown.foreground#DDDDDD
  • dropdown.listBackground#1A1E23
  • editor.background#222831
  • editor.findMatchHighlightBackground
  • editor.findRangeHighlightBackground
  • editor.foreground#DDDDDD
  • editor.lineHighlightBackground#3747578D
  • editor.lineHighlightBorder
  • editor.selectionBackground#374757
  • editor.selectionForeground
  • editor.selectionHighlightBackground
  • editor.wordHighlightBackground
  • editor.wordHighlightStrongBackground
  • editorCursor.foreground#DDDDDD
  • editorGroup.border#3747578D
  • editorGroup.dropBackground#F054544C
  • editorGroupHeader.tabsBackground#1A1E23
  • editorGroupHeader.tabsBorder
  • editorHoverWidget.background#1A1E23
  • editorHoverWidget.border#3747578D
  • editorHoverWidget.foreground
  • editorHoverWidget.highlightForeground
  • editorHoverWidget.statusBarBackground
  • editorIndentGuide.activeBackground#374757
  • editorIndentGuide.background#37475759
  • editorLineNumber.activeForeground#ADB5BDFF
  • editorLineNumber.foreground#374757
  • editorSuggestWidget.background
  • editorSuggestWidget.border#3747578D
  • editorSuggestWidget.focusHighlightForeground
  • editorSuggestWidget.foreground
  • editorSuggestWidget.highlightForeground
  • editorSuggestWidget.selectedBackground
  • editorSuggestWidget.selectedForeground
  • editorSuggestWidget.selectedIconForeground
  • editorSuggestWidgetStatus.foreground
  • editorUnnecessaryCode.border#3747578D
  • editorUnnecessaryCode.opacity
  • editorWidget.background#222831
  • editorWidget.border#3747578D
  • editorWidget.foreground#DDDDDD
  • editorWidget.resizeBorder
  • focusBorder#374757
  • foreground#DDDDDD
  • input.background#1A1E23
  • input.border#3747578D
  • input.foreground#DDDDDD
  • input.placeholderForeground#71757B
  • inputOption.activeBackground#F05454
  • inputOption.activeborder#3747578D
  • inputOption.activeForeground#FFFFFF
  • inputOption.hoverBackground#374757
  • inputValidation.errorBackground#F05454
  • inputValidation.errorBorder#F05454
  • inputValidation.errorForeground#FFFFFF
  • inputValidation.infoBackground#374757
  • inputValidation.infoborder#3747578D
  • inputValidation.infoForeground#FFFFFF
  • inputValidation.warningBackground#F0A254FF
  • inputValidation.warningBorder#F0A254FF
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#374757
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.deemphasizedForeground
  • list.dropBackground#F054544C
  • list.errorForeground
  • list.filterMatchBackground#F054544C
  • list.filterMatchBorder
  • list.focusAndSelectionOutline#374757
  • list.focusBackground#37475773
  • list.focusForeground#FFFFFF
  • list.focusHighlightForeground#F05454
  • list.focusOutline#374757
  • list.highlightForeground#F05454
  • list.hoverBackground#37475759
  • list.hoverForeground#FFFFFF
  • list.inactiveFocusBackground#37475759
  • list.inactiveFocusOutline
  • list.inactiveSelectionBackground#3747578D
  • list.inactiveSelectionForeground#FFFFFF
  • list.inactiveSelectionIconForeground
  • list.invalidItemForeground
  • list.warningForeground
  • listFilterWidget.background#222831
  • listFilterWidget.noMatchesOutline
  • listFilterWidget.outline
  • listFilterWidget.shadow
  • notificationCenter.border#3747578D
  • notificationCenterHeader.background#1A1E23
  • notificationCenterHeader.foreground#DDDDDD
  • notificationLink.foreground#F05454
  • notifications.background#222831
  • notifications.border#3747578D
  • notifications.foreground#DDDDDD
  • notificationsErrorIcon.foreground#F05454
  • notificationsInfoIcon.foreground#54A2F0FF
  • notificationsWarningIcon.foreground#F0A254FF
  • notificationToast.border#3747578D
  • panel.background#1A1E23
  • panel.border#3747578D
  • panel.dropBorder#F054544C
  • panelSection.border#3747578D
  • panelSection.dropBackground#F054544C
  • panelSectionHeader.background#222831
  • panelSectionHeader.foreground#DDDDDD
  • panelTitle.activeBorder#F05454
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#71757B
  • peekView.border#3747578D
  • peekViewEditor.background#1A1E23
  • peekViewEditor.matchHighlightBackground#3747578D
  • peekViewResult.background#37475773
  • peekViewTitle.background#37475773
  • pickerGroup.border#3747578D
  • pickerGroup.foreground#ADB5BDFF
  • progressBar.background#F05454
  • quickInput.background#222831
  • quickInput.foreground#DDDDDD
  • quickInputList.focusBackground#374757
  • quickInputList.focusForeground#FFFFFF
  • quickInputList.focusIconForeground#FFFFFF
  • scrollbarSlider.activeBackground#3747578D
  • scrollbarSlider.background#37475759
  • scrollbarSlider.hoverBackground#37475773
  • searchEditor.findMatchBackground
  • selection.background#3747578D
  • settings.modifiedItemIndicator#F05454
  • sideBar.background#1A1E23
  • sideBar.border#3747578D
  • sideBar.dropBackground#F054544C
  • sideBar.foreground#ADB5BDFF
  • sideBarSectionHeader.background#1A1E23
  • sideBarSectionHeader.border#3747578D
  • sideBarSectionHeader.foreground#ADB5BDFF
  • sideBarTitle.foreground#DDDDDD
  • statusBar.background#222831
  • statusBar.border#3747578D
  • statusBar.debuggingBackground#F05454
  • statusBar.debuggingForeground#DDDDDD
  • statusBar.foreground#ADB5BDFF
  • statusBar.noFolderBackground#374757
  • statusBar.noFolderForeground#DDDDDD
  • statusBarItem.activeBackground
  • statusBarItem.compactHoverBackground
  • statusBarItem.errorBackground
  • statusBarItem.errorForeground
  • statusBarItem.hoverBackground
  • statusBarItem.remoteBackground#222831
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.warningBackground
  • statusBarItem.warningForeground
  • tab.activeBackground#222831
  • tab.activeBorder#222831
  • tab.activeBorderTop#F05454
  • tab.activeForeground#FFFFFF
  • tab.border#3747578D
  • tab.inactiveBackground#1A1E23
  • tab.inactiveForeground#71757B
  • tab.lastPinnedBorder
  • tab.unfocusedActiveBorder
  • tab.unfocusedActiveBorderTop#374757
  • tab.unfocusedActiveForeground#DDDDDD
  • tab.unfocusedHoverForeground#FFFFFF
  • terminal.ansiBlack
  • terminal.ansiBlue
  • terminal.ansiBrightBlack
  • terminal.ansiBrightBlue
  • terminal.ansiBrightCyan
  • terminal.ansiBrightGreen
  • terminal.ansiBrightMagenta
  • terminal.ansiBrightRed
  • terminal.ansiBrightWhite
  • terminal.ansiBrightYellow
  • terminal.ansiCyan
  • terminal.ansiGreen
  • terminal.ansiMagenta
  • terminal.ansiRed
  • terminal.ansiWhite
  • terminal.ansiYellow
  • terminal.background
  • terminal.border#3747578D
  • terminal.dropBackground
  • terminal.findMatchBackground
  • terminal.findMatchBorder
  • terminal.findMatchHighlightBackground
  • terminal.findMatchHighlightBorder
  • terminal.foreground
  • terminal.inactiveSelectionBackground
  • terminal.selectionBackground#374757
  • terminal.selectionForeground
  • terminal.tab.activeBorder#F05454
  • terminalCommandDecoration.defaultBackground
  • terminalCommandDecoration.errorBackground
  • terminalCommandDecoration.successBackground
  • terminalCursor.background
  • terminalCursor.foreground
  • terminalOverviewRuler.cursorForeground
  • terminalOverviewRuler.findMatchForeground
  • textBlockQuote.background
  • textLink.activeForeground#FFFFFF
  • textLink.foreground#54A2F0FF
  • textPreformat.foreground
  • titleBar.activeBackground#222831
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#3747578D
  • titleBar.inactiveBackground#1A1E23
  • titleBar.inactiveForeground#71757B
  • tree.indentGuidesStroke#374757
  • tree.tableColumnsBorder
  • tree.tableOddRowsBackground
  • welcomePage.tileBackground#37475759

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#768390—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#6cb6ff—
entity.name, meta.export.default, meta.definition.variable#f69d50—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#adbac7—
entity.name.function#dcbdfb—
entity.name.tag, support.class.component#8ddb8c—
keyword#f47067—
storage, storage.type#f47067—
storage.modifier.package, storage.modifier.import, storage.type.java#adbac7—
string, string punctuation.section.embedded source#96d0ff—
support#6cb6ff—
meta.property-name#6cb6ff—
variable#f69d50—
variable.other#adbac7—
invalid.broken#ff938aitalic
invalid.deprecated#ff938aitalic
invalid.illegal#ff938aitalic
invalid.unimplemented#ff938aitalic
carriage-return#cdd9e5italic underline
message.error#ff938a—
string variable#6cb6ff—
source.regexp, string.regexp#96d0ff—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#96d0ff—
string.regexp constant.character.escape#8ddb8cbold
support.constant#6cb6ff—
support.variable#6cb6ff—
support.type.property-name.json#8ddb8c—
meta.module-reference#6cb6ff—
punctuation.definition.list.begin.markdown#f69d50—
markup.heading, markup.heading entity.name#6cb6ffbold
markup.quote#8ddb8c—
markup.italic#adbac7italic
markup.bold#adbac7bold
markup.underline—underline
markup.strikethrough—strikethrough
markup.inline.raw#6cb6ff—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ff938a—
punctuation.section.embedded#f47067—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#8ddb8c—
markup.changed, punctuation.definition.changed#f69d50—
markup.ignored, markup.untracked#2d333b—
meta.diff.range#dcbdfbbold
meta.diff.header#6cb6ff—
meta.separator#6cb6ffbold
meta.output#6cb6ff—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#768390—
brackethighlighter.unmatched#ff938a—
constant.other.reference.link, string.other.link#96d0ffunderline
Carnation by vlchristos - VS Code Theme