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#e6e6e6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#FFFFFF
  • editor.findMatchBackground#e5e5e5
  • editor.foreground#000000
  • editor.selectionBackground#f8ec59
  • editorCursor.background#000000
  • editorCursor.foreground#000000
  • editorGutter.background#FFFFFF
  • editorLineNumber.activeForeground#7F7F7F
  • editorLineNumber.foreground#7F7F7F
  • inlineChatInput.background#e0e0e0
  • inlineChatInput.foreground#000000
  • inlineChatInput.placeholderForeground#0072b2
  • input.background#e0e0e0
  • input.foreground#000000
  • input.placeholderForeground#0072b2
  • panel.background#FFFFFF
  • sideBar.background#e6e6e6
  • statusBar.background#e5e5e5
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#b0b0b0
  • statusBarItem.remoteBackground#e5e5e5
  • statusBarItem.remoteForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#56b4e9
comment#999999
markup.heading#d55e00
entity.name.tag#7F7F7F
entity.name.tag#0072b2
comment#009e73
markup.underline.link#848ea9
keyword#0072b2
markup.list#7F7F7F
invalid#ADD8E6
keyword#d55e00
keyword#848ea9
invalid.deprecated#e69f00
invalid.deprecated
markup.inserted#22aa22
markup.inserted#22aa22
comment#848ea9
comment#56b4e9
comment#4A708B
comment#6E8B3D
comment#4A708B
keyword#848ea9
gitDecoration.addedResourceForeground#0072b2
gitDecoration.untrackedResourceForeground#848ea9
gitDecoration.ignoredResourceForeground#009e73
gitDecoration.renamedResourceForeground#848ea9
gitDecoration.modifiedResourceForeground#e69f00
breadcrumb.foreground, tree.tableColumnHeader.foreground#d55e00
explorer.fileForeground#000000
explorer.directoryForeground#d55e00
comment.documentation#696969
editorSuggestWidget.highlightForeground#8B0000
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#000000
invalid#FF0000
invalid#d55e00
invalid#0072b2
invalid#0072b2
invalid#009e73
invalid, invalid.deprecated#e69f00
invalid#d55e00
invalid.deprecated#e69f00
invalid#d55e00
invalid#88090B
invalid.deprecated#d55e00
invalid#d55e00
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#56b4e9
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#009e73
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file
meta.diff.header
invalid.deprecated#d55e00
invalid.deprecated#e69f00
entity.name.function#e69f00
invalid.deprecated#d55e00
string#00008B
invalid.deprecated#e69f00
invalid#d55e00
invalid.deprecated#e69f00
invalid#d55e00
variable#0000FF
variable#0000FF
comment#00008B
comment
comment.documentation#006400
editor.findMatchBackground
editor.findMatchHighlightBackground#FFFFFF
editor.findMatchBackground, editor.findMatchHighlightBackground#FFFFFF
string.regexp#848ea9
meta.preprocessor, keyword.control.import#0072b2
invalid.deprecated#d55e00
invalid.deprecated#d55e00
constant, constant.language, support.constant#d55e00
constant#d55e00
storage.type, support.type, entity.name.type#0072b2
entity.name.type#0072b2
variable#e69f00
variable, variable.other#e69f00
variable#e69f00
entity.name.function#d55e00
entity.name.function, support.function#d55e00
entity.name.function#d55e00
support.function, support.class, support.type#0072b2
keyword, storage, keyword.control, storage.modifier#56b4e9
keyword#56b4e9
comment.documentation#d55e00
comment.documentation, comment.block.documentation#848ea9
comment.documentation#848ea9
string, string.quoted, string.template#848ea9
string#848ea9
comment, punctuation.definition.comment#009e73
comment#009e73
comment, punctuation.definition.comment#009e73
comment#009e73
invalid#0072b2
invalid
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#e69f00
invalid.illegal#d55e00
editorCursor.foreground
editorGutter.background
editorGroupHeader.tabsBackground#333333
statusBar.noFolderBackground#000000
statusBar.background, statusBar.foreground#000000
editorLineNumber.activeForeground
editorLineNumber.activeForeground#7F7F7F
editorLineNumber.foreground#7F7F7F
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#0072b2

Shiki preview

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

Loading...