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#383838
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#333333
  • editor.findMatchBackground#2E8B57
  • editor.foreground#F5F5F5
  • editor.selectionBackground#2E8B57
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#F5F5F5
  • editorGutter.background#333333
  • editorLineNumber.activeForeground#B3B3B3
  • editorLineNumber.foreground#B3B3B3
  • inlineChatInput.background#373737
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#0000CD
  • input.background#373737
  • input.foreground#ffffff
  • input.placeholderForeground#0000CD
  • panel.background#333333
  • sideBar.background#383838
  • statusBar.background#4D4D4D
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#4D4D4D
  • statusBarItem.remoteBackground#4D4D4D
  • statusBarItem.remoteForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#20B2AA
comment#666666
markup.heading#00FF7F
entity.name.tag#B3B3B3
entity.name.tag#9370DB
comment#CD853F
markup.underline.link#FFA07A
keyword#9370DB
markup.list#B3B3B3
invalid#ADD8E6
keyword#FF69B4
keyword#FFA07A
invalid.deprecated#FF8C00
invalid.deprecated
markup.inserted#cceecc
markup.inserted#ddffdd
comment#FFA07A
comment#20B2AA
comment#B0E2FF
comment#B4EEB4
comment#B0E2FF
keyword#FFA07A
gitDecoration.addedResourceForeground#9370DB
gitDecoration.untrackedResourceForeground#FFA07A
gitDecoration.ignoredResourceForeground#CD853F
gitDecoration.renamedResourceForeground#CD5C5C
gitDecoration.modifiedResourceForeground#9ACD32
breadcrumb.foreground, tree.tableColumnHeader.foreground#1E90FF
explorer.fileForeground#F5F5F5
explorer.directoryForeground#00FF7F
comment.documentation#696969
editorSuggestWidget.highlightForeground#AFEEEE
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#00FF7F
invalid#9370DB
invalid#9370DB
invalid#00FF00
invalid, invalid.deprecated#FF8C00
invalid#FF1493
invalid.deprecated#FF8C00
invalid#FF1493
invalid#88090B
invalid.deprecated#FF69B4
invalid#FF1493
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#20B2AA
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#CD853F
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file
meta.diff.header
invalid.deprecated#FF1493
invalid.deprecated#FF8C00
entity.name.function#9ACD32
invalid.deprecated#FF69B4
string#FFFFE0
invalid.deprecated#FF8C00
invalid#FF1493
invalid.deprecated#FF8C00
invalid#FF1493
variable#ADD8E6
variable#ADD8E6
comment#CCCCCC
comment
comment.documentation#32CD32
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#8B2323
string.regexp#FFA07A
meta.preprocessor, keyword.control.import#6495ED
invalid.deprecated#FF69B4
invalid.deprecated#FF69B4
constant, constant.language, support.constant#1E90FF
constant#1E90FF
storage.type, support.type, entity.name.type#9370DB
entity.name.type#9370DB
variable#9ACD32
variable, variable.other#9ACD32
variable#9ACD32
entity.name.function#00FF7F
entity.name.function, support.function#00FF7F
entity.name.function#00FF7F
support.function, support.class, support.type#76EE00
keyword, storage, keyword.control, storage.modifier#20B2AA
keyword#20B2AA
comment.documentation#1E90FF
comment.documentation, comment.block.documentation#CD5C5C
comment.documentation#CD5C5C
string, string.quoted, string.template#FFA07A
string#FFA07A
comment, punctuation.definition.comment#CD853F
comment#CD853F
comment, punctuation.definition.comment#CD853F
comment#CD853F
invalid
invalid
invalid.illegal
editor.wordHighlightStrongBackground
invalid.deprecated#FF8C00
invalid.illegal#FF1493
editorCursor.foreground
editorGutter.background
statusBar.noFolderBackground#A9A9A9
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#B3B3B3
editorLineNumber.foreground#B3B3B3
invalid.deprecated
editor.selectionHighlightBackground#f6f3e8
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground

Shiki preview

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

Loading...