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#2A3222
  • activityBar.border#D8E8CC
  • activityBar.foreground#e3f275
  • activityBar.inactiveForeground#8A9282
  • activityBarBadge.background#dfd48b
  • activityBarBadge.foreground#1A1C18
  • badge.background#dfd48b
  • badge.foreground#1A1C18
  • breadcrumb.activeSelectionForeground#6c8c81
  • breadcrumb.background#FDFEF8
  • breadcrumb.focusForeground#252B1D
  • breadcrumb.foreground#7A8272
  • breadcrumbPicker.background#ffffff
  • button.background#6c8c81
  • button.border#dfd48b60
  • button.foreground#ffffff
  • button.hoverBackground#507068
  • button.secondaryBackground#4A5248
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#2A3222
  • descriptionForeground#7A8272
  • dropdown.background#ffffff
  • dropdown.border#D8E8CC
  • dropdown.foreground#252B1D
  • dropdown.listBackground#FBFDF5
  • editor.background#FDFEF8
  • editor.findMatchBackground#e3f27550
  • editor.findMatchBorder#e3f275
  • editor.findMatchHighlightBackground#dfd48b28
  • editor.foreground#252B1D
  • editor.inactiveSelectionBackground#F0F8E840
  • editor.lineHighlightBackground#F8FBF0
  • editor.lineHighlightBorder#F0F8E800
  • editor.selectionBackground#dfd48b35
  • editor.wordHighlightBackground#dfd48b20
  • editor.wordHighlightBorder#dfd48b60
  • editor.wordHighlightStrongBackground#dfd48b40
  • editor.wordHighlightStrongBorder#dfd48b80
  • editorBracketMatch.background#dfd48b30
  • editorBracketMatch.border#dfd48b
  • editorCursor.foreground#6c8c81
  • editorGroupHeader.tabsBackground#FBFDF5
  • editorGroupHeader.tabsBorder#D8E8CC
  • editorGutter.addedBackground#70A070
  • editorGutter.background#FDFEF8
  • editorGutter.deletedBackground#B87860
  • editorGutter.modifiedBackground#B8A850
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#D8E8CC
  • editorHoverWidget.statusBarBackground#FBFDF5
  • editorIndentGuide.activeBackground1#B8D8A8
  • editorIndentGuide.background1#D8E8CC
  • editorLineNumber.activeForeground#6c8c81
  • editorLineNumber.foreground#C0D0B8
  • editorOverviewRuler.addedForeground#70A070
  • editorOverviewRuler.border#D8E8CC
  • editorOverviewRuler.deletedForeground#B87860
  • editorOverviewRuler.errorForeground#B87860
  • editorOverviewRuler.findMatchForeground#e3f27580
  • editorOverviewRuler.modifiedForeground#B8A850
  • editorOverviewRuler.warningForeground#B8A850
  • editorRuler.foreground#D8E8CC
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#D8E8CC
  • editorSuggestWidget.focusHighlightForeground#507068
  • editorSuggestWidget.foreground#252B1D
  • editorSuggestWidget.highlightForeground#6c8c81
  • editorSuggestWidget.selectedBackground#F0F8E8
  • editorWidget.background#ffffff
  • editorWidget.border#D8E8CC
  • editorWidget.foreground#252B1D
  • editorWidget.resizeBorder#6c8c81
  • errorForeground#B87860
  • focusBorder#dfd48b80
  • gitDecoration.addedResourceForeground#70A870
  • gitDecoration.conflictingResourceForeground#C8B860
  • gitDecoration.deletedResourceForeground#B87860
  • gitDecoration.ignoredResourceForeground#8A9282
  • gitDecoration.modifiedResourceForeground#B8A850
  • gitDecoration.stageDeletedResourceForeground#B87860
  • gitDecoration.stageModifiedResourceForeground#B8A850
  • gitDecoration.submoduleResourceForeground#6888A0
  • gitDecoration.untrackedResourceForeground#dfd48b
  • icon.foreground#6c8c81
  • input.background#ffffff
  • input.border#D8E8CC
  • input.foreground#252B1D
  • input.placeholderForeground#8A9282
  • inputOption.activeBackground#dfd48b
  • inputOption.activeBorder#6c8c81
  • inputOption.activeForeground#1A1C18
  • inputValidation.errorBackground#B8786020
  • inputValidation.errorBorder#B87860
  • inputValidation.infoBackground#e3f27520
  • inputValidation.infoBorder#e3f275
  • inputValidation.warningBackground#B8A85020
  • inputValidation.warningBorder#B8A850
  • list.activeSelectionBackground#dfd48b
  • list.activeSelectionForeground#1A1C18
  • list.activeSelectionIconForeground#1A1C18
  • list.focusBackground#F0F8E8
  • list.hoverBackground#F8FBF0
  • list.inactiveSelectionBackground#F0F8E8
  • list.inactiveSelectionForeground#252B1D
  • minimap.background#FDFEF8
  • minimap.errorHighlight#B87860
  • minimap.findMatchHighlight#e3f27580
  • minimap.selectionHighlight#dfd48b50
  • minimap.warningHighlight#B8A850
  • minimapGutter.addedBackground#70A870
  • minimapGutter.deletedBackground#B87860
  • minimapGutter.modifiedBackground#B8A850
  • notificationCenter.border#D8E8CC
  • notificationCenterHeader.background#F8FBF0
  • notificationCenterHeader.foreground#252B1D
  • notifications.background#ffffff
  • notifications.border#D8E8CC
  • notifications.foreground#252B1D
  • notificationsErrorIcon.foreground#B87860
  • notificationsInfoIcon.foreground#6c8c81
  • notificationsWarningIcon.foreground#B8A850
  • panel.background#FBFDF5
  • panel.border#D8E8CC
  • panelTitle.activeBorder#6c8c81
  • panelTitle.activeForeground#252B1D
  • panelTitle.inactiveForeground#8A9282
  • peekView.border#6c8c81
  • peekViewEditor.background#FDFEF8
  • peekViewEditor.matchHighlightBackground#dfd48b40
  • peekViewEditorGutter.background#FBFDF5
  • peekViewResult.background#FBFDF5
  • peekViewResult.fileForeground#252B1D
  • peekViewResult.lineForeground#4A5248
  • peekViewResult.matchHighlightBackground#dfd48b50
  • peekViewResult.selectionBackground#dfd48b30
  • peekViewResult.selectionForeground#252B1D
  • peekViewTitle.background#2A3222
  • peekViewTitleDescription.foreground#8A9282
  • peekViewTitleLabel.foreground#e3f275
  • progressBar.background#6c8c81
  • sash.hoverBorder#6c8c81
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#6c8c81
  • scrollbarSlider.background#C8D8B860
  • scrollbarSlider.hoverBackground#C8D8B880
  • selection.background#dfd48b40
  • sideBar.background#FBFDF5
  • sideBar.foreground#4A5248
  • sideBarSectionHeader.background#F0F8E8
  • sideBarSectionHeader.border#D8E8CC
  • sideBarSectionHeader.foreground#252B1D
  • sideBarTitle.foreground#6c8c81
  • statusBar.background#6c8c81
  • statusBar.border#88A899
  • statusBar.debuggingBackground#dfd48b
  • statusBar.debuggingForeground#1A1C18
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#4A5248
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#FDFEF8
  • tab.activeBorder#dfd48b
  • tab.activeBorderTop#dfd48b
  • tab.activeForeground#6c8c81
  • tab.border#D8E8CC
  • tab.hoverBackground#F8FBF0
  • tab.hoverBorder#dfd48b80
  • tab.hoverForeground#6c8c81
  • tab.inactiveBackground#FBFDF5
  • tab.inactiveForeground#7A8272
  • terminal.ansiBlack#252B1D
  • terminal.ansiBlue#6888A0
  • terminal.ansiBrightBlack#7A8272
  • terminal.ansiBrightBlue#7898B0
  • terminal.ansiBrightCyan#7C9C91
  • terminal.ansiBrightGreen#88C088
  • terminal.ansiBrightMagenta#C890A8
  • terminal.ansiBrightRed#D89078
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#dfd48b
  • terminal.ansiCyan#6c8c81
  • terminal.ansiGreen#70A870
  • terminal.ansiMagenta#A87890
  • terminal.ansiRed#B87860
  • terminal.ansiWhite#FBFDF5
  • terminal.ansiYellow#C8B860
  • terminal.background#FDFEF8
  • terminal.border#D8E8CC
  • terminal.foreground#252B1D
  • textBlockQuote.background#F8FBF0
  • textBlockQuote.border#6c8c81
  • textCodeBlock.background#F8FBF0
  • textLink.activeForeground#507068
  • textLink.foreground#6c8c81
  • textPreformat.foreground#B8A850
  • textSeparator.foreground#D8E8CC
  • titleBar.activeBackground#2A3222
  • titleBar.activeForeground#e3f275
  • titleBar.border#D8E8CC
  • titleBar.inactiveBackground#4A5248
  • titleBar.inactiveForeground#8A9282

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8A9282italic
keyword, storage#507068
storage.type, support.type#406058
constant.language, support.constant, variable.language#C8B878
variable, support.variable#252B1D
entity.name.function, support.function#B8A850bold
entity.name.type, entity.other.inherited-class, support.class#406058bold
constant.numeric, constant.character, constant#B8A850
string#788878
constant.character.escape#6c8c81
punctuation#7A8272
entity.name.tag#507068
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#406058italic
meta.property-name, support.type.property-name#B8A850
markup.heading#6c8c81bold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...