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#BBC7BD
  • activityBar.foreground#202E18
  • activityBarBadge.background#88507D
  • activityBarBadge.foreground#CBD7CD
  • badge.background#88507D
  • badge.foreground#CBD7CD
  • button.background#BBC7BD
  • button.foreground#202E18
  • button.secondaryBackground#CBD7CD
  • button.secondaryForeground#4B663C
  • checkbox.background#BBC7BD
  • checkbox.foreground#202E18
  • descriptionForeground#202E18
  • disabledForeground#202E1880
  • editor.background#DBE5DC
  • editor.findMatchBackground#B36BA5
  • editor.findMatchHighlightBackground#D8ABCE
  • editor.foreground#202E18
  • editor.lineHighlightBackground#D1DDD2
  • editor.selectionBackground#A6DB86
  • editorBracketHighlight.foreground1#286486
  • editorBracketHighlight.foreground2#567A30
  • editorBracketHighlight.foreground3#88507D
  • editorBracketHighlight.foreground4#286486
  • editorBracketHighlight.foreground5#567A30
  • editorBracketHighlight.foreground6#88507D
  • editorBracketHighlight.unexpectedBracket.foreground#A8334C
  • editorCursor.foreground#202E18
  • editorError.foreground#A8334C
  • editorGroupHeader.tabsBackground#CBD7CD
  • editorGutter.addedBackground#C1D9AE
  • editorGutter.deletedBackground#E5CBCE
  • editorGutter.modifiedBackground#C6D3E0
  • editorHint.foreground#88507D
  • editorHoverWidget.background#C1CCC2
  • editorHoverWidget.border#A9B3AA
  • editorHoverWidget.foreground#202E18
  • editorIndentGuide.activeBackground#8A938Ba0
  • editorIndentGuide.background#8A938B50
  • editorInfo.foreground#286486
  • editorLineNumber.activeForeground#202E18
  • editorLineNumber.foreground#8A938B
  • editorOverviewRuler.addedForeground#C1D9AE
  • editorOverviewRuler.deletedForeground#E5CBCE
  • editorOverviewRuler.errorForeground#A8334C
  • editorOverviewRuler.findMatchForeground#D8ABCE
  • editorOverviewRuler.infoForeground#286486
  • editorOverviewRuler.modifiedForeground#C6D3E0
  • editorOverviewRuler.selectionHighlightForeground#A6DB86
  • editorOverviewRuler.warningForeground#944927
  • editorRuler.foreground#8A938Ba0
  • editorWarning.foreground#944927
  • editorWidget.background#CBD7CD
  • editorWidget.border#BBC7BD
  • editorWidget.foreground#4B663C
  • errorForeground#A8334C
  • focusBorder#88507D
  • foreground#202E18
  • icon.foreground#202E18a0
  • input.background#DBE5DC
  • input.foreground#202E18
  • input.placeholderForeground#828883
  • inputOption.activeBorder#88507D
  • inputValidation.errorBorder#A8334C
  • inputValidation.infoBorder#286486
  • inputValidation.warningBorder#944927
  • keybindingLabel.background#BBC7BD
  • keybindingLabel.border#C1CCC2
  • keybindingLabel.bottomBorder#A9B3AA
  • keybindingLabel.foreground#202E18
  • list.activeSelectionBackground#A9B3AA
  • list.activeSelectionForeground#202E18
  • list.highlightForeground#88507D
  • list.hoverBackground#A9B3AA50
  • list.inactiveSelectionBackground#A9B3AAa0
  • minimap.errorHighlight#A8334C
  • minimap.findMatchHighlight#D8ABCE
  • minimap.selectionHighlight#A6DB86
  • minimap.warningHighlight#944927
  • minimapGutter.addedBackground#C1D9AE
  • minimapGutter.deletedBackground#E5CBCE
  • minimapGutter.modifiedBackground#C6D3E0
  • notificationCenterHeader.background#CBD7CD
  • notificationCenterHeader.foreground#4B663C
  • notificationLink.foreground#88507D
  • notifications.background#DBE5DC
  • notifications.foreground#202E18
  • notificationsErrorIcon.foreground#A8334C
  • notificationsInfoIcon.foreground#286486
  • notificationsWarningIcon.foreground#944927
  • panel.background#DBE5DC
  • panel.border#8A938Ba0
  • panelTitle.activeBorder#8A938Ba0
  • panelTitle.activeForeground#202E18
  • panelTitle.inactiveForeground#202E18a0
  • pickerGroup.border#8A938Ba0
  • pickerGroup.foreground#4B663C
  • problemsErrorIcon.foreground#A8334C
  • problemsInfoIcon.foreground#286486
  • problemsWarningIcon.foreground#944927
  • quickInput.background#CBD7CD
  • quickInput.foreground#4B663C
  • quickInputList.focusBackground#BBC7BD
  • quickInputList.focusForeground#202E18
  • scrollbar.shadow#BBC7BD
  • scrollbarSlider.activeBackground#97A098
  • scrollbarSlider.background#C1CCC2
  • scrollbarSlider.hoverBackground#A9B3AA
  • selection.background#A6DB86
  • sideBar.background#CBD7CD
  • sideBar.foreground#4B663C
  • sideBarSectionHeader.background#BBC7BD
  • sideBarSectionHeader.foreground#202E18
  • statusBar.background#CBD7CD
  • statusBar.debuggingBackground#CBD7CD
  • statusBar.foreground#4B663C
  • statusBar.noFolderBackground#CBD7CD
  • statusBarItem.remoteBackground#BBC7BD
  • statusBarItem.remoteForeground#202E18
  • tab.activeBackground#DBE5DC
  • tab.activeForeground#202E18
  • tab.border#CBD7CD
  • tab.inactiveBackground#BBC7BD
  • tab.inactiveForeground#202E18a0
  • terminal.ansiBlack#E5EDE6
  • terminal.ansiBlue#286486
  • terminal.ansiBrightBlack#B3C6B6
  • terminal.ansiBrightBlue#1D5573
  • terminal.ansiBrightCyan#2B747C
  • terminal.ansiBrightGreen#3F5A22
  • terminal.ansiBrightMagenta#7B3B70
  • terminal.ansiBrightRed#94253E
  • terminal.ansiBrightWhite#415934
  • terminal.ansiBrightYellow#803D1C
  • terminal.ansiCyan#3B8992
  • terminal.ansiGreen#567A30
  • terminal.ansiMagenta#88507D
  • terminal.ansiRed#A8334C
  • terminal.ansiWhite#202E18
  • terminal.ansiYellow#944927
  • terminalCursor.background#DBE5DC
  • terminalCursor.foreground#202E18
  • textLink.activeForeground#88507Dd0
  • textLink.foreground#88507D
  • widget.shadow#BBC7BD
  • window.activeBorder#88507D
  • window.inactiveBorder#202E18

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#828883italic
variable.other.constant, constant, string#476038italic
constant.numeric#202E18italic
constant.language.boolean#202E18italic
variable.other#364A2A
entity.name.function#202E18
keyword#202E18bold
keyword.control.directive#202E18bold
storage.type, storage.modifier, keyword.other.typedef#48594A
punctuation.definition.template-expression#415934bold
entity.name.tag#415934bold
support.type.property-name#202E18italic

Shiki preview

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

Loading...

Zenbones Themes by rpbritton - VS Code Theme