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#45605e
  • editor.foreground#ffffff
  • editor.selectionBackground#5a5a5a
  • editor.selectionForeground#ffffff
  • editorCursor.background#efef00
  • editorCursor.foreground#ffffff
  • editorGroup.border#646464
  • editorGutter.background#1e1e1e
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#989898
  • inlineChatInput.background#000000
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#2fafff
  • input.background#000000
  • input.foreground#ffffff
  • input.placeholderForeground#2fafff
  • panel.background#000000
  • sideBar.background#000000
  • statusBar.background#2a2a6a
  • statusBar.foreground#f0f0f0
  • statusBar.noFolderBackground#2d2d2d
  • statusBarItem.remoteBackground#2a2a6a
  • statusBarItem.remoteForeground#f0f0f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#d8af7a
comment#d2b580
entity.name.tag#989898
entity.name.tag#6ae4b9
comment#d8af7a
markup.underline.link#c6daff
keyword#989898
markup.fenced_code, markup.inline.raw
markup.list#989898
invalid#ffa00f
keyword#cabf00
keyword#00bcff
invalid.deprecated#cabf00
invalid.deprecated
markup.inserted#c4d5ff
markup.inserted#c4d5ff
comment#d8af7a
comment#6ae4b9
comment#d8af7a
comment#79a8ff
comment#cabf00
comment#79a8ff
keyword#00bcff
gitDecoration.addedResourceForeground#2fafff
gitDecoration.untrackedResourceForeground#2fafff
gitDecoration.ignoredResourceForeground#989898
gitDecoration.modifiedResourceForeground#cabf00
breadcrumb.foreground, tree.tableColumnHeader.foreground#79a8ff
explorer.fileForeground#ffffff
explorer.directoryForeground#79a8ff
comment.documentation#696969
editorSuggestWidget.highlightForeground#00bcff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#ffa00f
invalid#6ae4b9
invalid#6ae4b9
invalid#2fafff
invalid, invalid.deprecated#cabf00
invalid#ffa00f
invalid.deprecated#ffffff
invalid#ffffff
invalid#ffffff
invalid.deprecated#cabf00
invalid#e5bf00
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#00bcff
variable#00d3d0
entity.name.function#ffa00f
constant#82b0ec
string#79a8ff
comment.documentation#989898
diffEditor.insertedTextBackground#c4d5ff
diffEditor.removedTextBackground#d4d48f
invalid#ffa00f
entity.name.function
diff.insertedTextBackground#c4d5ff
diff.removedTextBackground#d4d48f
invalid.deprecated#ffa00f
invalid.deprecated#cabf00
entity.name.function#cabf00
invalid.deprecated#cabf00
string#79a8ff
invalid.deprecated#cabf00
invalid#ffa00f
invalid.deprecated#cabf00
invalid#ffa00f
variable#00d3d0
variable#989898
comment#d8af7a
comment#d8af7a
comment.documentation#9ac8e0
entity.name.function#ffa00f
editor.findMatchBackground#ffffff
editor.findMatchHighlightBackground#ffffff
editor.findMatchBackground, editor.findMatchHighlightBackground#ffffff
string.regexp#d8af7a
string.regexp#00bcff
string.regexp#79a8ff
meta.preprocessor, keyword.control.import#b6a0ff
invalid.deprecated#cabf00
invalid.deprecated#cabf00
constant, constant.language, support.constant#82b0ec
constant#82b0ec
storage.type, support.type, entity.name.type#6ae4b9
entity.name.type#6ae4b9
variable#76afbf
variable, variable.other#00d3d0
variable#00d3d0
entity.name.function#c0965b
entity.name.function, support.function#ffa00f
entity.name.function#ffa00f
support.function, support.class, support.type#cabf00
keyword, storage, keyword.control, storage.modifier#00bcff
keyword#00bcff
comment.documentation#caa6df
comment.documentation, comment.block.documentation#9ac8e0
comment.documentation#9ac8e0
string, string.quoted, string.template#79a8ff
string#79a8ff
comment, punctuation.definition.comment#d8af7a
comment#d8af7a
comment, punctuation.definition.comment#d8af7a
comment#d8af7a
invalid#ffffff
invalid#ffffff
invalid.illegal#ffffff
editor.wordHighlightStrongBackground#ffffff
invalid.deprecated#cabf00
invalid.illegal#ffa00f
editorCursor.foreground
editorGutter.background#ffffff
editorGroup.border#646464
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#969696
statusBar.background, statusBar.foreground#f0f0f0
editorLineNumber.activeForeground#79a8ff
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#989898
invalid.deprecated
editor.selectionHighlightBackground#ffffff
editor.selectionBackground, editor.selectionForeground#ffffff
editor.findMatchBackground#ffffff

Shiki preview

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

Loading...