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#372327
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#322023
  • editor.findMatchBackground#3f6a50
  • editor.foreground#e4d3e1
  • editor.selectionBackground#45524a
  • editorCursor.background#ef607a
  • editorCursor.foreground#e4d3e1
  • editorGroup.border#6f5f58
  • editorGutter.background#322023
  • editorLineNumber.activeForeground#8ad05a
  • editorLineNumber.foreground#9d9d9d
  • inlineChatInput.background#362326
  • inlineChatInput.foreground#fbe8f8
  • inlineChatInput.placeholderForeground#80dfbf
  • input.background#362326
  • input.foreground#fbe8f8
  • input.placeholderForeground#80dfbf
  • panel.background#322023
  • sideBar.background#372327
  • statusBar.background#814558
  • statusBar.foreground#e8e5e7
  • statusBar.noFolderBackground#4a3842
  • statusBarItem.remoteBackground#814558
  • statusBarItem.remoteForeground#e8e5e7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9aba8b
comment#9aba8b
entity.name.tag#9d9d9d
entity.name.tag#7fc5df
comment#9aba8b
markup.underline.link#96c4af
keyword#9d9d9d
markup.fenced_code, markup.inline.raw
markup.list#9d9d9d
invalid#ff7f5f
keyword#f2a85f
keyword#ffb2d6
invalid.deprecated#f2a85f
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#9aba8b
comment#f2a85f
comment#9aba8b
comment#8ad05a
comment#f28fdf
comment#8ad05a
keyword#ffb2d6
gitDecoration.addedResourceForeground#5fbb5f
gitDecoration.untrackedResourceForeground#5fbb5f
gitDecoration.ignoredResourceForeground#9d9d9d
gitDecoration.modifiedResourceForeground#f2a85f
breadcrumb.foreground, tree.tableColumnHeader.foreground#8ad05a
explorer.fileForeground#e4d3e1
explorer.directoryForeground#8ad05a
comment.documentation#696969
editorSuggestWidget.highlightForeground#8ad05a
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#f28fdf
invalid#7fc5df
invalid#7fc5df
invalid#5fbb5f
invalid, invalid.deprecated#f2a85f
invalid#ff7f5f
invalid.deprecated#f2a85f
invalid#ff7f5f
invalid#ff7f5f
invalid.deprecated#f2a85f
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#ffb2d6
variable#80dfbf
entity.name.function#f28fdf
constant#49d081
string#8ad05a
comment.documentation#9d9d9d
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ff7f5f
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ff7f5f
invalid.deprecated#f2a85f
entity.name.function#f2a85f
invalid.deprecated#f2a85f
string#8ad05a
invalid.deprecated#f2a85f
invalid#ff7f5f
invalid.deprecated#f2a85f
invalid#ff7f5f
variable#80dfbf
variable#9d9d9d
comment#9aba8b
comment#9aba8b
comment.documentation#d8c09f
entity.name.function#f2a85f
editor.findMatchBackground#e4d3e1
editor.findMatchHighlightBackground#e4d3e1
editor.findMatchBackground, editor.findMatchHighlightBackground#e4d3e1
string.regexp#62cff7
string.regexp#ffb2d6
string.regexp#8ad05a
meta.preprocessor, keyword.control.import#f0888f
invalid.deprecated#f2a85f
invalid.deprecated#f2a85f
constant, constant.language, support.constant#49d081
constant#49d081
storage.type, support.type, entity.name.type#7fc5df
entity.name.type#7fc5df
variable#99bfcf
variable, variable.other#80dfbf
variable#80dfbf
entity.name.function#c59fdf
entity.name.function, support.function#f28fdf
entity.name.function#f28fdf
support.function, support.class, support.type#cfb1ff
keyword, storage, keyword.control, storage.modifier#ffb2d6
keyword#ffb2d6
comment.documentation#c59fdf
comment.documentation, comment.block.documentation#d8c09f
comment.documentation#d8c09f
string, string.quoted, string.template#8ad05a
string#8ad05a
comment, punctuation.definition.comment#9aba8b
comment#9aba8b
comment, punctuation.definition.comment#9aba8b
comment#9aba8b
invalid#e4d3e1
invalid#ff7f5f
invalid.illegal#ff7f5f
editor.wordHighlightStrongBackground#e4d3e1
invalid.deprecated#f2a85f
invalid.illegal#ff7f5f
editorCursor.foreground
editorGutter.background#e4d3e1
editorGroup.border#6f5f58
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#9d9d9d
statusBar.background, statusBar.foreground#e8e5e7
editorLineNumber.activeForeground#8ad05a
editorLineNumber.activeForeground#8ad05a
editorLineNumber.foreground#9d9d9d
invalid.deprecated
editor.selectionHighlightBackground#e4d3e1
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#e4d3e1

Shiki preview

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

Loading...