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#3c3c3c
  • activityBar.foreground#f6ec96
  • activityBar.inactiveForeground#c2bfa5
  • activityBarBadge.background#f6ec96
  • activityBarBadge.foreground#1a1a1a
  • diffEditor.diagonalFill#5f87af55
  • diffEditor.insertedTextBackground#5f875f55
  • diffEditor.removedTextBackground#af5faf55
  • dropdown.background#666666
  • dropdown.foreground#ffffff
  • dropdown.listBackground#666666
  • editor.background#333333
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#6b8e2488
  • editor.lineHighlightBackground#666666
  • editor.selectionBackground#6b8e24
  • editor.selectionHighlightBackground#7f7f8c66
  • editor.wordHighlightBackground#7f7f8c33
  • editor.wordHighlightStrongBackground#bdb76b33
  • editorBracketMatch.background#bdb76b
  • editorBracketMatch.border#7f7f8c
  • editorCursor.foreground#f0e68c
  • editorError.foreground#dd0000
  • editorGutter.addedBackground#5f875f
  • editorGutter.deletedBackground#af5faf
  • editorGutter.modifiedBackground#5f87af
  • editorHoverWidget.background#666666
  • editorIndentGuide.activeBackground1#666666
  • editorIndentGuide.background1#4d4d4d
  • editorInfo.foreground#75a0ff
  • editorLineNumber.activeForeground#eeee00
  • editorLineNumber.foreground#eeee00
  • editorSuggestWidget.background#666666
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#ffa0a0
  • editorSuggestWidget.selectedBackground#e2772bed
  • editorSuggestWidget.selectedForeground#333333
  • editorWarning.foreground#eeee00
  • editorWhitespace.foreground#4d4d4d
  • editorWidget.background#666666
  • focusBorder#c2bfa5
  • foreground#ffffff
  • input.background#4d4d4d
  • input.border#666666
  • input.foreground#ffffff
  • list.activeSelectionBackground#c2bfa5
  • list.activeSelectionForeground#333333
  • list.focusBackground#666666
  • list.highlightForeground#f6ec96
  • list.hoverBackground#b0ad95
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#666666
  • notificationCenterHeader.background#666666
  • notifications.background#666666
  • notifications.foreground#ffffff
  • panel.background#4d4d4d
  • panel.border#c2bfa5
  • peekView.border#bdb76b
  • peekViewEditor.background#4d4d4d
  • peekViewResult.background#4d4d4d
  • selection.background#6b8e24
  • sideBar.background#424242
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#c2bfa5
  • sideBarSectionHeader.foreground#333333
  • statusBar.background#c2bfa5
  • statusBar.debuggingBackground#c2bfa5
  • statusBar.debuggingForeground#333333
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#c2bfa5
  • statusBar.noFolderForeground#333333
  • tab.activeBackground#615a4a
  • tab.activeForeground#ffffff
  • terminal.ansiBlack#7f7f8c
  • terminal.ansiBlue#75a0ff
  • terminal.ansiBrightBlack#8a7f7f
  • terminal.ansiBrightBlue#6dceeb
  • terminal.ansiBrightCyan#ffa0a0
  • terminal.ansiBrightGreen#89fb98
  • terminal.ansiBrightMagenta#ffde9b
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#c2bfa5
  • terminal.ansiBrightYellow#f0e68c
  • terminal.ansiCyan#cd853f
  • terminal.ansiGreen#9acd32
  • terminal.ansiMagenta#eeee00
  • terminal.ansiRed#cd5c5c
  • terminal.ansiWhite#666666
  • terminal.ansiYellow#bdb76b
  • terminal.background#333333
  • terminal.foreground#ffffff
  • terminalCursor.foreground#f0e68c
  • titleBar.activeBackground#c2bfa5
  • titleBar.activeForeground#1a1a1a
  • titleBar.inactiveBackground#a8a58c
  • titleBar.inactiveForeground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6dceeb—
string, constant.character, constant.other.symbol#ffa0a0—
constant.numeric, constant.language.boolean#ffa0a0—
keyword, keyword.control, keyword.operator, storage.type, storage.modifier#f0e68c—
meta.preprocessor, keyword.control.import, entity.other.attribute-name#cd5c5c—
entity.name.type, support.type, support.class, storage.type.class, storage.type.interface#bdb76b—
entity.name.function, support.function, meta.function-call, variable.function#89fb98—
variable, meta.definition.variable, support.variable, meta.object-literal.key#ffffff—
variable.parameter#ffffff—
constant.other, constant.language, support.constant#ffde9b—
entity.name.class, entity.other.inherited-class, entity.name.namespace#cd5c5c—
meta.annotation, storage.type.annotation#cd5c5c—
punctuation, meta.brace, meta.delimiter#ffffff—
markup.underline.link, constant.other.reference.link#75a0ffunderline
markup.heading, entity.name.section#cd5c5c—
markup.bold—
markup.italic—italic
meta.find-match#f0e68c—
invalid, invalid.illegal#ff0000—
meta.debug, variable.language.this#ffa0a0—