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#222835
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#1f2430
  • editor.findMatchBackground#ffcc66
  • editor.foreground#cbccc6
  • editor.selectionBackground#2f3b54
  • editorCursor.background#ffcc66
  • editorCursor.foreground#cbccc6
  • editorGroup.border#11131a
  • editorGutter.background#1f2430
  • editorLineNumber.activeForeground#cbccc6
  • editorLineNumber.foreground#f5f7fd
  • inlineChatInput.background#212734
  • inlineChatInput.foreground#dfe0da
  • inlineChatInput.placeholderForeground#ffcc66
  • input.background#212734
  • input.foreground#dfe0da
  • input.placeholderForeground#ffcc66
  • panel.background#1f2430
  • sideBar.background#222835
  • statusBar.background#141820
  • statusBar.foreground#cbccc6
  • statusBar.noFolderBackground#171b24
  • statusBarItem.remoteBackground#141820
  • statusBarItem.remoteForeground#cbccc6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ffa759—
comment#484f5b—
markup.heading#f28779—
entity.name.tag#484f5b—
entity.name.tag#ffa759—
comment#484f5b—
markup.underline.link#d4bfff—
keyword#ffe6b3—
markup.fenced_code, markup.inline.raw——
markup.list#f28779—
invalid#ff3333—
keyword#ffd580—
keyword#bae67e—
invalid.deprecated#ffd580—
invalid.deprecated——
markup.inserted#a6cc70—
markup.inserted#84a359—
comment#dccbff—
comment#ffa759—
comment#ffa759—
comment#bae67e—
comment#d4bfff—
keyword#5ccfe6—
gitDecoration.addedResourceForeground#a6cc70—
gitDecoration.untrackedResourceForeground#757b83—
gitDecoration.ignoredResourceForeground#484f5b—
gitDecoration.renamedResourceForeground#757b83—
gitDecoration.modifiedResourceForeground#dccbff—
breadcrumb.foreground, tree.tableColumnHeader.foreground#bae67e—
explorer.fileForeground#cbccc6—
explorer.directoryForeground#cbccc6—
comment.documentation#696969—
editorSuggestWidget.highlightForeground#ffcc66—
editorSuggestWidget.selectedBackground——
editorSuggestWidget.background#cbccc6—
invalid#FF0000—
invalid#ffd580—
invalid#ffe6b3—
invalid#ffe6b3—
invalid#bae67e—
invalid, invalid.deprecated#ffd580—
invalid#ff3333—
invalid.deprecated#ffd580—
invalid#ff3333—
invalid#ff3333—
invalid.deprecated#ffd580—
invalid#ff3333—
invalid.deprecated#ffd580—
invalid#ff3333—
entity.name.type#ffa759—
variable#FFA500—
entity.name.function#4D4DDDDDDDDD—
constant#FF1493—
string#FFA500—
comment.documentation#484f5b—
diffEditor.insertedTextBackground#bae67e—
diffEditor.removedTextBackground#f27983—
invalid#FF0000—
entity.name.function#5ccfe6—
diff.insertedTextBackground#bae67e—
diff.removedTextBackground#f27983—
meta.diff.header.file#73d0ff—
meta.diff.header#5ccfe6—
invalid.deprecated#ff3333—
invalid.deprecated#ffd580—
entity.name.function#cbccc6—
invalid.deprecated#ffd580—
string#FFFFE0—
invalid.deprecated#ffd580—
invalid#ff3333—
invalid.deprecated#ffd580—
invalid#ff3333—
variable#bae67e—
variable#d4bfff—
variable#171b24—
comment#171b24—
comment#cbccc6—
comment.documentation#bae67e—
editor.findMatchBackground#bae67e—
editor.findMatchHighlightBackground#11131a—
editor.findMatchBackground, editor.findMatchHighlightBackground#11131a—
string.regexp#f29e74—
string.regexp#f29e74—
string.regexp#bae67e—
meta.preprocessor, keyword.control.import#f29e74—
invalid.deprecated#ffd580—
invalid.deprecated#ffd580—
constant, constant.language, support.constant#d4bfff—
constant#d4bfff—
storage.type, support.type, entity.name.type#ffe6b3—
entity.name.type#ffe6b3—
variable#cbccc6—
variable, variable.other#cbccc6—
variable#cbccc6—
entity.name.function#ffd580—
entity.name.function, support.function#ffd580—
entity.name.function#ffd580—
keyword, storage, keyword.control, storage.modifier#ffa759—
keyword#ffa759—
comment.documentation#d4bfff—
comment.documentation, comment.block.documentation#757b83—
comment.documentation#757b83—
string, string.quoted, string.template#bae67e—
string#bae67e—
comment, punctuation.definition.comment#484f5b—
comment#484f5b—
comment, punctuation.definition.comment#484f5b—
comment#484f5b—
invalid#3d434d—
invalid——
invalid.illegal#3d434d—
editor.wordHighlightStrongBackground#cbccc6—
invalid.deprecated#ffd580—
invalid.illegal#ff3333—
editorCursor.foreground——
editorGutter.background#f5f7fd—
editorGroup.border#11131a—
editorGroupHeader.tabsBackground#cbccc6—
statusBar.noFolderBackground#cbccc6—
statusBar.background, statusBar.foreground#cbccc6—
editorLineNumber.activeForeground——
editorLineNumber.activeForeground#cbccc6—
editorLineNumber.foreground#f5f7fd—
invalid.deprecated——
editor.selectionHighlightBackground——
editor.selectionBackground, editor.selectionForeground——
editor.findMatchBackground#3d434d—
Emacs Themes Ported by voidfoo - VS Code Theme