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#ffffff
  • activityBar.border#9a4a28
  • activityBar.foreground#a94f31
  • activityBar.inactiveForeground#20201f
  • activityBarBadge.background#a94f31
  • activityBarBadge.foreground#ffffff
  • badge.background#a94f31
  • badge.foreground#ffffff
  • button.background#a94f31
  • button.border#9a4a28
  • button.foreground#ffffff
  • button.hoverBackground#7a3820
  • contrastActiveBorder#a94f31
  • contrastBorder#9a4a28
  • debugIcon.breakpointDisabledForeground#383835
  • debugIcon.breakpointForeground#b93535
  • debugIcon.continueForeground#184f95
  • debugIcon.pauseForeground#8a5a00
  • debugIcon.restartForeground#184f95
  • debugIcon.startForeground#1a8633
  • debugIcon.stepIntoForeground#184f95
  • debugIcon.stepOutForeground#184f95
  • debugIcon.stepOverForeground#184f95
  • debugIcon.stopForeground#b93535
  • descriptionForeground#20201f
  • diffEditor.border#9a4a28
  • diffEditor.insertedTextBackground#1a863333
  • diffEditor.removedTextBackground#b9353533
  • dropdown.background#ffffff
  • dropdown.border#9a4a28
  • editor.background#ffffff
  • editor.findMatchBackground#d97757aa
  • editor.findMatchHighlightBackground#d9775766
  • editor.foreground#000000
  • editor.lineHighlightBorder#9a4a28
  • editor.selectionBackground#d9775766
  • editor.selectionHighlightBackground#d9775744
  • editor.wordHighlightBackground#d9775744
  • editorBracketHighlight.foreground1#a94f31
  • editorBracketHighlight.foreground2#3f7562
  • editorBracketHighlight.foreground3#4a4593
  • editorBracketHighlight.foreground4#0b6b46
  • editorBracketHighlight.foreground5#3a3970
  • editorBracketHighlight.foreground6#8a5a1e
  • editorBracketHighlight.unexpectedBracket.foreground#b93535
  • editorBracketMatch.background#d9775744
  • editorBracketMatch.border#a94f31
  • editorCursor.foreground#a94f31
  • editorError.foreground#b93535
  • editorGroup.border#9a4a28
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#9a4a28
  • editorGutter.addedBackground#1a8633
  • editorGutter.deletedBackground#b93535
  • editorGutter.errorBackground#b93535
  • editorGutter.modifiedBackground#8a5a00
  • editorGutter.warningBackground#8a5a00
  • editorHint.foreground#3f7562
  • editorIndentGuide.activeBackground1#9a4a28
  • editorIndentGuide.background1#c3c2b7
  • editorInfo.foreground#184f95
  • editorLineNumber.activeForeground#a94f31
  • editorLineNumber.foreground#383835
  • editorOverviewRuler.errorForeground#b93535
  • editorOverviewRuler.warningForeground#8a5a00
  • editorRuler.foreground#c3c2b7
  • editorUnnecessaryCode.border#383835
  • editorWarning.foreground#8a5a00
  • editorWhitespace.foreground#7b7974
  • focusBorder#a94f31
  • foreground#000000
  • gitDecoration.addedResourceForeground#1a8633
  • gitDecoration.deletedResourceForeground#b93535
  • gitDecoration.ignoredResourceForeground#52514e
  • gitDecoration.modifiedResourceForeground#8a5a00
  • gitDecoration.untrackedResourceForeground#0b6b46
  • input.background#ffffff
  • input.border#9a4a28
  • input.foreground#000000
  • input.placeholderForeground#52514e
  • inputOption.activeBorder#a94f31
  • list.activeSelectionBackground#d9775733
  • list.activeSelectionForeground#000000
  • list.focusBackground#d9775733
  • list.focusOutline#a94f31
  • list.hoverBackground#d9775722
  • list.inactiveSelectionBackground#00000000
  • notificationCenter.border#9a4a28
  • notificationCenterHeader.background#ffffff
  • notifications.background#ffffff
  • notifications.border#9a4a28
  • notificationsErrorIcon.foreground#b93535
  • notificationsInfoIcon.foreground#184f95
  • notificationsWarningIcon.foreground#8a5a00
  • notificationToast.border#9a4a28
  • panel.background#ffffff
  • panel.border#9a4a28
  • panelTitle.activeBorder#a94f31
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#20201f
  • peekView.border#a94f31
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#d9775766
  • peekViewEditorGutter.background#ffffff
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#d9775744
  • peekViewResult.selectionBackground#d9775733
  • peekViewResult.selectionForeground#000000
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#20201f
  • peekViewTitleLabel.foreground#000000
  • problemsErrorIcon.foreground#b93535
  • problemsInfoIcon.foreground#184f95
  • problemsWarningIcon.foreground#8a5a00
  • progressBar.background#a94f31
  • scrollbarSlider.activeBackground#a94f31
  • scrollbarSlider.background#9a4a2855
  • scrollbarSlider.hoverBackground#9a4a2888
  • sideBar.background#ffffff
  • sideBar.border#9a4a28
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#9a4a28
  • sideBarTitle.foreground#000000
  • statusBar.background#ffffff
  • statusBar.border#9a4a28
  • statusBar.debuggingBackground#a94f31
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#a94f31
  • tab.activeBorderTop#a94f31
  • tab.activeForeground#000000
  • tab.border#9a4a28
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#20201f
  • tab.unfocusedActiveBorder#9a4a28
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#184f95
  • terminal.ansiBrightBlack#52514e
  • terminal.ansiBrightBlue#184f95
  • terminal.ansiBrightCyan#0b6b46
  • terminal.ansiBrightGreen#1a8633
  • terminal.ansiBrightMagenta#4a4593
  • terminal.ansiBrightRed#b93535
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#8a5a00
  • terminal.ansiCyan#0b6b46
  • terminal.ansiGreen#1a8633
  • terminal.ansiMagenta#4a4593
  • terminal.ansiRed#b93535
  • terminal.ansiWhite#20201f
  • terminal.ansiYellow#8a5a00
  • terminal.background#ffffff
  • terminal.foreground#000000
  • terminalCursor.foreground#a94f31
  • testing.iconErrored#9a4a28
  • testing.iconFailed#b93535
  • testing.iconPassed#1a8633
  • testing.iconQueued#383835
  • testing.iconSkipped#20201f
  • testing.iconUnset#383835
  • testing.runAction#a94f31
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.border#9a4a28
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#20201f
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#000000
comment, punctuation.definition.comment#52514eitalic
string, string.quoted, string.template#0b6b1e
string.regexp#8a5a00
constant.character.escape#4a4593
constant.numeric, constant.language, constant.character, support.constant#8a5a1e
keyword, storage.type, storage.modifier, keyword.control#9a4a28
keyword.operator#20201f
variable.language#7a3820italic
entity.name.function, support.function, meta.function-call#6b4600
entity.name.class, entity.name.type, support.class, support.type, entity.name.namespace, entity.other.inherited-class#0b6b46
entity.name.function.decorator, meta.decorator, punctuation.decorator#4a4593
variable, variable.other#000000
variable.parameter#20201f
variable.other.property, meta.object-literal.key, support.type.property-name#3a3970
entity.other.attribute-name#3a3970
entity.name.tag#9a4a28
punctuation, meta.brace#20201f
invalid#b93535
markup.boldbold
markup.italicitalic
markup.heading#9a4a28bold
markup.quote#20201fitalic
markup.underline.link#0b6b46
markup.inserted, diff.inserted#1a8633
markup.deleted, diff.deleted#b93535
markup.changed, diff.changed#8a5a00