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#000000
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#000000
  • editor.findMatchBackground#87afff
  • editor.foreground#dddddd
  • editorCursor.background#cecece
  • editorCursor.foreground#dddddd
  • editorGroup.border#111111
  • editorGutter.background#000000
  • editorLineNumber.activeForeground#dddddd
  • editorLineNumber.foreground#8a8a8a
  • inlineChatInput.background#000000
  • inlineChatInput.foreground#dddddd
  • inlineChatInput.placeholderForeground#8a8a8a
  • input.background#000000
  • input.foreground#dddddd
  • input.placeholderForeground#8a8a8a
  • panel.background#000000
  • sideBar.background#000000
  • statusBar.background#000000
  • statusBar.foreground#dddddd
  • statusBar.noFolderBackground#00000040
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#dddddd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#dddddd
comment#686868
markup.heading#dddddd
entity.name.tag#8a8a8a
entity.name.tag#dddddd
comment#686868
markup.underline.link#87afff
keyword#acacac
markup.list#8a8a8a
invalid#f8b0b0
keyword#da8548
keyword#acacac
invalid.deprecated#da8548
invalid.deprecated#000000
markup.inserted#448844
markup.inserted#448844
comment#8a8a8a
comment#dddddd
comment#da8548
comment#dddddd
comment#000000
keyword#dddddd
gitDecoration.addedResourceForeground#448844
gitDecoration.untrackedResourceForeground#8a8a8a
gitDecoration.ignoredResourceForeground#686868
gitDecoration.renamedResourceForeground#8a8a8a
gitDecoration.modifiedResourceForeground#da8548
breadcrumb.foreground, tree.tableColumnHeader.foreground#acacac
explorer.fileForeground#dddddd
explorer.directoryForeground#dddddd
comment.documentation#696969
editorSuggestWidget.highlightForeground#87afff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#dddddd
invalid#FF0000
invalid#dddddd
invalid#acacac
invalid#acacac
invalid#448844
invalid, invalid.deprecated#da8548
invalid#f8b0b0
invalid.deprecated#da8548
invalid#f8b0b0
invalid#f8b0b0
invalid.deprecated#da8548
invalid#f8b0b0
invalid.deprecated#da8548
invalid#f8b0b0
entity.name.type#dddddd
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#686868
diffEditor.insertedTextBackground#000000
diffEditor.removedTextBackground#000000
invalid#FF0000
entity.name.function#dddddd
diff.insertedTextBackground#448844
diff.removedTextBackground#f8b0b0
meta.diff.header.file#dddddd
meta.diff.header#dddddd
invalid.deprecated#f8b0b0
invalid.deprecated#da8548
entity.name.function#dddddd
invalid.deprecated#da8548
string#FFFFE0
invalid.deprecated#da8548
invalid#f8b0b0
invalid.deprecated#da8548
invalid#f8b0b0
variable#dddddd
variable#dddddd
variable#686868
comment#686868
comment#dddddd
comment.documentation#448844
editor.findMatchBackground#448844
editor.findMatchHighlightBackground#efefef
editor.findMatchBackground, editor.findMatchHighlightBackground#efefef
string.regexp#8a8a8a
string.regexp#8a8a8a
string.regexp#acacac
meta.preprocessor, keyword.control.import#8a8a8a
invalid.deprecated#da8548
invalid.deprecated#da8548
constant, constant.language, support.constant#8a8a8a
constant#8a8a8a
storage.type, support.type, entity.name.type#acacac
entity.name.type#acacac
variable#dddddd
variable, variable.other#dddddd
variable#dddddd
entity.name.function#dddddd
entity.name.function, support.function#dddddd
entity.name.function#dddddd
support.function, support.class, support.type#8a8a8a
keyword, storage, keyword.control, storage.modifier#dddddd
keyword#dddddd
comment.documentation#8a8a8a
comment.documentation, comment.block.documentation#8a8a8a
comment.documentation#8a8a8a
string, string.quoted, string.template#acacac
string#acacac
comment, punctuation.definition.comment#686868
comment#686868
comment, punctuation.definition.comment#686868
comment#686868
invalid#000000
invalid.illegal#000000
editor.wordHighlightStrongBackground#f8b0b0
invalid.deprecated#da8548
invalid.illegal#f8b0b0
editorCursor.foreground
editorGutter.background#686868
editorGroup.border#111111
editorGroupHeader.tabsBackground#dddddd
statusBar.noFolderBackground#8a8a8a
statusBar.background, statusBar.foreground#dddddd
editorLineNumber.activeForeground
editorLineNumber.activeForeground#dddddd
editorLineNumber.foreground#8a8a8a
invalid.deprecated
editor.selectionHighlightBackground
editor.findMatchBackground#000000

Shiki preview

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

Loading...