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#dddde0
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#F5F5F9
  • editor.findMatchBackground#009B7C
  • editor.foreground#0F1019
  • editor.selectionBackground#C0CCD0
  • editorCursor.background#009B7C
  • editorCursor.foreground#0F1019
  • editorGroup.border#D0D0E3
  • editorGutter.background#F5F5F9
  • editorLineNumber.activeForeground#D75F00
  • editorLineNumber.foreground#585C6C
  • inlineChatInput.background#d8d8db
  • inlineChatInput.foreground#0F1019
  • inlineChatInput.placeholderForeground#009B7C
  • input.background#d8d8db
  • input.foreground#0F1019
  • input.placeholderForeground#009B7C
  • panel.background#F5F5F9
  • sideBar.background#dddde0
  • statusBar.background#9EA6B0
  • statusBar.foreground#0F1019
  • statusBar.noFolderBackground#babac1
  • statusBarItem.remoteBackground#9EA6B0
  • statusBarItem.remoteForeground#0F1019

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#D70000
comment#007687
markup.heading#D70000
entity.name.tag#4E4E4E
entity.name.tag#D70000
comment#4E4E4E
markup.underline.link#AF005F
keyword#1F55A0
markup.fenced_code, markup.inline.raw
markup.list#D70000
invalid#D70000
keyword#D75F00
keyword#005F00
invalid.deprecated#D75F00
invalid.deprecated
markup.inserted#005F00
markup.inserted#005F00
comment#8700AF
comment#D70000
comment#D75F00
comment#005F00
comment#AF005F
keyword#007687
gitDecoration.addedResourceForeground#005F00
gitDecoration.untrackedResourceForeground#004700
gitDecoration.ignoredResourceForeground#4E4E4E
gitDecoration.renamedResourceForeground#004700
gitDecoration.modifiedResourceForeground#8700AF
breadcrumb.foreground, tree.tableColumnHeader.foreground#005F00
explorer.fileForeground#0F1019
explorer.directoryForeground#0F1019
comment.documentation#696969
editorSuggestWidget.highlightForeground#009B7C
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#0F1019
invalid#FF0000
invalid#AF8700
invalid#1F55A0
invalid#1F55A0
invalid#005F00
invalid, invalid.deprecated#D75F00
invalid#D70000
invalid.deprecated#D75F00
invalid#D70000
invalid#D70000
invalid.deprecated#D75F00
invalid#D70000
invalid.deprecated#D75F00
invalid#D70000
entity.name.type#D70000
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#4E4E4E
diffEditor.insertedTextBackground#005F00
diffEditor.removedTextBackground#D70000
invalid#FF0000
entity.name.function#007687
diff.insertedTextBackground#005F00
diff.removedTextBackground#D70000
meta.diff.header.file#1F55A0
meta.diff.header#007687
invalid.deprecated#D70000
invalid.deprecated#D75F00
entity.name.function#004651
invalid.deprecated#D75F00
string#00008B
invalid.deprecated#D75F00
invalid#D70000
invalid.deprecated#D75F00
invalid#D70000
variable#005F00
variable#AF005F
variable#4E4E4E
comment#4E4E4E
comment#0F1019
comment.documentation#005F00
editor.findMatchBackground#005F00
editor.findMatchHighlightBackground#D0D0E3
editor.findMatchBackground, editor.findMatchHighlightBackground#D0D0E3
string.regexp#1F55A0
string.regexp#1F55A0
string.regexp#005F00
meta.preprocessor, keyword.control.import#1F55A0
invalid.deprecated#D75F00
invalid.deprecated#D75F00
constant, constant.language, support.constant#AF005F
constant#AF005F
storage.type, support.type, entity.name.type#1F55A0
entity.name.type#1F55A0
variable#004651
variable, variable.other#004651
variable#004651
entity.name.function#AF8700
entity.name.function, support.function#AF8700
entity.name.function#AF8700
support.function, support.class, support.type#1F55A0
keyword, storage, keyword.control, storage.modifier#D70000
keyword#D70000
comment.documentation#AF005F
comment.documentation, comment.block.documentation#004700
comment.documentation#004700
string, string.quoted, string.template#005F00
string#005F00
comment, punctuation.definition.comment#4E4E4E
comment#4E4E4E
comment, punctuation.definition.comment#4E4E4E
comment#4E4E4E
invalid#D0D0E3
invalid
invalid.illegal#D0D0E3
editor.wordHighlightStrongBackground#D70000
invalid.deprecated#D75F00
invalid.illegal#D70000
editorCursor.foreground
editorGutter.background#585C6C
editorGroup.border#D0D0E3
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#4E4E4E
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#D75F00
editorLineNumber.foreground#585C6C
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#D0D0E3

Shiki preview

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

Loading...