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#e4ddcc
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#FDF6E3
  • editor.findMatchBackground#268bd2
  • editor.foreground#556b72
  • editor.selectionBackground#d6d0bf
  • editorCursor.background#268bd2
  • editorCursor.foreground#556b72
  • editorGroup.border#E1DBCD
  • editorGutter.background#FDF6E3
  • editorLineNumber.activeForeground#556b72
  • editorLineNumber.foreground#96A7A9
  • inlineChatInput.background#dfd8c8
  • inlineChatInput.foreground#2b3639
  • inlineChatInput.placeholderForeground#268bd2
  • input.background#dfd8c8
  • input.foreground#2b3639
  • input.placeholderForeground#268bd2
  • panel.background#FDF6E3
  • sideBar.background#e4ddcc
  • statusBar.background#f0e9d7
  • statusBar.foreground#2b3639
  • statusBar.noFolderBackground#f6efdd
  • statusBarItem.remoteBackground#f0e9d7
  • statusBarItem.remoteForeground#2b3639

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#859900
comment#96A7A9
markup.heading#dc322f
entity.name.tag#D6D6D6
entity.name.tag#859900
comment#96A7A9
markup.underline.link#d33682
keyword#b58900
markup.fenced_code, markup.inline.raw
markup.list#dc322f
invalid#dc322f
keyword#b58900
keyword#2aa198
invalid.deprecated#b58900
invalid.deprecated
markup.inserted#859900
markup.inserted#6a7a00
comment#6c71c4
comment#859900
comment#cb4b16
comment#859900
comment#d33682
keyword#2aa198
gitDecoration.addedResourceForeground#859900
gitDecoration.untrackedResourceForeground#35a69c
gitDecoration.ignoredResourceForeground#96A7A9
gitDecoration.renamedResourceForeground#35a69c
gitDecoration.modifiedResourceForeground#6c71c4
breadcrumb.foreground, tree.tableColumnHeader.foreground#2aa198
explorer.fileForeground#556b72
explorer.directoryForeground#556b72
comment.documentation#696969
editorSuggestWidget.highlightForeground#268bd2
editorSuggestWidget.selectedBackground#F2E6CE
editorSuggestWidget.background#556b72
invalid#FF0000
invalid#b58900
invalid#b58900
invalid#b58900
invalid#859900
invalid, invalid.deprecated#b58900
invalid#dc322f
invalid.deprecated#b58900
invalid#dc322f
invalid#dc322f
invalid.deprecated#b58900
invalid#dc322f
invalid.deprecated#b58900
invalid#dc322f
entity.name.type#859900
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#96A7A9
diffEditor.insertedTextBackground#859900
diffEditor.removedTextBackground#dc322f
invalid#FF0000
entity.name.function#2aa198
diff.insertedTextBackground#859900
diff.removedTextBackground#dc322f
meta.diff.header.file#268bd2
meta.diff.header#2aa198
invalid.deprecated#dc322f
invalid.deprecated#b58900
entity.name.function#268bd2
invalid.deprecated#b58900
string#00008B
invalid.deprecated#b58900
invalid#dc322f
invalid.deprecated#b58900
invalid#dc322f
variable#859900
variable#d33682
variable#E1DBCD
comment#E1DBCD
comment#556b72
comment.documentation#859900
editor.findMatchBackground#859900
editor.findMatchHighlightBackground#FFFBF0
editor.findMatchBackground, editor.findMatchHighlightBackground#FFFBF0
string.regexp#268bd2
string.regexp#268bd2
string.regexp#2aa198
meta.preprocessor, keyword.control.import#268bd2
invalid.deprecated#b58900
invalid.deprecated#b58900
constant, constant.language, support.constant#6c71c4
constant#6c71c4
storage.type, support.type, entity.name.type#b58900
entity.name.type#b58900
variable#268bd2
variable, variable.other#268bd2
variable#268bd2
entity.name.function#b58900
entity.name.function, support.function#b58900
entity.name.function#b58900
support.function, support.class, support.type#d33682
keyword, storage, keyword.control, storage.modifier#859900
keyword#859900
comment.documentation#6c71c4
comment.documentation, comment.block.documentation#35a69c
comment.documentation#35a69c
string, string.quoted, string.template#2aa198
string#2aa198
comment, punctuation.definition.comment#96A7A9
comment#96A7A9
comment, punctuation.definition.comment#96A7A9
comment#96A7A9
invalid#FFFBF0
invalid
invalid.illegal#FFFBF0
editor.wordHighlightStrongBackground#dc322f
invalid.deprecated#b58900
invalid.illegal#dc322f
editorCursor.foreground
editorGutter.background#E1DBCD
editorGroup.border#E1DBCD
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#96A7A9
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#556b72
editorLineNumber.foreground#96A7A9
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#FFFBF0

Shiki preview

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

Loading...