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#e2d9b3
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fbf1c7
  • editor.findMatchBackground#a89984
  • editor.foreground#282828
  • editor.selectionBackground#d9cea9
  • editorCursor.background#a89984
  • editorCursor.foreground#282828
  • editorGroup.border#d3c5a0
  • editorGutter.background#fbf1c7
  • editorLineNumber.activeForeground#af3a03
  • editorLineNumber.foreground#a89984
  • inlineChatInput.background#ddd4af
  • inlineChatInput.foreground#242424
  • inlineChatInput.placeholderForeground#a89984
  • input.background#ddd4af
  • input.foreground#242424
  • input.placeholderForeground#a89984
  • panel.background#fbf1c7
  • sideBar.background#e2d9b3
  • statusBar.background#ebdbb2
  • statusBar.foreground#242424
  • statusBar.noFolderBackground#e1d8b3
  • statusBarItem.remoteBackground#ebdbb2
  • statusBarItem.remoteForeground#242424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9d0006
comment#076678
markup.heading#9d0006
entity.name.tag#504945
entity.name.tag#9d0006
comment#a89984
markup.underline.link#b16286
keyword#8f3f71
markup.fenced_code, markup.inline.raw
markup.list#9d0006
invalid#9d0006
keyword#af3a03
keyword#79740e
invalid.deprecated#af3a03
invalid.deprecated
markup.inserted#79740e
markup.inserted#79740e
comment#8f3f71
comment#9d0006
comment#af3a03
comment#79740e
comment#b16286
keyword#427b58
gitDecoration.addedResourceForeground#79740e
gitDecoration.untrackedResourceForeground#79740e
gitDecoration.ignoredResourceForeground#a89984
gitDecoration.renamedResourceForeground#79740e
gitDecoration.modifiedResourceForeground#8f3f71
breadcrumb.foreground, tree.tableColumnHeader.foreground#79740e
explorer.fileForeground#282828
explorer.directoryForeground#282828
comment.documentation#696969
editorSuggestWidget.highlightForeground#076678
editorSuggestWidget.selectedBackground#8f3f71
editorSuggestWidget.background
invalid#FF0000
invalid#b57614
invalid#8f3f71
invalid#8f3f71
invalid#79740e
invalid, invalid.deprecated#af3a03
invalid#9d0006
invalid.deprecated#af3a03
invalid#9d0006
invalid#9d0006
invalid.deprecated#af3a03
invalid#9d0006
invalid.deprecated#af3a03
invalid#9d0006
entity.name.type#9d0006
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#a89984
diffEditor.insertedTextBackground#79740e
diffEditor.removedTextBackground#9d0006
invalid#FF0000
entity.name.function#427b58
diff.insertedTextBackground#79740e
diff.removedTextBackground#9d0006
meta.diff.header.file#076678
meta.diff.header#427b58
invalid.deprecated#9d0006
invalid.deprecated#af3a03
entity.name.function#076678
invalid.deprecated#af3a03
string#00008B
invalid.deprecated#af3a03
invalid#9d0006
invalid.deprecated#af3a03
invalid#9d0006
variable#79740e
variable#b16286
variable#928374
comment#928374
comment#282828
comment.documentation#79740e
editor.findMatchBackground#79740e
editor.findMatchHighlightBackground#1d2021
editor.findMatchBackground, editor.findMatchHighlightBackground#000000
string.regexp#076678
string.regexp#076678
string.regexp#79740e
meta.preprocessor, keyword.control.import#076678
invalid.deprecated#af3a03
invalid.deprecated#af3a03
constant, constant.language, support.constant#8f3f71
constant#8f3f71
storage.type, support.type, entity.name.type#8f3f71
entity.name.type#8f3f71
variable#076678
variable, variable.other#076678
variable#076678
entity.name.function#b57614
entity.name.function, support.function#b57614
entity.name.function#b57614
support.function, support.class, support.type#af3a03
keyword, storage, keyword.control, storage.modifier#9d0006
keyword#9d0006
comment.documentation#8f3f71
comment.documentation, comment.block.documentation#79740e
comment.documentation#79740e
string, string.quoted, string.template#79740e
string#79740e
comment, punctuation.definition.comment#a89984
comment#a89984
comment, punctuation.definition.comment#a89984
comment#a89984
invalid#f0f0f0
invalid
invalid.illegal#f0f0f0
editor.wordHighlightStrongBackground#9d0006
invalid.deprecated#af3a03
invalid.illegal#9d0006
editorCursor.foreground
editorGutter.background#a89984
editorGroup.border#d3c5a0
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#a38780
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#af3a03
editorLineNumber.foreground#a89984
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#f0f0f0

Shiki preview

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

Loading...