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#1a1d2a
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#181a26
  • editor.findMatchBackground#104E8B
  • editor.foreground#CCCCCC
  • editor.selectionBackground#103050
  • editorCursor.background#00FF00
  • editorCursor.foreground#CCCCCC
  • editorGutter.background#181a26
  • editorLineNumber.activeForeground#B3B3B3
  • editorLineNumber.foreground#B3B3B3
  • inlineChatInput.background#1a1c29
  • inlineChatInput.foreground#CCCCCC
  • inlineChatInput.placeholderForeground#98F5FF
  • input.background#1a1c29
  • input.foreground#CCCCCC
  • input.placeholderForeground#98F5FF
  • panel.background#181a26
  • sideBar.background#1a1d2a
  • 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#00BFFF
comment#666666
markup.heading#DAA520
entity.name.tag#B3B3B3
entity.name.tag#98F5FF
comment#7F7F7F
markup.underline.link#DEB887
keyword#98F5FF
markup.list#B3B3B3
invalid#ADD8E6
keyword#FF0000
keyword#DEB887
invalid.deprecated#FFFF00
invalid.deprecated
markup.inserted#cceecc
markup.inserted#ddffdd
comment#DEB887
comment#00BFFF
comment#B0E2FF
comment#B4EEB4
comment#B0E2FF
keyword#DEB887
gitDecoration.addedResourceForeground#98F5FF
gitDecoration.untrackedResourceForeground#DEB887
gitDecoration.ignoredResourceForeground#7F7F7F
gitDecoration.renamedResourceForeground#FFE4B5
gitDecoration.modifiedResourceForeground#4EEE94
breadcrumb.foreground, tree.tableColumnHeader.foreground#A2CD5A
explorer.fileForeground#CCCCCC
explorer.directoryForeground#DAA520
comment.documentation#696969
editorSuggestWidget.highlightForeground#AFEEEE
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#DAA520
invalid#98F5FF
invalid#98F5FF
invalid#00008B
invalid#4EEE94
invalid, invalid.deprecated#FFFF00
invalid#FF0000
invalid.deprecated#FFFF00
invalid#FF0000
invalid#88090B
invalid.deprecated#FF0000
invalid#FF0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#00BFFF
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
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#FFFF00
entity.name.function#4EEE94
invalid.deprecated#FF0000
string#FFFFE0
invalid.deprecated#FFFF00
invalid#FF0000
invalid.deprecated#FFFF00
invalid#FF0000
variable#ADD8E6
variable#ADD8E6
comment#CCCCCC
comment
comment.documentation#32CD32
editor.findMatchBackground
editor.findMatchHighlightBackground#FFFFFF
editor.findMatchBackground, editor.findMatchHighlightBackground#FFFFFF
string.regexp#DEB887
meta.preprocessor, keyword.control.import#FFD700
invalid.deprecated#FF0000
invalid.deprecated#FF0000
constant, constant.language, support.constant#A2CD5A
constant#A2CD5A
storage.type, support.type, entity.name.type#98F5FF
entity.name.type#98F5FF
variable#4EEE94
variable, variable.other#4EEE94
variable#4EEE94
entity.name.function#DAA520
entity.name.function, support.function#DAA520
entity.name.function#DAA520
support.function, support.class, support.type#F08080
keyword, storage, keyword.control, storage.modifier#00BFFF
keyword#00BFFF
comment.documentation#A2CD5A
comment.documentation, comment.block.documentation#FFE4B5
comment.documentation#FFE4B5
string, string.quoted, string.template#DEB887
string#DEB887
comment, punctuation.definition.comment#7F7F7F
comment#7F7F7F
comment, punctuation.definition.comment#7F7F7F
comment#7F7F7F
invalid
invalid
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#FFFF00
invalid.illegal#FF0000
editorCursor.foreground
editorGutter.background
editorGroupHeader.tabsBackground#E6E6E6
statusBar.noFolderBackground#000000
statusBar.background, statusBar.foreground#000000
editorLineNumber.activeForeground
editorLineNumber.activeForeground#B3B3B3
editorLineNumber.foreground#B3B3B3
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground

Shiki preview

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

Loading...