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#e1e1e1
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fafafa
  • editor.findMatchBackground#4078f2
  • editor.foreground#383a42
  • editor.selectionBackground#d8d8d8
  • editorCursor.background#4078f2
  • editorCursor.foreground#383a42
  • editorGroup.border#c8c8c8
  • editorGutter.background#fafafa
  • editorLineNumber.activeForeground#1b2229
  • editorLineNumber.foreground#aaaeb1
  • inlineChatInput.background#dcdcdc
  • inlineChatInput.foreground#24262b
  • inlineChatInput.placeholderForeground#4078f2
  • input.background#dcdcdc
  • input.foreground#24262b
  • input.placeholderForeground#4078f2
  • panel.background#fafafa
  • sideBar.background#e1e1e1
  • statusBar.background#e7e7e7
  • statusBar.foreground#383a42
  • statusBar.noFolderBackground#e1e1e1
  • statusBarItem.remoteBackground#e7e7e7
  • statusBarItem.remoteForeground#383a42

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#e45649
comment#9ca0a4
markup.heading#e45649
entity.name.tag#383a42
entity.name.tag#e45649
comment#9ca0a4
markup.underline.link#a626a4
keyword#986801
markup.fenced_code, markup.inline.raw
markup.list#e45649
invalid#e45649
keyword#986801
keyword#50a14f
invalid.deprecated#986801
invalid.deprecated
markup.inserted#50a14f
markup.inserted#40803f
comment#b751b6
comment#e45649
comment#da8548
comment#50a14f
comment#a626a4
keyword#0184bc
gitDecoration.addedResourceForeground#50a14f
gitDecoration.untrackedResourceForeground#84888b
gitDecoration.ignoredResourceForeground#9ca0a4
gitDecoration.renamedResourceForeground#84888b
gitDecoration.modifiedResourceForeground#b751b6
breadcrumb.foreground, tree.tableColumnHeader.foreground#50a14f
explorer.fileForeground#383a42
explorer.directoryForeground#383a42
comment.documentation#696969
editorSuggestWidget.highlightForeground#4078f2
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#383a42
invalid#FF0000
invalid#a626a4
invalid#986801
invalid#986801
invalid#50a14f
invalid, invalid.deprecated#986801
invalid#e45649
invalid.deprecated#986801
invalid#e45649
invalid#e45649
invalid.deprecated#986801
invalid#e45649
invalid.deprecated#986801
invalid#e45649
entity.name.type#e45649
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#9ca0a4
diffEditor.insertedTextBackground#50a14f
diffEditor.removedTextBackground#e45649
invalid#FF0000
entity.name.function#0184bc
diff.insertedTextBackground#50a14f
diff.removedTextBackground#e45649
meta.diff.header.file#4078f2
meta.diff.header#0184bc
invalid.deprecated#e45649
invalid.deprecated#986801
entity.name.function#6a1868
invalid.deprecated#986801
string#00008B
invalid.deprecated#986801
invalid#e45649
invalid.deprecated#986801
invalid#e45649
variable#50a14f
variable#a626a4
variable#9ca0a4
comment#9ca0a4
comment#383a42
comment.documentation#50a14f
editor.findMatchBackground#50a14f
editor.findMatchHighlightBackground#f0f0f0
editor.findMatchBackground, editor.findMatchHighlightBackground#f0f0f0
string.regexp#4078f2
string.regexp#4078f2
string.regexp#50a14f
meta.preprocessor, keyword.control.import#4078f2
invalid.deprecated#986801
invalid.deprecated#986801
constant, constant.language, support.constant#b751b6
constant#b751b6
storage.type, support.type, entity.name.type#986801
entity.name.type#986801
variable#6a1868
variable, variable.other#6a1868
variable#6a1868
entity.name.function#a626a4
entity.name.function, support.function#a626a4
entity.name.function#a626a4
support.function, support.class, support.type#a626a4
keyword, storage, keyword.control, storage.modifier#e45649
keyword#e45649
comment.documentation#b751b6
comment.documentation, comment.block.documentation#84888b
comment.documentation#84888b
string, string.quoted, string.template#50a14f
string#50a14f
comment, punctuation.definition.comment#9ca0a4
comment#9ca0a4
comment, punctuation.definition.comment#9ca0a4
comment#9ca0a4
invalid#f0f0f0
invalid
invalid.illegal#f0f0f0
editor.wordHighlightStrongBackground#e45649
invalid.deprecated#986801
invalid.illegal#e45649
editorCursor.foreground
editorGutter.background#9ca0a4
editorGroup.border#c8c8c8
editorGroupHeader.tabsBackground#383a42
statusBar.noFolderBackground#a190a7
statusBar.background, statusBar.foreground#383a42
editorLineNumber.activeForeground
editorLineNumber.activeForeground#1b2229
editorLineNumber.foreground#aaaeb1
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#f0f0f0

Shiki preview

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

Loading...