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#222835
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#1f2430
  • editor.findMatchBackground#ffcc66
  • editor.foreground#cbccc6
  • editor.selectionBackground#2f3b54
  • editorCursor.background#ffcc66
  • editorCursor.foreground#cbccc6
  • editorGroup.border#11131a
  • editorGutter.background#1f2430
  • editorLineNumber.activeForeground#cbccc6
  • editorLineNumber.foreground#f5f7fd
  • inlineChatInput.background#212734
  • inlineChatInput.foreground#dfe0da
  • inlineChatInput.placeholderForeground#ffcc66
  • input.background#212734
  • input.foreground#dfe0da
  • input.placeholderForeground#ffcc66
  • panel.background#1f2430
  • sideBar.background#222835
  • statusBar.background#141820
  • statusBar.foreground#cbccc6
  • statusBar.noFolderBackground#171b24
  • statusBarItem.remoteBackground#141820
  • statusBarItem.remoteForeground#cbccc6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ffa759
comment#484f5b
markup.heading#f28779
entity.name.tag#484f5b
entity.name.tag#ffa759
comment#484f5b
markup.underline.link#d4bfff
keyword#ffe6b3
markup.fenced_code, markup.inline.raw
markup.list#f28779
invalid#ff3333
keyword#ffd580
keyword#bae67e
invalid.deprecated#ffd580
invalid.deprecated
markup.inserted#a6cc70
markup.inserted#84a359
comment#dccbff
comment#ffa759
comment#ffa759
comment#bae67e
comment#d4bfff
keyword#5ccfe6
gitDecoration.addedResourceForeground#a6cc70
gitDecoration.untrackedResourceForeground#757b83
gitDecoration.ignoredResourceForeground#484f5b
gitDecoration.renamedResourceForeground#757b83
gitDecoration.modifiedResourceForeground#dccbff
breadcrumb.foreground, tree.tableColumnHeader.foreground#bae67e
explorer.fileForeground#cbccc6
explorer.directoryForeground#cbccc6
comment.documentation#696969
editorSuggestWidget.highlightForeground#ffcc66
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#cbccc6
invalid#FF0000
invalid#ffd580
invalid#ffe6b3
invalid#ffe6b3
invalid#bae67e
invalid, invalid.deprecated#ffd580
invalid#ff3333
invalid.deprecated#ffd580
invalid#ff3333
invalid#ff3333
invalid.deprecated#ffd580
invalid#ff3333
invalid.deprecated#ffd580
invalid#ff3333
entity.name.type#ffa759
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#484f5b
diffEditor.insertedTextBackground#bae67e
diffEditor.removedTextBackground#f27983
invalid#FF0000
entity.name.function#5ccfe6
diff.insertedTextBackground#bae67e
diff.removedTextBackground#f27983
meta.diff.header.file#73d0ff
meta.diff.header#5ccfe6
invalid.deprecated#ff3333
invalid.deprecated#ffd580
entity.name.function#cbccc6
invalid.deprecated#ffd580
string#FFFFE0
invalid.deprecated#ffd580
invalid#ff3333
invalid.deprecated#ffd580
invalid#ff3333
variable#bae67e
variable#d4bfff
variable#171b24
comment#171b24
comment#cbccc6
comment.documentation#bae67e
editor.findMatchBackground#bae67e
editor.findMatchHighlightBackground#11131a
editor.findMatchBackground, editor.findMatchHighlightBackground#11131a
string.regexp#f29e74
string.regexp#f29e74
string.regexp#bae67e
meta.preprocessor, keyword.control.import#f29e74
invalid.deprecated#ffd580
invalid.deprecated#ffd580
constant, constant.language, support.constant#d4bfff
constant#d4bfff
storage.type, support.type, entity.name.type#ffe6b3
entity.name.type#ffe6b3
variable#cbccc6
variable, variable.other#cbccc6
variable#cbccc6
entity.name.function#ffd580
entity.name.function, support.function#ffd580
entity.name.function#ffd580
keyword, storage, keyword.control, storage.modifier#ffa759
keyword#ffa759
comment.documentation#d4bfff
comment.documentation, comment.block.documentation#757b83
comment.documentation#757b83
string, string.quoted, string.template#bae67e
string#bae67e
comment, punctuation.definition.comment#484f5b
comment#484f5b
comment, punctuation.definition.comment#484f5b
comment#484f5b
invalid#3d434d
invalid
invalid.illegal#3d434d
editor.wordHighlightStrongBackground#cbccc6
invalid.deprecated#ffd580
invalid.illegal#ff3333
editorCursor.foreground
editorGutter.background#f5f7fd
editorGroup.border#11131a
editorGroupHeader.tabsBackground#cbccc6
statusBar.noFolderBackground#cbccc6
statusBar.background, statusBar.foreground#cbccc6
editorLineNumber.activeForeground
editorLineNumber.activeForeground#cbccc6
editorLineNumber.foreground#f5f7fd
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#3d434d

Shiki preview

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

Loading...