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#e3ded7
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fcf7ef
  • editor.findMatchBackground#efc26f
  • editor.foreground#242521
  • editor.selectionBackground#e0e7e5
  • editorCursor.background#007f00
  • editorCursor.foreground#242521
  • editorGroup.border#c4c0b6
  • editorGutter.background#fcf7ef
  • editorLineNumber.activeForeground#006f00
  • editorLineNumber.foreground#59786f
  • inlineChatInput.background#ded9d2
  • inlineChatInput.foreground#242521
  • inlineChatInput.placeholderForeground#006f00
  • input.background#ded9d2
  • input.foreground#242521
  • input.placeholderForeground#006f00
  • panel.background#fcf7ef
  • sideBar.background#e3ded7
  • statusBar.background#c0df6f
  • statusBar.foreground#142010
  • statusBar.noFolderBackground#e5e3d8
  • statusBarItem.remoteBackground#c0df6f
  • statusBarItem.remoteForeground#142010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8f6f4a
comment#3a6f48
entity.name.tag#59786f
entity.name.tag#444fcf
comment#8f6f4a
markup.underline.link#7f475a
keyword#59786f
markup.fenced_code, markup.inline.raw
markup.list#59786f
invalid#dd0020
keyword#a7601f
keyword#006f00
invalid.deprecated#a7601f
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#8f6f4a
comment#007a9f
comment#8f6f4a
comment#006f00
comment#ca3400
comment#006f00
keyword#006f00
gitDecoration.addedResourceForeground#006f00
gitDecoration.untrackedResourceForeground#006f00
gitDecoration.ignoredResourceForeground#59786f
gitDecoration.modifiedResourceForeground#a7601f
breadcrumb.foreground, tree.tableColumnHeader.foreground#006f00
explorer.fileForeground#242521
explorer.directoryForeground#006f00
comment.documentation#696969
editorSuggestWidget.highlightForeground#006f00
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#a7601f
invalid#444fcf
invalid#444fcf
invalid#006f00
invalid, invalid.deprecated#a7601f
invalid#dd0020
invalid.deprecated#a7601f
invalid#dd0020
invalid#dd0020
invalid.deprecated#a7601f
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#006f00
variable#007a9f
entity.name.function#a7601f
constant#00824f
string#ca3400
comment.documentation#59786f
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#dd0020
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#dd0020
invalid.deprecated#a7601f
entity.name.function#a7601f
invalid.deprecated#a7601f
string#ca3400
invalid.deprecated#a7601f
invalid#dd0020
invalid.deprecated#a7601f
invalid#dd0020
variable#007a9f
variable#59786f
comment#8f6f4a
comment#8f6f4a
comment.documentation#4f677f
entity.name.function#a7601f
editor.findMatchBackground#242521
editor.findMatchHighlightBackground#242521
editor.findMatchBackground, editor.findMatchHighlightBackground#242521
string.regexp#007a9f
string.regexp#9a456f
string.regexp#ca3400
meta.preprocessor, keyword.control.import#9f0d0f
invalid.deprecated#a7601f
invalid.deprecated#a7601f
constant, constant.language, support.constant#00824f
constant#00824f
storage.type, support.type, entity.name.type#444fcf
entity.name.type#444fcf
variable#4f677f
variable, variable.other#007a9f
variable#007a9f
entity.name.function#8f6f4a
entity.name.function, support.function#a7601f
entity.name.function#a7601f
support.function, support.class, support.type#557400
keyword, storage, keyword.control, storage.modifier#006f00
keyword#006f00
comment.documentation#804f60
comment.documentation, comment.block.documentation#4f677f
comment.documentation#4f677f
string, string.quoted, string.template#ca3400
string#ca3400
comment, punctuation.definition.comment#8f6f4a
comment#8f6f4a
comment, punctuation.definition.comment#8f6f4a
comment#8f6f4a
invalid#242521
invalid#dd0020
invalid.illegal#dd0020
editor.wordHighlightStrongBackground#242521
invalid.deprecated#a7601f
invalid.illegal#dd0020
editorCursor.foreground
editorGutter.background#242521
editorGroup.border#c4c0b6
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#59786f
statusBar.background, statusBar.foreground#142010
editorLineNumber.activeForeground#006f00
editorLineNumber.activeForeground#006f00
editorLineNumber.foreground#59786f
invalid.deprecated
editor.selectionHighlightBackground#242521
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#242521

Shiki preview

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

Loading...