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#e6ddd3
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fff5ea
  • editor.findMatchBackground#b0e0df
  • editor.foreground#584141
  • editor.selectionBackground#f0d2df
  • editorCursor.background#cf1f00
  • editorCursor.foreground#584141
  • editorGroup.border#c8bdb6
  • editorGutter.background#fff5ea
  • editorLineNumber.activeForeground#ba2d2f
  • editorLineNumber.foreground#63728f
  • inlineChatInput.background#e0d8ce
  • inlineChatInput.foreground#2c2121
  • inlineChatInput.placeholderForeground#a45a22
  • input.background#e0d8ce
  • input.foreground#2c2121
  • input.placeholderForeground#a45a22
  • panel.background#fff5ea
  • sideBar.background#e6ddd3
  • statusBar.background#ffaf72
  • statusBar.foreground#542f38
  • statusBar.noFolderBackground#e9e0d8
  • statusBarItem.remoteBackground#ffaf72
  • statusBarItem.remoteForeground#542f38

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#527545
comment#a04450
entity.name.tag#63728f
entity.name.tag#0f7f5f
comment#527545
markup.underline.link#8f5f4a
keyword#63728f
markup.fenced_code, markup.inline.raw
markup.list#63728f
invalid#ce3f00
keyword#a45a22
keyword#a45a22
invalid.deprecated#a45a22
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#527545
comment#a45a22
comment#527545
comment#ba2d2f
comment#0f7f5f
comment#ba2d2f
keyword#a45a22
gitDecoration.addedResourceForeground#007a0a
gitDecoration.untrackedResourceForeground#007a0a
gitDecoration.ignoredResourceForeground#63728f
gitDecoration.modifiedResourceForeground#a45a22
breadcrumb.foreground, tree.tableColumnHeader.foreground#ba2d2f
explorer.fileForeground#584141
explorer.directoryForeground#ba2d2f
comment.documentation#696969
editorSuggestWidget.highlightForeground#ba2d2f
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#ca3e54
invalid#0f7f5f
invalid#0f7f5f
invalid#007a0a
invalid, invalid.deprecated#a45a22
invalid#ce3f00
invalid.deprecated#a45a22
invalid#ce3f00
invalid#ce3f00
invalid.deprecated#a45a22
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#a45a22
variable#8448aa
entity.name.function#ca3e54
constant#ce3f00
string#5f7200
comment.documentation#63728f
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#ce3f00
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#ce3f00
invalid.deprecated#a45a22
entity.name.function#a45a22
invalid.deprecated#a45a22
string#5f7200
invalid.deprecated#a45a22
invalid#ce3f00
invalid.deprecated#a45a22
invalid#ce3f00
variable#8448aa
variable#63728f
comment#527545
comment#527545
comment.documentation#9a625a
entity.name.function#a45a22
editor.findMatchBackground#584141
editor.findMatchHighlightBackground#584141
editor.findMatchBackground, editor.findMatchHighlightBackground#584141
string.regexp#cb2f80
string.regexp#ca3e54
string.regexp#5f7200
meta.preprocessor, keyword.control.import#3f6faf
invalid.deprecated#a45a22
invalid.deprecated#a45a22
constant, constant.language, support.constant#ce3f00
constant#ce3f00
storage.type, support.type, entity.name.type#0f7f5f
entity.name.type#0f7f5f
variable#a04450
variable, variable.other#8448aa
variable#8448aa
entity.name.function#a04450
entity.name.function, support.function#ca3e54
entity.name.function#ca3e54
support.function, support.class, support.type#cf2f4f
keyword, storage, keyword.control, storage.modifier#a45a22
keyword#a45a22
comment.documentation#a04450
comment.documentation, comment.block.documentation#9a625a
comment.documentation#9a625a
string, string.quoted, string.template#5f7200
string#5f7200
comment, punctuation.definition.comment#527545
comment#527545
comment, punctuation.definition.comment#527545
comment#527545
invalid#584141
invalid#ce3f00
invalid.illegal#ce3f00
editor.wordHighlightStrongBackground#584141
invalid.deprecated#a45a22
invalid.illegal#ce3f00
editorCursor.foreground
editorGutter.background#584141
editorGroup.border#c8bdb6
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#63728f
statusBar.background, statusBar.foreground#542f38
editorLineNumber.activeForeground#ba2d2f
editorLineNumber.activeForeground#ba2d2f
editorLineNumber.foreground#63728f
invalid.deprecated
editor.selectionHighlightBackground#584141
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#584141

Shiki preview

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

Loading...