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#000000
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#000000
  • editor.findMatchBackground#006400
  • editor.foreground#F5DEB3
  • editor.selectionBackground#006400
  • editor.selectionForeground#FFFFFF
  • editorCursor.background#D8BFD8
  • editorCursor.foreground#F5DEB3
  • editorGutter.background#000000
  • editorLineNumber.activeForeground#B3B3B3
  • editorLineNumber.foreground#B3B3B3
  • inlineChatInput.background#000000
  • inlineChatInput.foreground#F5DEB3
  • inlineChatInput.placeholderForeground#00FFFF
  • input.background#000000
  • input.foreground#F5DEB3
  • input.placeholderForeground#00FFFF
  • panel.background#000000
  • sideBar.background#000000
  • statusBar.background#BFBFBF
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#4D4D4D
  • statusBarItem.remoteBackground#BFBFBF
  • statusBarItem.remoteForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#FFFFFF
comment#666666
markup.heading#98FB98
entity.name.tag#B3B3B3
entity.name.tag#7FFFD4
comment#00CD66
markup.underline.link#BDB76B
keyword#7FFFD4
markup.list#B3B3B3
invalid#ADD8E6
keyword#FF8C69
keyword#BDB76B
invalid.deprecated#FFA500
invalid.deprecated
markup.inserted#cceecc
markup.inserted#ddffdd
comment#BDB76B
comment#FFFFFF
comment#B0E2FF
comment#B4EEB4
comment#B0E2FF
keyword#BDB76B
gitDecoration.addedResourceForeground#7FFFD4
gitDecoration.untrackedResourceForeground#BDB76B
gitDecoration.ignoredResourceForeground#00CD66
gitDecoration.renamedResourceForeground#BDB76B
gitDecoration.modifiedResourceForeground#9ACD32
breadcrumb.foreground, tree.tableColumnHeader.foreground#40E0D0
explorer.fileForeground#F5DEB3
explorer.directoryForeground#98FB98
comment.documentation#696969
editorSuggestWidget.highlightForeground#AFEEEE
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#98FB98
invalid#7FFFD4
invalid#7FFFD4
invalid#9ACD32
invalid, invalid.deprecated#FFA500
invalid#FF8C69
invalid.deprecated#FFA500
invalid#FF8C69
invalid#88090B
invalid.deprecated#FF8C69
invalid#FF8C69
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#FFFFFF
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#00CD66
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file
meta.diff.header
invalid.deprecated#FF8C69
invalid.deprecated#FFA500
entity.name.function#9ACD32
invalid.deprecated#FF8C69
string#FFFFE0
invalid.deprecated#FFA500
invalid#FF8C69
invalid.deprecated#FFA500
invalid#FF8C69
variable#ADD8E6
variable#ADD8E6
comment#CCCCCC
comment
comment.documentation#32CD32
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#FFFFFF
string.regexp#BDB76B
meta.preprocessor, keyword.control.import#B0C4DE
invalid.deprecated#FF8C69
invalid.deprecated#FF8C69
constant, constant.language, support.constant#40E0D0
constant#40E0D0
storage.type, support.type, entity.name.type#7FFFD4
entity.name.type#7FFFD4
variable#9ACD32
variable, variable.other#9ACD32
variable#9ACD32
entity.name.function#98FB98
entity.name.function, support.function#98FB98
entity.name.function#98FB98
support.function, support.class, support.type#B0C4DE
keyword, storage, keyword.control, storage.modifier#FFFFFF
keyword#FFFFFF
comment.documentation#40E0D0
comment.documentation, comment.block.documentation#BDB76B
comment.documentation#BDB76B
string, string.quoted, string.template#BDB76B
string#BDB76B
comment, punctuation.definition.comment#00CD66
comment#00CD66
comment, punctuation.definition.comment#00CD66
comment#00CD66
invalid#FFFFFF
invalid#FFFFFF
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#FFA500
invalid.illegal#FF8C69
editorCursor.foreground
editorGutter.background
editorGroupHeader.tabsBackground#E6E6E6
statusBar.noFolderBackground#CCCCCC
statusBar.background, statusBar.foreground#000000
editorLineNumber.activeForeground
editorLineNumber.activeForeground#B3B3B3
editorLineNumber.foreground#B3B3B3
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground#FFFFFF
editor.findMatchBackground#FFFFFF

Shiki preview

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

Loading...