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#ECD0A9
  • activityBar.foreground#724341
  • activityBarBadge.background#917BA9
  • activityBarBadge.foreground#F3E3CF
  • badge.background#917BA9
  • badge.foreground#F3E3CF
  • button.background#ECD0A9
  • button.foreground#724341
  • button.secondaryBackground#F3E3CF
  • button.secondaryForeground#AE6966
  • checkbox.background#ECD0A9
  • checkbox.foreground#724341
  • descriptionForeground#724341
  • disabledForeground#72434180
  • editor.background#FBF6F0
  • editor.findMatchBackground#A18EB6
  • editor.findMatchHighlightBackground#D1C9DC
  • editor.foreground#724341
  • editor.lineHighlightBackground#F7ECE0
  • editor.selectionBackground#EADDDC
  • 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#F3E3CF
  • editorGutter.addedBackground#DDE7ED
  • editorGutter.deletedBackground#F0E2E5
  • editorGutter.modifiedBackground#D6E9ED
  • editorHint.foreground#917BA9
  • editorHoverWidget.background#EED7B7
  • editorHoverWidget.border#DEBC88
  • editorHoverWidget.foreground#724341
  • editorIndentGuide.activeBackground#B69A6Ea0
  • editorIndentGuide.background#B69A6E50
  • editorInfo.foreground#5795A0
  • editorLineNumber.activeForeground#724341
  • editorLineNumber.foreground#B69A6E
  • editorOverviewRuler.addedForeground#DDE7ED
  • editorOverviewRuler.deletedForeground#F0E2E5
  • editorOverviewRuler.errorForeground#B5637A
  • editorOverviewRuler.findMatchForeground#D1C9DC
  • editorOverviewRuler.infoForeground#5795A0
  • editorOverviewRuler.modifiedForeground#D6E9ED
  • editorOverviewRuler.selectionHighlightForeground#EADDDC
  • editorOverviewRuler.warningForeground#EC9D33
  • editorRuler.foreground#B69A6Ea0
  • editorWarning.foreground#EC9D33
  • editorWidget.background#F3E3CF
  • editorWidget.border#ECD0A9
  • editorWidget.foreground#AE6966
  • errorForeground#B5637A
  • focusBorder#917BA9
  • foreground#724341
  • icon.foreground#724341a0
  • input.background#FBF6F0
  • input.foreground#724341
  • input.placeholderForeground#A18E72
  • inputOption.activeBorder#917BA9
  • inputValidation.errorBorder#B5637A
  • inputValidation.infoBorder#5795A0
  • inputValidation.warningBorder#EC9D33
  • keybindingLabel.background#ECD0A9
  • keybindingLabel.border#EED7B7
  • keybindingLabel.bottomBorder#DEBC88
  • keybindingLabel.foreground#724341
  • list.activeSelectionBackground#DEBC88
  • list.activeSelectionForeground#724341
  • list.highlightForeground#917BA9
  • list.hoverBackground#DEBC8850
  • list.inactiveSelectionBackground#DEBC88a0
  • minimap.errorHighlight#B5637A
  • minimap.findMatchHighlight#D1C9DC
  • minimap.selectionHighlight#EADDDC
  • minimap.warningHighlight#EC9D33
  • minimapGutter.addedBackground#DDE7ED
  • minimapGutter.deletedBackground#F0E2E5
  • minimapGutter.modifiedBackground#D6E9ED
  • notificationCenterHeader.background#F3E3CF
  • notificationCenterHeader.foreground#AE6966
  • notificationLink.foreground#917BA9
  • notifications.background#FBF6F0
  • notifications.foreground#724341
  • notificationsErrorIcon.foreground#B5637A
  • notificationsInfoIcon.foreground#5795A0
  • notificationsWarningIcon.foreground#EC9D33
  • panel.background#FBF6F0
  • panel.border#B69A6Ea0
  • panelTitle.activeBorder#B69A6Ea0
  • panelTitle.activeForeground#724341
  • panelTitle.inactiveForeground#724341a0
  • pickerGroup.border#B69A6Ea0
  • pickerGroup.foreground#AE6966
  • problemsErrorIcon.foreground#B5637A
  • problemsInfoIcon.foreground#5795A0
  • problemsWarningIcon.foreground#EC9D33
  • quickInput.background#F3E3CF
  • quickInput.foreground#AE6966
  • quickInputList.focusBackground#ECD0A9
  • quickInputList.focusForeground#724341
  • scrollbar.shadow#ECD0A9
  • scrollbarSlider.activeBackground#C5A778
  • scrollbarSlider.background#EED7B7
  • scrollbarSlider.hoverBackground#DEBC88
  • selection.background#EADDDC
  • sideBar.background#F3E3CF
  • sideBar.foreground#AE6966
  • sideBarSectionHeader.background#ECD0A9
  • sideBarSectionHeader.foreground#724341
  • statusBar.background#F3E3CF
  • statusBar.debuggingBackground#F3E3CF
  • statusBar.foreground#AE6966
  • statusBar.noFolderBackground#F3E3CF
  • statusBarItem.remoteBackground#ECD0A9
  • statusBarItem.remoteForeground#724341
  • tab.activeBackground#FBF6F0
  • tab.activeForeground#724341
  • tab.border#F3E3CF
  • tab.inactiveBackground#ECD0A9
  • 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#FBF6F0
  • terminalCursor.foreground#724341
  • textLink.activeForeground#917BA9d0
  • textLink.foreground#917BA9
  • widget.shadow#ECD0A9
  • window.activeBorder#917BA9
  • window.inactiveBorder#724341

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#A18E72italic
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...