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#d9d4bb
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#f1ecd0
  • editor.findMatchBackground#c0cbd7
  • editor.foreground#231a1f
  • editor.selectionBackground#ddc5af
  • editorCursor.background#774400
  • editorCursor.foreground#231a1f
  • editorGroup.border#7f785f
  • editorGutter.background#f1ecd0
  • editorLineNumber.activeForeground#882000
  • editorLineNumber.foreground#685f53
  • inlineChatInput.background#d4d0b7
  • inlineChatInput.foreground#231a1f
  • inlineChatInput.placeholderForeground#843300
  • input.background#d4d0b7
  • input.foreground#231a1f
  • input.placeholderForeground#843300
  • panel.background#f1ecd0
  • sideBar.background#d9d4bb
  • statusBar.background#cfab80
  • statusBar.foreground#2f1005
  • statusBar.noFolderBackground#cec8ae
  • statusBarItem.remoteBackground#cfab80
  • statusBarItem.remoteForeground#2f1005

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6a5937
comment#304f60
entity.name.tag#685f53
entity.name.tag#226022
comment#6a5937
markup.underline.link#524874
keyword#685f53
markup.fenced_code, markup.inline.raw
markup.list#685f53
invalid#9a0000
keyword#843300
keyword#702f1f
invalid.deprecated#843300
invalid.deprecated
markup.inserted#005200
markup.inserted#005200
comment#6a5937
comment#113384
comment#6a5937
comment#882000
comment#006e50
comment#882000
keyword#702f1f
gitDecoration.addedResourceForeground#226022
gitDecoration.untrackedResourceForeground#226022
gitDecoration.ignoredResourceForeground#685f53
gitDecoration.modifiedResourceForeground#843300
breadcrumb.foreground, tree.tableColumnHeader.foreground#882000
explorer.fileForeground#231a1f
explorer.directoryForeground#882000
comment.documentation#696969
editorSuggestWidget.highlightForeground#882000
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#882000
invalid#226022
invalid#226022
invalid#226022
invalid, invalid.deprecated#843300
invalid#9a0000
invalid.deprecated#843300
invalid#9a0000
invalid#9a0000
invalid.deprecated#843300
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#702f1f
variable#125a7f
entity.name.function#882000
constant#006e50
string#3a7800
comment.documentation#685f53
diffEditor.insertedTextBackground#005200
diffEditor.removedTextBackground#8f1013
invalid#9a0000
entity.name.function
diff.insertedTextBackground#005200
diff.removedTextBackground#8f1013
invalid.deprecated#9a0000
invalid.deprecated#843300
entity.name.function#843300
invalid.deprecated#843300
string#3a7800
invalid.deprecated#843300
invalid#9a0000
invalid.deprecated#843300
invalid#9a0000
variable#125a7f
variable#685f53
comment#6a5937
comment#6a5937
comment.documentation#42573f
entity.name.function#843300
editor.findMatchBackground#231a1f
editor.findMatchHighlightBackground#231a1f
editor.findMatchBackground, editor.findMatchHighlightBackground#231a1f
string.regexp#000080
string.regexp#822478
string.regexp#3a7800
meta.preprocessor, keyword.control.import#9a0000
invalid.deprecated#843300
invalid.deprecated#843300
constant, constant.language, support.constant#006e50
constant#006e50
storage.type, support.type, entity.name.type#226022
entity.name.type#226022
variable#304f60
variable, variable.other#125a7f
variable#125a7f
entity.name.function#702f1f
entity.name.function, support.function#882000
entity.name.function#882000
support.function, support.class, support.type#775228
keyword, storage, keyword.control, storage.modifier#702f1f
keyword#702f1f
comment.documentation#603a6f
comment.documentation, comment.block.documentation#42573f
comment.documentation#42573f
string, string.quoted, string.template#3a7800
string#3a7800
comment, punctuation.definition.comment#6a5937
comment#6a5937
comment, punctuation.definition.comment#6a5937
comment#6a5937
invalid#231a1f
invalid#9a0000
invalid.illegal#9a0000
editor.wordHighlightStrongBackground#231a1f
invalid.deprecated#843300
invalid.illegal#9a0000
editorCursor.foreground
editorGutter.background#231a1f
editorGroup.border#7f785f
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#685f53
statusBar.background, statusBar.foreground#2f1005
editorLineNumber.activeForeground#882000
editorLineNumber.activeForeground#882000
editorLineNumber.foreground#685f53
invalid.deprecated
editor.selectionHighlightBackground#231a1f
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#231a1f

Shiki preview

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

Loading...