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#322e33
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#2D2A2E
  • editor.findMatchBackground#FCFCFA
  • editor.foreground#FCFCFA
  • editor.selectionBackground#4C4A4D
  • editorCursor.background#FCFCFA
  • editorCursor.foreground#FCFCFA
  • editorGroup.border#413f42
  • editorGutter.background#2D2A2E
  • editorLineNumber.activeForeground#FFD866
  • editorLineNumber.foreground#4C4A4D
  • inlineChatInput.background#312d32
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#FCFCFA
  • input.background#312d32
  • input.foreground#ffffff
  • input.placeholderForeground#FCFCFA
  • panel.background#2D2A2E
  • sideBar.background#322e33
  • statusBar.background#221F22
  • statusBar.foreground#939293
  • statusBar.noFolderBackground#2D2A2E
  • statusBarItem.remoteBackground#221F22
  • statusBarItem.remoteForeground#939293

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#FF6188
comment#727072
markup.heading#FCFCFA
entity.name.tag#FF6188
entity.name.tag#FF6188
comment#727072
markup.underline.link#FF6188
keyword#78DCE8
markup.fenced_code, markup.inline.raw
markup.list#CC6666
invalid#CC6666
keyword#FFD866
keyword#FFD866
invalid.deprecated#FFD866
invalid.deprecated
markup.inserted#A9DC76
markup.inserted#87b05e
comment#AB9DF2
comment#FF6188
comment#FC9867
comment#A9DC76
comment#FF6188
keyword#78DCE8
gitDecoration.addedResourceForeground#A9DC76
gitDecoration.untrackedResourceForeground#FFD866
gitDecoration.ignoredResourceForeground#727072
gitDecoration.renamedResourceForeground#FFD866
gitDecoration.modifiedResourceForeground#AB9DF2
breadcrumb.foreground, tree.tableColumnHeader.foreground#FFD866
explorer.fileForeground#939293
explorer.directoryForeground#FCFCFA
comment.documentation#696969
editorSuggestWidget.highlightForeground#FCFCFA
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#939293
invalid#FF0000
invalid#A9DC76
invalid#78DCE8
invalid#78DCE8
invalid#A9DC76
invalid, invalid.deprecated#FFD866
invalid#CC6666
invalid.deprecated#FFD866
invalid#CC6666
invalid#CC6666
invalid.deprecated#FFD866
invalid#CC6666
invalid.deprecated#FFD866
invalid#CC6666
entity.name.type#FF6188
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#727072
diffEditor.insertedTextBackground#A9DC76
diffEditor.removedTextBackground#CC6666
invalid#FF0000
entity.name.function#78DCE8
diff.insertedTextBackground#A9DC76
diff.removedTextBackground#CC6666
meta.diff.header.file#78DCE8
meta.diff.header#78DCE8
invalid.deprecated#CC6666
invalid.deprecated#FFD866
entity.name.function#FCFCFA
invalid.deprecated#FFD866
string#FFFFE0
invalid.deprecated#FFD866
invalid#CC6666
invalid.deprecated#FFD866
invalid#CC6666
variable#A9DC76
variable#FF6188
variable#727072
comment#727072
comment#FCFCFA
comment.documentation#A9DC76
editor.findMatchBackground#FCFCFA
editor.findMatchHighlightBackground#FCFCFA
editor.findMatchBackground, editor.findMatchHighlightBackground#FCFCFA
string.regexp#FF6188
string.regexp#FF6188
string.regexp#FFD866
meta.preprocessor, keyword.control.import#FF6188
invalid.deprecated#FFD866
invalid.deprecated#FFD866
constant, constant.language, support.constant#AB9DF2
constant#AB9DF2
storage.type, support.type, entity.name.type#78DCE8
entity.name.type#78DCE8
variable#FCFCFA
variable, variable.other#FCFCFA
variable#FCFCFA
entity.name.function#A9DC76
entity.name.function, support.function#A9DC76
entity.name.function#A9DC76
support.function, support.class, support.type#78DCE8
keyword, storage, keyword.control, storage.modifier#FF6188
keyword#FF6188
comment.documentation#AB9DF2
comment.documentation, comment.block.documentation#FFD866
comment.documentation#FFD866
string, string.quoted, string.template#FFD866
string#FFD866
comment, punctuation.definition.comment#727072
comment#727072
comment, punctuation.definition.comment#727072
comment#727072
invalid#19181A
invalid
invalid.illegal#19181A
editor.wordHighlightStrongBackground#CC6666
invalid.deprecated#FFD866
invalid.illegal#CC6666
editorCursor.foreground
editorGutter.background#383539
editorGroup.border#413f42
editorGroupHeader.tabsBackground#939293
statusBar.noFolderBackground#727072
statusBar.background, statusBar.foreground#939293
editorLineNumber.activeForeground
editorLineNumber.activeForeground#FFD866
editorLineNumber.foreground#4C4A4D
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#19181A

Shiki preview

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

Loading...