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#3A322B
  • activityBar.border#4A3E34
  • activityBar.foreground#E0E5E0
  • activityBar.inactiveForeground#9A8F7C
  • badge.background#FFD6A0
  • badge.foreground#E0E5E0
  • diffEditor.insertedTextBackground#6AA66A33
  • diffEditor.removedTextBackground#FF4D4D33
  • editor.background#2F2A25
  • editor.findMatchBackground#FFCA2866
  • editor.findMatchHighlightBackground#FFCA2844
  • editor.foreground#E0E5E0
  • editor.lineHighlightBackground#FFD6A01A
  • editor.selectionBackground#FFD6A044
  • editor.selectionHighlightBackground#FFD6A022
  • editor.wordHighlightBackground#FFC77B44
  • editor.wordHighlightStrongBackground#FFD6A022
  • editorBracketMatch.background#FFD6A022
  • editorBracketMatch.border#FFD6A0
  • editorCodeLens.foreground#9A8F7C
  • editorCursor.background#2F2A25
  • editorCursor.foreground#E0E5E0
  • editorHoverWidget.background#3A322B
  • editorHoverWidget.border#4A3E34
  • editorHoverWidget.foreground#E0E5E0
  • editorLineNumber.activeForeground#E0E5E0
  • editorLineNumber.foreground#9A8F7C
  • editorSuggestWidget.background#3A322B
  • editorSuggestWidget.foreground#E0E5E0
  • editorSuggestWidget.selectedBackground#4A3E34
  • focusBorder#FFD6A0
  • input.background#3A322B
  • input.border#4A3E34
  • inputValidation.errorBorder#FF4D4D
  • inputValidation.infoBorder#FFD6A0
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#4A3E34
  • list.activeSelectionForeground#E0E5E0
  • list.focusBackground#5A493F
  • list.focusForeground#E0E5E0
  • list.highlightForeground#FFD6A0
  • list.hoverBackground#4A3E3466
  • list.hoverForeground#E0E5E0
  • list.inactiveSelectionBackground#4A3E34
  • list.inactiveSelectionForeground#E0E5E0
  • menu.background#3A322B
  • menu.foreground#E0E5E0
  • menu.selectionBackground#4A3E34
  • menu.selectionBorder#FFD6A0
  • menu.selectionForeground#E0E5E0
  • menu.separatorBackground#4A3E34
  • scrollbarSlider.activeBackground#FFD6A099
  • scrollbarSlider.background#FFD6A044
  • scrollbarSlider.hoverBackground#FFD6A077
  • sideBar.background#3A322B
  • sideBar.border#4A3E34
  • sideBar.foreground#E0E5E0
  • sideBarSectionHeader.background#4A3E34
  • statusBar.background#3A322B
  • statusBar.debuggingBackground#FF4D4D
  • statusBar.foreground#E0E5E0
  • statusBar.noFolderBackground#4A3E34
  • statusBarItem.errorBackground#FF4D4D33
  • statusBarItem.warningBackground#FFCA2833
  • tab.activeBackground#4A3E34
  • tab.activeForeground#E0E5E0
  • tab.hoverBackground#4A3E34
  • tab.inactiveBackground#3A322B
  • tab.inactiveForeground#9A8F7C
  • terminal.background#3A322B
  • terminal.foreground#E0E5E0
  • titleBar.activeBackground#3A322B
  • titleBar.activeForeground#E0E5E0
  • titleBar.inactiveBackground#4A3E34
  • titleBar.inactiveForeground#9A8F7C
  • widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#7A9AD4bold
string, string.quoted, string.regexp#7BC07B—
string.template, string.interpolated#7BC07B
constant.numeric, constant.language.boolean#FFCA28—
comment, punctuation.definition.comment, comment.block.documentation#9CA3AF
entity.name.function, support.function#FF4D4D—
entity.name.type, support.class, support.type#7A9AD4—
variable, variable.parameter#E0E5E0—
entity.name.tag, meta.tag.html#7A9AD4bold
entity.other.attribute-name#FFCA28—
punctuation, meta.delimiter#7A9AD4—
keyword.operator#7A9AD4—