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#282828
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#242424
  • editor.findMatchBackground#454545
  • editor.foreground#f6f3e8
  • editor.selectionBackground#444444
  • editorCursor.background#656565
  • editorCursor.foreground#f6f3e8
  • editorGutter.background#242424
  • editorLineNumber.activeForeground#B3B3B3
  • editorLineNumber.foreground#B3B3B3
  • inlineChatInput.background#272727
  • inlineChatInput.foreground#f6f3e8
  • inlineChatInput.placeholderForeground#e5786d
  • input.background#272727
  • input.foreground#f6f3e8
  • input.placeholderForeground#e5786d
  • panel.background#242424
  • sideBar.background#282828
  • statusBar.background#444444
  • statusBar.foreground#f6f3e8
  • statusBar.noFolderBackground#444444
  • statusBarItem.remoteBackground#444444
  • statusBarItem.remoteForeground#f6f3e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8ac6f2
comment#666666
markup.heading#cae682
entity.name.tag#B3B3B3
entity.name.tag#92a65e
comment#99968b
markup.underline.link#95e454
keyword#92a65e
markup.list#B3B3B3
invalid#ADD8E6
keyword#ccaa8f
keyword#95e454
invalid.deprecated#FF8C00
invalid.deprecated
markup.inserted#cceecc
markup.inserted#ddffdd
comment#95e454
comment#8ac6f2
comment#B0E2FF
comment#B4EEB4
comment#B0E2FF
keyword#95e454
gitDecoration.addedResourceForeground#92a65e
gitDecoration.untrackedResourceForeground#95e454
gitDecoration.ignoredResourceForeground#99968b
gitDecoration.renamedResourceForeground#95e454
gitDecoration.modifiedResourceForeground#cae682
breadcrumb.foreground, tree.tableColumnHeader.foreground#e5786d
explorer.fileForeground#f6f3e8
explorer.directoryForeground#cae682
comment.documentation#696969
editorSuggestWidget.highlightForeground#AFEEEE
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#cae682
invalid#92a65e
invalid#92a65e
invalid#00FF00
invalid, invalid.deprecated#FF8C00
invalid#FFC0CB
invalid.deprecated#FF8C00
invalid#FFC0CB
invalid#88090B
invalid.deprecated#ccaa8f
invalid#FFC0CB
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#8ac6f2
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#99968b
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file
meta.diff.header
invalid.deprecated#FFC0CB
invalid.deprecated#FF8C00
entity.name.function#cae682
invalid.deprecated#ccaa8f
string#FFFFE0
invalid.deprecated#FF8C00
invalid#FFC0CB
invalid.deprecated#FF8C00
invalid#FFC0CB
variable#ADD8E6
variable#ADD8E6
comment#CCCCCC
comment
comment.documentation#32CD32
editor.findMatchBackground
editor.findMatchHighlightBackground#a0a8b0
editor.findMatchBackground, editor.findMatchHighlightBackground#857b6f
string.regexp#95e454
meta.preprocessor, keyword.control.import#e5786d
invalid.deprecated#ccaa8f
invalid.deprecated#ccaa8f
constant, constant.language, support.constant#e5786d
constant#e5786d
storage.type, support.type, entity.name.type#92a65e
entity.name.type#92a65e
variable#cae682
variable, variable.other#cae682
variable#cae682
entity.name.function#cae682
entity.name.function, support.function#cae682
entity.name.function#cae682
support.function, support.class, support.type#e5786d
keyword, storage, keyword.control, storage.modifier#8ac6f2
keyword#8ac6f2
comment.documentation#e5786d
comment.documentation, comment.block.documentation#95e454
comment.documentation#95e454
string, string.quoted, string.template#95e454
string#95e454
comment, punctuation.definition.comment#99968b
comment#99968b
comment, punctuation.definition.comment#99968b
comment#99968b
invalid#ffffff
invalid
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#FF8C00
invalid.illegal#FFC0CB
editorCursor.foreground
editorGutter.background
editorGroupHeader.tabsBackground#e7f6da
statusBar.noFolderBackground#857b6f
statusBar.background, statusBar.foreground#f6f3e8
editorLineNumber.activeForeground
editorLineNumber.activeForeground#B3B3B3
editorLineNumber.foreground#B3B3B3
invalid.deprecated
editor.selectionHighlightBackground#f6f3e8
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#ffffff

Shiki preview

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

Loading...