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#dddddd
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#F5F5F5
  • editor.findMatchBackground#87CEFF
  • editor.foreground#000000
  • editor.selectionBackground#87CEFF
  • editorCursor.background#008B00
  • editorCursor.foreground#000000
  • editorGutter.background#F5F5F5
  • editorLineNumber.activeForeground#7F7F7F
  • editorLineNumber.foreground#7F7F7F
  • inlineChatInput.background#d8d8d8
  • inlineChatInput.foreground#000000
  • inlineChatInput.placeholderForeground#104E8B
  • input.background#d8d8d8
  • input.foreground#000000
  • input.placeholderForeground#104E8B
  • panel.background#F5F5F5
  • sideBar.background#dddddd
  • statusBar.background#BFBFBF
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#666666
  • statusBarItem.remoteBackground#BFBFBF
  • statusBarItem.remoteForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#1C86EE
comment#999999
markup.heading#CD950C
entity.name.tag#7F7F7F
entity.name.tag#00688B
comment#7F7F7F
markup.underline.link#8B7355
keyword#00688B
markup.list#7F7F7F
invalid#ADD8E6
keyword#FF0000
keyword#8B7355
invalid.deprecated#8B8B00
invalid.deprecated
markup.inserted#22aa22
markup.inserted#22aa22
comment#8B7355
comment#1C86EE
comment#4A708B
comment#6E8B3D
comment#4A708B
keyword#8B7355
gitDecoration.addedResourceForeground#00688B
gitDecoration.untrackedResourceForeground#8B7355
gitDecoration.ignoredResourceForeground#7F7F7F
gitDecoration.renamedResourceForeground#CD853F
gitDecoration.modifiedResourceForeground#2E8B57
breadcrumb.foreground, tree.tableColumnHeader.foreground#6E8B3D
explorer.fileForeground#000000
explorer.directoryForeground#CD950C
comment.documentation#696969
editorSuggestWidget.highlightForeground#8B0000
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#000000
invalid#FF0000
invalid#CD950C
invalid#00688B
invalid#00688B
invalid#00008B
invalid#228B22
invalid, invalid.deprecated#8B8B00
invalid#FF0000
invalid.deprecated#8B8B00
invalid#FF0000
invalid#88090B
invalid.deprecated#FF0000
invalid#FF0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#1C86EE
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#7F7F7F
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file
meta.diff.header
invalid.deprecated#FF0000
invalid.deprecated#8B8B00
entity.name.function#2E8B57
invalid.deprecated#FF0000
string#00008B
invalid.deprecated#8B8B00
invalid#FF0000
invalid.deprecated#8B8B00
invalid#FF0000
variable#0000FF
variable#0000FF
comment#00008B
comment
comment.documentation#006400
editor.findMatchBackground
editor.findMatchHighlightBackground#FFFFFF
editor.findMatchBackground, editor.findMatchHighlightBackground#FFFFFF
string.regexp#8B7355
meta.preprocessor, keyword.control.import#CDAD00
invalid.deprecated#FF0000
invalid.deprecated#FF0000
constant, constant.language, support.constant#6E8B3D
constant#6E8B3D
storage.type, support.type, entity.name.type#00688B
entity.name.type#00688B
variable#2E8B57
variable, variable.other#2E8B57
variable#2E8B57
entity.name.function#CD950C
entity.name.function, support.function#CD950C
entity.name.function#CD950C
support.function, support.class, support.type#CD6600
keyword, storage, keyword.control, storage.modifier#1C86EE
keyword#1C86EE
comment.documentation#6E8B3D
comment.documentation, comment.block.documentation#CD853F
comment.documentation#CD853F
string, string.quoted, string.template#8B7355
string#8B7355
comment, punctuation.definition.comment#7F7F7F
comment#7F7F7F
comment, punctuation.definition.comment#7F7F7F
comment#7F7F7F
invalid
invalid
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#8B8B00
invalid.illegal#FF0000
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

Shiki preview

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

Loading...