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#e6dfd8
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fff8f0
  • editor.findMatchBackground#b4cfff
  • editor.foreground#222222
  • editor.selectionBackground#caeafa
  • editorCursor.background#1144ff
  • editorCursor.foreground#222222
  • editorGroup.border#baafba
  • editorGutter.background#fff8f0
  • editorLineNumber.activeForeground#4250ef
  • editorLineNumber.foreground#63728f
  • inlineChatInput.background#e0dad3
  • inlineChatInput.foreground#222222
  • inlineChatInput.placeholderForeground#4250ef
  • input.background#e0dad3
  • input.foreground#222222
  • input.placeholderForeground#4250ef
  • panel.background#fff8f0
  • sideBar.background#e6dfd8
  • statusBar.background#f8cf8f
  • statusBar.foreground#111133
  • statusBar.noFolderBackground#e7e0da
  • statusBarItem.remoteBackground#f8cf8f
  • statusBarItem.remoteForeground#111133

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a2403f
comment#a2403f
entity.name.tag#63728f
entity.name.tag#065fff
comment#a2403f
markup.underline.link#856f4a
keyword#63728f
markup.fenced_code, markup.inline.raw
markup.list#63728f
invalid#cc3333
keyword#8a5d00
keyword#4250ef
invalid.deprecated#8a5d00
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#a2403f
comment#008058
comment#a2403f
comment#4250ef
comment#9f4a00
comment#4250ef
keyword#4250ef
gitDecoration.addedResourceForeground#217a3c
gitDecoration.untrackedResourceForeground#217a3c
gitDecoration.ignoredResourceForeground#63728f
gitDecoration.modifiedResourceForeground#8a5d00
breadcrumb.foreground, tree.tableColumnHeader.foreground#4250ef
explorer.fileForeground#222222
explorer.directoryForeground#4250ef
comment.documentation#696969
editorSuggestWidget.highlightForeground#4250ef
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#1f6fbf
invalid#065fff
invalid#065fff
invalid#217a3c
invalid, invalid.deprecated#8a5d00
invalid#cc3333
invalid.deprecated#8a5d00
invalid#cc3333
invalid#cc3333
invalid.deprecated#8a5d00
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#4250ef
variable#6052cf
entity.name.function#1f6fbf
constant#375cd8
string#9f4a00
comment.documentation#63728f
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#cc3333
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#cc3333
invalid.deprecated#8a5d00
entity.name.function#8a5d00
invalid.deprecated#8a5d00
string#9f4a00
invalid.deprecated#8a5d00
invalid#cc3333
invalid.deprecated#8a5d00
invalid#cc3333
variable#6052cf
variable#63728f
comment#a2403f
comment#a2403f
comment.documentation#406f90
entity.name.function#8a5d00
editor.findMatchBackground#222222
editor.findMatchHighlightBackground#222222
editor.findMatchBackground, editor.findMatchHighlightBackground#222222
string.regexp#dd1100
string.regexp#ba35af
string.regexp#9f4a00
meta.preprocessor, keyword.control.import#3f70a0
invalid.deprecated#8a5d00
invalid.deprecated#8a5d00
constant, constant.language, support.constant#375cd8
constant#375cd8
storage.type, support.type, entity.name.type#065fff
entity.name.type#065fff
variable#af569f
variable, variable.other#6052cf
variable#6052cf
entity.name.function#406f90
entity.name.function, support.function#1f6fbf
entity.name.function#1f6fbf
support.function, support.class, support.type#1f77bb
keyword, storage, keyword.control, storage.modifier#4250ef
keyword#4250ef
comment.documentation#af569f
comment.documentation, comment.block.documentation#406f90
comment.documentation#406f90
string, string.quoted, string.template#9f4a00
string#9f4a00
comment, punctuation.definition.comment#a2403f
comment#a2403f
comment, punctuation.definition.comment#a2403f
comment#a2403f
invalid#222222
invalid#cc3333
invalid.illegal#cc3333
editor.wordHighlightStrongBackground#222222
invalid.deprecated#8a5d00
invalid.illegal#cc3333
editorCursor.foreground
editorGutter.background#222222
editorGroup.border#baafba
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#63728f
statusBar.background, statusBar.foreground#111133
editorLineNumber.activeForeground#4250ef
editorLineNumber.activeForeground#4250ef
editorLineNumber.foreground#63728f
invalid.deprecated
editor.selectionHighlightBackground#222222
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#222222

Shiki preview

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

Loading...