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#f9f9f7
  • activityBar.border#e1e0d9
  • activityBar.foreground#c6613f
  • activityBar.inactiveForeground#a5a49a
  • activityBarBadge.background#c6613f
  • activityBarBadge.foreground#fcfcfb
  • badge.background#c6613f
  • badge.foreground#fcfcfb
  • button.background#c6613f
  • button.foreground#fcfcfb
  • button.hoverBackground#a94f31
  • debugIcon.breakpointDisabledForeground#a5a49a
  • debugIcon.breakpointForeground#b93535
  • debugIcon.continueForeground#184f95
  • debugIcon.pauseForeground#92400e
  • debugIcon.restartForeground#184f95
  • debugIcon.startForeground#1a8633
  • debugIcon.stepIntoForeground#184f95
  • debugIcon.stepOutForeground#184f95
  • debugIcon.stepOverForeground#184f95
  • debugIcon.stopForeground#b93535
  • descriptionForeground#52514e
  • diffEditor.border#e1e0d9
  • diffEditor.diagonalFill#c3c2b788
  • diffEditor.insertedLineBackground#1a863314
  • diffEditor.insertedTextBackground#1a863322
  • diffEditor.removedLineBackground#b9353514
  • diffEditor.removedTextBackground#b9353522
  • dropdown.background#ffffff
  • dropdown.border#c3c2b7
  • editor.background#fcfcfb
  • editor.findMatchBackground#d9775755
  • editor.findMatchHighlightBackground#d9775733
  • editor.foreground#0b0b0b
  • editor.lineHighlightBackground#f0efec
  • editor.selectionBackground#d9775733
  • editor.selectionHighlightBackground#d9775722
  • editor.wordHighlightBackground#d9775722
  • editorBracketHighlight.foreground1#c6613f
  • editorBracketHighlight.foreground2#3f7562
  • editorBracketHighlight.foreground3#615ba0
  • editorBracketHighlight.foreground4#52514e
  • editorBracketHighlight.foreground5#5b5a8a
  • editorBracketHighlight.foreground6#9a6a44
  • editorBracketHighlight.unexpectedBracket.foreground#b93535
  • editorBracketMatch.background#d9775733
  • editorBracketMatch.border#c6613f
  • editorCursor.foreground#c6613f
  • editorError.foreground#b93535
  • editorGroup.border#e1e0d9
  • editorGroupHeader.tabsBackground#f9f9f7
  • editorGroupHeader.tabsBorder#e1e0d9
  • editorGutter.addedBackground#1a8633
  • editorGutter.deletedBackground#b93535
  • editorGutter.errorBackground#b93535
  • editorGutter.modifiedBackground#92400e
  • editorGutter.warningBackground#92400e
  • editorHint.foreground#3f7562
  • editorIndentGuide.activeBackground1#c3c2b7
  • editorIndentGuide.background1#e1e0d9
  • editorInfo.foreground#184f95
  • editorLineNumber.activeForeground#c6613f
  • editorLineNumber.foreground#a5a49a
  • editorOverviewRuler.errorForeground#b93535
  • editorOverviewRuler.warningForeground#92400e
  • editorRuler.foreground#e1e0d9
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#92400e
  • editorWhitespace.foreground#d2d1c7
  • focusBorder#d9775766
  • foreground#0b0b0b
  • gitDecoration.addedResourceForeground#1a8633
  • gitDecoration.deletedResourceForeground#b93535
  • gitDecoration.ignoredResourceForeground#a5a49a
  • gitDecoration.modifiedResourceForeground#92400e
  • gitDecoration.untrackedResourceForeground#3f7562
  • input.background#ffffff
  • input.border#c3c2b7
  • input.foreground#0b0b0b
  • input.placeholderForeground#a5a49a
  • inputOption.activeBorder#c6613f
  • list.activeSelectionBackground#f0efec
  • list.activeSelectionForeground#0b0b0b
  • list.focusBackground#f0efec
  • list.hoverBackground#f3f3f0
  • list.inactiveSelectionBackground#f6f6f4
  • merge.border#c3c2b7
  • merge.commonContentBackground#52514e14
  • merge.commonHeaderBackground#52514e33
  • merge.currentContentBackground#1a863314
  • merge.currentHeaderBackground#1a863333
  • merge.incomingContentBackground#184f9514
  • merge.incomingHeaderBackground#184f9533
  • minimap.background#f9f9f7
  • minimap.errorHighlight#b93535
  • minimap.findMatchHighlight#d97757aa
  • minimap.selectionHighlight#d9775766
  • minimap.warningHighlight#92400e
  • minimapGutter.addedBackground#1a8633
  • minimapGutter.deletedBackground#b93535
  • minimapGutter.modifiedBackground#92400e
  • minimapSlider.activeBackground#c6613faa
  • minimapSlider.background#c3c2b788
  • minimapSlider.hoverBackground#a5a49aaa
  • notificationCenter.border#c3c2b7
  • notificationCenterHeader.background#f9f9f7
  • notifications.background#ffffff
  • notifications.border#c3c2b7
  • notificationsErrorIcon.foreground#b93535
  • notificationsInfoIcon.foreground#184f95
  • notificationsWarningIcon.foreground#92400e
  • notificationToast.border#c3c2b7
  • panel.background#f9f9f7
  • panel.border#e1e0d9
  • panelTitle.activeBorder#c6613f
  • panelTitle.activeForeground#0b0b0b
  • panelTitle.inactiveForeground#7b7974
  • peekView.border#c6613f
  • peekViewEditor.background#f3f3f0
  • peekViewEditor.matchHighlightBackground#d9775755
  • peekViewEditorGutter.background#f3f3f0
  • peekViewResult.background#f9f9f7
  • peekViewResult.matchHighlightBackground#d9775733
  • peekViewResult.selectionBackground#f0efec
  • peekViewResult.selectionForeground#0b0b0b
  • peekViewTitle.background#f9f9f7
  • peekViewTitleDescription.foreground#52514e
  • peekViewTitleLabel.foreground#0b0b0b
  • problemsErrorIcon.foreground#b93535
  • problemsInfoIcon.foreground#184f95
  • problemsWarningIcon.foreground#92400e
  • progressBar.background#c6613f
  • scrollbarSlider.activeBackground#c6613faa
  • scrollbarSlider.background#c3c2b788
  • scrollbarSlider.hoverBackground#a5a49aaa
  • sideBar.background#f9f9f7
  • sideBar.border#e1e0d9
  • sideBar.foreground#20201f
  • sideBarSectionHeader.background#fcfcfb
  • sideBarTitle.foreground#0b0b0b
  • statusBar.background#f9f9f7
  • statusBar.border#e1e0d9
  • statusBar.debuggingBackground#c6613f
  • statusBar.debuggingForeground#fcfcfb
  • statusBar.foreground#52514e
  • statusBar.noFolderBackground#f9f9f7
  • tab.activeBackground#fcfcfb
  • tab.activeBorderTop#c6613f
  • tab.activeForeground#0b0b0b
  • tab.border#e1e0d9
  • tab.inactiveBackground#f9f9f7
  • tab.inactiveForeground#7b7974
  • terminal.ansiBlack#0b0b0b
  • terminal.ansiBlue#184f95
  • terminal.ansiBrightBlack#a5a49a
  • terminal.ansiBrightBlue#2a78d6
  • terminal.ansiBrightCyan#629987
  • terminal.ansiBrightGreen#0ca30c
  • terminal.ansiBrightMagenta#827dbd
  • terminal.ansiBrightRed#d03b3b
  • terminal.ansiBrightWhite#0b0b0b
  • terminal.ansiBrightYellow#db9300
  • terminal.ansiCyan#3f7562
  • terminal.ansiGreen#1a8633
  • terminal.ansiMagenta#615ba0
  • terminal.ansiRed#b93535
  • terminal.ansiWhite#52514e
  • terminal.ansiYellow#92400e
  • terminal.background#fcfcfb
  • terminal.foreground#0b0b0b
  • terminalCursor.foreground#c6613f
  • testing.iconErrored#8a2020
  • testing.iconFailed#b93535
  • testing.iconPassed#1a8633
  • testing.iconQueued#a5a49a
  • testing.iconSkipped#52514e
  • testing.iconUnset#a5a49a
  • testing.runAction#c6613f
  • titleBar.activeBackground#f9f9f7
  • titleBar.activeForeground#0b0b0b
  • titleBar.border#e1e0d9
  • titleBar.inactiveBackground#f9f9f7
  • titleBar.inactiveForeground#a5a49a
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#0b0b0b
comment, punctuation.definition.comment#7b7974italic
string, string.quoted, string.template#2a7a2a
string.regexp#92400e
constant.character.escape#5b5a8a
punctuation.definition.template-expression#3f7562
constant.numeric, constant.language, constant.character, support.constant#9a6a44
keyword, storage.type, storage.modifier, keyword.control#c6613f
keyword.operator#52514e
variable.language#a94f31italic
entity.name.function, support.function, meta.function-call#8a5a1e
entity.name.class, entity.name.type, support.class, support.type, entity.name.namespace, entity.other.inherited-class#3f7562
entity.name.function.decorator, meta.decorator, punctuation.decorator#615ba0
variable, variable.other#0b0b0b
variable.parameter#383835
variable.other.property, meta.object-literal.key, support.type.property-name#5b5a8a
entity.other.attribute-name#5b5a8a
entity.name.tag#c6613f
punctuation, meta.brace#52514e
invalid#b93535
markup.boldbold
markup.italicitalic
markup.heading#c6613fbold
markup.quote#52514eitalic
markup.underline.link#3f7562
markup.inserted, diff.inserted#1a8633
markup.deleted, diff.deleted#b93535
markup.changed, diff.changed#92400e