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#000000
  • activityBar.border#f0b48c
  • activityBar.foreground#d97757
  • activityBar.inactiveForeground#e4e3dd
  • activityBarBadge.background#d97757
  • activityBarBadge.foreground#000000
  • badge.background#d97757
  • badge.foreground#000000
  • button.background#d97757
  • button.border#f0b48c
  • button.foreground#000000
  • button.hoverBackground#f0b48c
  • contrastActiveBorder#d97757
  • contrastBorder#f0b48c
  • debugIcon.breakpointDisabledForeground#c3c2b7
  • debugIcon.breakpointForeground#ec7e7e
  • debugIcon.continueForeground#6da7ec
  • debugIcon.pauseForeground#fab219
  • debugIcon.restartForeground#6da7ec
  • debugIcon.startForeground#5cc95c
  • debugIcon.stepIntoForeground#6da7ec
  • debugIcon.stepOutForeground#6da7ec
  • debugIcon.stepOverForeground#6da7ec
  • debugIcon.stopForeground#ec7e7e
  • descriptionForeground#e4e3dd
  • diffEditor.border#f0b48c
  • diffEditor.insertedTextBackground#5cc95c33
  • diffEditor.removedTextBackground#ec7e7e33
  • dropdown.background#000000
  • dropdown.border#f0b48c
  • editor.background#000000
  • editor.findMatchBackground#d97757aa
  • editor.findMatchHighlightBackground#d9775766
  • editor.foreground#ffffff
  • editor.lineHighlightBorder#f0b48c
  • editor.selectionBackground#d9775766
  • editor.selectionHighlightBackground#d9775744
  • editor.wordHighlightBackground#d9775744
  • editorBracketHighlight.foreground1#d97757
  • editorBracketHighlight.foreground2#bcd1ca
  • editorBracketHighlight.foreground3#cbcadb
  • editorBracketHighlight.foreground4#5cc95c
  • editorBracketHighlight.foreground5#f0b48c
  • editorBracketHighlight.foreground6#ebc9b7
  • editorBracketHighlight.unexpectedBracket.foreground#ec7e7e
  • editorBracketMatch.background#d9775744
  • editorBracketMatch.border#d97757
  • editorCursor.foreground#d97757
  • editorError.foreground#ec7e7e
  • editorGroup.border#f0b48c
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#f0b48c
  • editorGutter.addedBackground#5cc95c
  • editorGutter.deletedBackground#ec7e7e
  • editorGutter.errorBackground#ec7e7e
  • editorGutter.modifiedBackground#fab219
  • editorGutter.warningBackground#fab219
  • editorHint.foreground#bcd1ca
  • editorIndentGuide.activeBackground1#f0b48c
  • editorIndentGuide.background1#4a4840
  • editorInfo.foreground#6da7ec
  • editorLineNumber.activeForeground#d97757
  • editorLineNumber.foreground#c3c2b7
  • editorOverviewRuler.errorForeground#ec7e7e
  • editorOverviewRuler.warningForeground#fab219
  • editorRuler.foreground#4a4840
  • editorUnnecessaryCode.border#c3c2b7
  • editorWarning.foreground#fab219
  • editorWhitespace.foreground#5c5a52
  • focusBorder#d97757
  • foreground#ffffff
  • gitDecoration.addedResourceForeground#5cc95c
  • gitDecoration.deletedResourceForeground#ec7e7e
  • gitDecoration.ignoredResourceForeground#c3c2b7
  • gitDecoration.modifiedResourceForeground#fab219
  • gitDecoration.untrackedResourceForeground#bcd1ca
  • input.background#000000
  • input.border#f0b48c
  • input.foreground#ffffff
  • input.placeholderForeground#c3c2b7
  • inputOption.activeBorder#d97757
  • list.activeSelectionBackground#d9775733
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9775733
  • list.focusOutline#d97757
  • list.hoverBackground#d9775722
  • list.inactiveSelectionBackground#00000000
  • notificationCenter.border#f0b48c
  • notificationCenterHeader.background#000000
  • notifications.background#000000
  • notifications.border#f0b48c
  • notificationsErrorIcon.foreground#ec7e7e
  • notificationsInfoIcon.foreground#6da7ec
  • notificationsWarningIcon.foreground#fab219
  • notificationToast.border#f0b48c
  • panel.background#000000
  • panel.border#f0b48c
  • panelTitle.activeBorder#d97757
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#e4e3dd
  • peekView.border#d97757
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#d9775766
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#000000
  • peekViewResult.matchHighlightBackground#d9775744
  • peekViewResult.selectionBackground#d9775733
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#e4e3dd
  • peekViewTitleLabel.foreground#ffffff
  • problemsErrorIcon.foreground#ec7e7e
  • problemsInfoIcon.foreground#6da7ec
  • problemsWarningIcon.foreground#fab219
  • progressBar.background#d97757
  • scrollbarSlider.activeBackground#d97757
  • scrollbarSlider.background#f0b48c55
  • scrollbarSlider.hoverBackground#f0b48c88
  • sideBar.background#000000
  • sideBar.border#f0b48c
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#f0b48c
  • sideBarTitle.foreground#ffffff
  • statusBar.background#000000
  • statusBar.border#f0b48c
  • statusBar.debuggingBackground#d97757
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#d97757
  • tab.activeBorderTop#d97757
  • tab.activeForeground#ffffff
  • tab.border#f0b48c
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#e4e3dd
  • tab.unfocusedActiveBorder#f0b48c
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6da7ec
  • terminal.ansiBrightBlack#c3c2b7
  • terminal.ansiBrightBlue#6da7ec
  • terminal.ansiBrightCyan#bcd1ca
  • terminal.ansiBrightGreen#5cc95c
  • terminal.ansiBrightMagenta#cbcadb
  • terminal.ansiBrightRed#ec7e7e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fab219
  • terminal.ansiCyan#bcd1ca
  • terminal.ansiGreen#5cc95c
  • terminal.ansiMagenta#a096eb
  • terminal.ansiRed#ec7e7e
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#fab219
  • terminal.background#000000
  • terminal.foreground#ffffff
  • terminalCursor.foreground#d97757
  • testing.iconErrored#f0b48c
  • testing.iconFailed#ec7e7e
  • testing.iconPassed#5cc95c
  • testing.iconQueued#c3c2b7
  • testing.iconSkipped#e4e3dd
  • testing.iconUnset#c3c2b7
  • testing.runAction#d97757
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ffffff
  • titleBar.border#f0b48c
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#e4e3dd
  • widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
comment, punctuation.definition.comment#c3c2b7italic
string, string.quoted, string.template#a8d98a
string.regexp#fab219
constant.character.escape#cbcadb
constant.numeric, constant.language, constant.character, support.constant#ebc9b7
keyword, storage.type, storage.modifier, keyword.control#f0a878
keyword.operator#e4e3dd
variable.language#f0b48citalic
entity.name.function, support.function, meta.function-call#f0cf99
entity.name.class, entity.name.type, support.class, support.type, entity.name.namespace, entity.other.inherited-class#bcd1ca
entity.name.function.decorator, meta.decorator, punctuation.decorator#c3befa
variable, variable.other#ffffff
variable.parameter#e4e3dd
variable.other.property, meta.object-literal.key, support.type.property-name#cbcadb
entity.other.attribute-name#cbcadb
entity.name.tag#f0a878
punctuation, meta.brace#e4e3dd
invalid#ec7e7e
markup.boldbold
markup.italicitalic
markup.heading#f0a878bold
markup.quote#e4e3dditalic
markup.underline.link#bcd1ca
markup.inserted, diff.inserted#5cc95c
markup.deleted, diff.deleted#ec7e7e
markup.changed, diff.changed#fab219