Skip to main content
CodingTheme

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#F0DABB
  • activityBar.foreground#724341
  • activityBarBadge.background#917BA9
  • activityBarBadge.foreground#F7ECDF
  • badge.background#917BA9
  • badge.foreground#F7ECDF
  • button.background#F0DABB
  • button.foreground#724341
  • button.secondaryBackground#F7ECDF
  • button.secondaryForeground#AE6966
  • checkbox.background#F0DABB
  • checkbox.foreground#724341
  • descriptionForeground#724341
  • disabledForeground#72434180
  • editor.background#FFFFFF
  • editor.findMatchBackground#A897BC
  • editor.findMatchHighlightBackground#D8D2E1
  • editor.foreground#724341
  • editor.lineHighlightBackground#FBF6EF
  • editor.selectionBackground#F0E6E6
  • editorBracketHighlight.foreground1#5795A0
  • editorBracketHighlight.foreground2#286A84
  • editorBracketHighlight.foreground3#917BA9
  • editorBracketHighlight.foreground4#5795A0
  • editorBracketHighlight.foreground5#286A84
  • editorBracketHighlight.foreground6#917BA9
  • editorBracketHighlight.unexpectedBracket.foreground#B5637A
  • editorCursor.foreground#724341
  • editorError.foreground#B5637A
  • editorGroupHeader.tabsBackground#F7ECDF
  • editorGutter.addedBackground#E8EFF3
  • editorGutter.deletedBackground#F5ECEE
  • editorGutter.modifiedBackground#E4F0F3
  • editorHint.foreground#917BA9
  • editorHoverWidget.background#F3E0C8
  • editorHoverWidget.border#E6C188
  • editorHoverWidget.foreground#724341
  • editorIndentGuide.activeBackground#BD9F6Fa0
  • editorIndentGuide.background#BD9F6F50
  • editorInfo.foreground#5795A0
  • editorLineNumber.activeForeground#724341
  • editorLineNumber.foreground#BD9F6F
  • editorOverviewRuler.addedForeground#E8EFF3
  • editorOverviewRuler.deletedForeground#F5ECEE
  • editorOverviewRuler.errorForeground#B5637A
  • editorOverviewRuler.findMatchForeground#D8D2E1
  • editorOverviewRuler.infoForeground#5795A0
  • editorOverviewRuler.modifiedForeground#E4F0F3
  • editorOverviewRuler.selectionHighlightForeground#F0E6E6
  • editorOverviewRuler.warningForeground#EC9D33
  • editorRuler.foreground#BD9F6Fa0
  • editorWarning.foreground#EC9D33
  • editorWidget.background#F7ECDF
  • editorWidget.border#F0DABB
  • editorWidget.foreground#AE6966
  • errorForeground#B5637A
  • focusBorder#917BA9
  • foreground#724341
  • icon.foreground#724341a0
  • input.background#FFFFFF
  • input.foreground#724341
  • input.placeholderForeground#A89375
  • inputOption.activeBorder#917BA9
  • inputValidation.errorBorder#B5637A
  • inputValidation.infoBorder#5795A0
  • inputValidation.warningBorder#EC9D33
  • keybindingLabel.background#F0DABB
  • keybindingLabel.border#F3E0C8
  • keybindingLabel.bottomBorder#E6C188
  • keybindingLabel.foreground#724341
  • list.activeSelectionBackground#E6C188
  • list.activeSelectionForeground#724341
  • list.highlightForeground#917BA9
  • list.hoverBackground#E6C18850
  • list.inactiveSelectionBackground#E6C188a0
  • minimap.errorHighlight#B5637A
  • minimap.findMatchHighlight#D8D2E1
  • minimap.selectionHighlight#F0E6E6
  • minimap.warningHighlight#EC9D33
  • minimapGutter.addedBackground#E8EFF3
  • minimapGutter.deletedBackground#F5ECEE
  • minimapGutter.modifiedBackground#E4F0F3
  • notificationCenterHeader.background#F7ECDF
  • notificationCenterHeader.foreground#AE6966
  • notificationLink.foreground#917BA9
  • notifications.background#FFFFFF
  • notifications.foreground#724341
  • notificationsErrorIcon.foreground#B5637A
  • notificationsInfoIcon.foreground#5795A0
  • notificationsWarningIcon.foreground#EC9D33
  • panel.background#FFFFFF
  • panel.border#BD9F6Fa0
  • panelTitle.activeBorder#BD9F6Fa0
  • panelTitle.activeForeground#724341
  • panelTitle.inactiveForeground#724341a0
  • pickerGroup.border#BD9F6Fa0
  • pickerGroup.foreground#AE6966
  • problemsErrorIcon.foreground#B5637A
  • problemsInfoIcon.foreground#5795A0
  • problemsWarningIcon.foreground#EC9D33
  • quickInput.background#F7ECDF
  • quickInput.foreground#AE6966
  • quickInputList.focusBackground#F0DABB
  • quickInputList.focusForeground#724341
  • scrollbar.shadow#F0DABB
  • scrollbarSlider.activeBackground#CDAC78
  • scrollbarSlider.background#F3E0C8
  • scrollbarSlider.hoverBackground#E6C188
  • selection.background#F0E6E6
  • sideBar.background#F7ECDF
  • sideBar.foreground#AE6966
  • sideBarSectionHeader.background#F0DABB
  • sideBarSectionHeader.foreground#724341
  • statusBar.background#F7ECDF
  • statusBar.debuggingBackground#F7ECDF
  • statusBar.foreground#AE6966
  • statusBar.noFolderBackground#F7ECDF
  • statusBarItem.remoteBackground#F0DABB
  • statusBarItem.remoteForeground#724341
  • tab.activeBackground#FFFFFF
  • tab.activeForeground#724341
  • tab.border#F7ECDF
  • tab.inactiveBackground#F0DABB
  • tab.inactiveForeground#724341a0
  • terminal.ansiBlack#FBF6F0
  • terminal.ansiBlue#5795A0
  • terminal.ansiBrightBlack#E8C48B
  • terminal.ansiBrightBlue#407D88
  • terminal.ansiBrightCyan#407D88
  • terminal.ansiBrightGreen#1C5970
  • terminal.ansiBrightMagenta#855AAC
  • terminal.ansiBrightRed#A54A66
  • terminal.ansiBrightWhite#A4635F
  • terminal.ansiBrightYellow#C68223
  • terminal.ansiCyan#5795A0
  • terminal.ansiGreen#286A84
  • terminal.ansiMagenta#917BA9
  • terminal.ansiRed#B5637A
  • terminal.ansiWhite#724341
  • terminal.ansiYellow#EC9D33
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#724341
  • textLink.activeForeground#917BA9d0
  • textLink.foreground#917BA9
  • widget.shadow#F0DABB
  • window.activeBorder#917BA9
  • window.inactiveBorder#724341

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#A89375italic
variable.other.constant, constant, string#AB6763italic
constant.numeric#724341italic
constant.language.boolean#724341italic
variable.other#935855
entity.name.function#724341
keyword#286A84
keyword.control.directive#724341bold
storage.type, storage.modifier, keyword.other.typedef#57527A
punctuation.definition.template-expression#5795A0
entity.name.tag#5795A0
support.type.property-name#724341italic

Shiki preview

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

Loading...