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#2D3532
  • activityBar.border#3A423F
  • activityBar.foreground#C7D0C7
  • activityBar.inactiveForeground#7F8C8D
  • badge.background#7A9AD4
  • badge.foreground#E0E5E0
  • diffEditor.insertedTextBackground#6AA66A33
  • diffEditor.removedTextBackground#FF4D4D33
  • editor.background#252A27
  • editor.findMatchBackground#FFCA2866
  • editor.findMatchHighlightBackground#FFCA2844
  • editor.foreground#C7D0C7
  • editor.lineHighlightBackground#3A6F9F1A
  • editor.selectionBackground#7A9AD466
  • editor.selectionHighlightBackground#7A9AD444
  • editor.wordHighlightBackground#6AA66A44
  • editor.wordHighlightStrongBackground#7A9AD444
  • editorBracketMatch.background#7A9AD444
  • editorBracketMatch.border#7A9AD4
  • editorCodeLens.foreground#7F8C8D
  • editorCursor.background#252A27
  • editorCursor.foreground#C7D0C7
  • editorHoverWidget.background#2D3532
  • editorHoverWidget.border#3A423F
  • editorHoverWidget.foreground#E0E5E0
  • editorLineNumber.activeForeground#E0E5E0
  • editorLineNumber.foreground#7F8C8D
  • editorSuggestWidget.background#2D3532
  • editorSuggestWidget.foreground#E0E5E0
  • editorSuggestWidget.selectedBackground#3A423F
  • editorWarning.foreground#FFCA28
  • focusBorder#7A9AD4
  • gitDecoration.addedResourceForeground#6AA66A
  • gitDecoration.conflictingResourceForeground#C586C0
  • gitDecoration.deletedResourceForeground#FF4D4D
  • gitDecoration.modifiedResourceForeground#FFCA28
  • gitDecoration.untrackedResourceForeground#7BC07B
  • input.background#2D3532
  • input.border#3A423F
  • inputValidation.errorBorder#FF4D4D
  • inputValidation.infoBorder#7A9AD4
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#3A423F
  • list.activeSelectionForeground#E0E5E0
  • list.focusBackground#4A5653
  • list.focusForeground#E0E5E0
  • list.highlightForeground#7A9AD4
  • list.hoverBackground#3A423F66
  • list.hoverForeground#E0E5E0
  • list.inactiveSelectionBackground#3A423F
  • list.inactiveSelectionForeground#E0E5E0
  • menu.background#2D3532
  • menu.foreground#E0E5E0
  • menu.selectionBackground#3A423F
  • menu.selectionBorder#7A9AD4
  • menu.selectionForeground#E0E5E0
  • menu.separatorBackground#3A423F
  • scrollbarSlider.activeBackground#7A9AD499
  • scrollbarSlider.background#7A9AD455
  • scrollbarSlider.hoverBackground#7A9AD477
  • sideBar.background#2D3532
  • sideBar.border#3A423F
  • sideBar.foreground#E0E5E0
  • sideBarSectionHeader.background#3A423F
  • statusBar.background#2D3532
  • statusBar.debuggingBackground#FF4D4D
  • statusBar.foreground#E0E5E0
  • statusBar.noFolderBackground#3A423F
  • statusBarItem.errorBackground#FF4D4D33
  • statusBarItem.warningBackground#FFCA2833
  • tab.activeBackground#3A423F
  • tab.activeForeground#E0E5E0
  • tab.hoverBackground#3A423F
  • tab.inactiveBackground#2D3532
  • tab.inactiveForeground#7F8C8D
  • terminal.ansiBlack#252A27
  • terminal.ansiBlue#7A9AD4
  • terminal.ansiBrightBlack#7F8C8D
  • terminal.ansiBrightBlue#8AB4F8
  • terminal.ansiBrightCyan#2AA198
  • terminal.ansiBrightGreen#7BC07B
  • terminal.ansiBrightMagenta#B16286
  • terminal.ansiBrightRed#FF4D4D
  • terminal.ansiBrightWhite#E0E5E0
  • terminal.ansiBrightYellow#FFCA28
  • terminal.ansiCyan#2AA198
  • terminal.ansiGreen#6AA66A
  • terminal.ansiMagenta#B16286
  • terminal.ansiRed#FF4D4D
  • terminal.ansiWhite#D1D6D1
  • terminal.ansiYellow#FFCA28
  • terminal.background#2D3532
  • terminal.foreground#E0E5E0
  • terminalCursor.foreground#E0E5E0
  • titleBar.activeBackground#2D3532
  • titleBar.activeForeground#E0E5E0
  • titleBar.inactiveBackground#3A423F
  • titleBar.inactiveForeground#7F8C8D
  • 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, meta.template.expression, meta.embedded.expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#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—