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#004a5f
  • editor.foreground#d0d0d0
  • editor.selectionBackground#2a234a
  • editorCursor.background#ff76ff
  • editorCursor.foreground#d0d0d0
  • editorGroup.border#4f4f5f
  • editorGutter.background#000000
  • editorLineNumber.activeForeground#3f95f6
  • editorLineNumber.foreground#857f8f
  • inlineChatInput.background#000000
  • inlineChatInput.foreground#d0d0d0
  • inlineChatInput.placeholderForeground#00a692
  • input.background#000000
  • input.foreground#d0d0d0
  • input.placeholderForeground#00a692
  • panel.background#000000
  • sideBar.background#000000
  • statusBar.background#2a2a75
  • statusBar.foreground#e0e0ff
  • statusBar.noFolderBackground#2b2b2b
  • statusBarItem.remoteBackground#2a2a75
  • statusBarItem.remoteForeground#e0e0ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#cf9f8f
comment#c58faf
entity.name.tag#857f8f
entity.name.tag#00a692
comment#cf9f8f
markup.underline.link#89afef
keyword#857f8f
markup.fenced_code, markup.inline.raw
markup.list#857f8f
invalid#f47360
keyword#bf9032
keyword#af85ff
invalid.deprecated#bf9032
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#cf9f8f
comment#00a692
comment#cf9f8f
comment#3f95f6
comment#e580ea
comment#3f95f6
keyword#af85ff
gitDecoration.addedResourceForeground#0faa26
gitDecoration.untrackedResourceForeground#0faa26
gitDecoration.ignoredResourceForeground#857f8f
gitDecoration.modifiedResourceForeground#bf9032
breadcrumb.foreground, tree.tableColumnHeader.foreground#3f95f6
explorer.fileForeground#d0d0d0
explorer.directoryForeground#3f95f6
comment.documentation#696969
editorSuggestWidget.highlightForeground#3f95f6
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#e580ea
invalid#00a692
invalid#00a692
invalid#0faa26
invalid, invalid.deprecated#bf9032
invalid#f47360
invalid.deprecated#bf9032
invalid#f47360
invalid#f47360
invalid.deprecated#bf9032
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#af85ff
variable#1dbfcf
entity.name.function#e580ea
constant#029fff
string#6a9fff
comment.documentation#857f8f
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#f47360
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#f47360
invalid.deprecated#bf9032
entity.name.function#bf9032
invalid.deprecated#bf9032
string#6a9fff
invalid.deprecated#bf9032
invalid#f47360
invalid.deprecated#bf9032
invalid#f47360
variable#1dbfcf
variable#857f8f
comment#cf9f8f
comment#cf9f8f
comment.documentation#8aa0df
entity.name.function#bf9032
editor.findMatchBackground#d0d0d0
editor.findMatchHighlightBackground#d0d0d0
editor.findMatchBackground, editor.findMatchHighlightBackground#d0d0d0
string.regexp#ef6560
string.regexp#d369af
string.regexp#6a9fff
meta.preprocessor, keyword.control.import#ef6560
invalid.deprecated#bf9032
invalid.deprecated#bf9032
constant, constant.language, support.constant#029fff
constant#029fff
storage.type, support.type, entity.name.type#00a692
entity.name.type#00a692
variable#8aa0df
variable, variable.other#1dbfcf
variable#1dbfcf
entity.name.function#c58faf
entity.name.function, support.function#e580ea
entity.name.function#e580ea
support.function, support.class, support.type#d369af
keyword, storage, keyword.control, storage.modifier#af85ff
keyword#af85ff
comment.documentation#c58faf
comment.documentation, comment.block.documentation#8aa0df
comment.documentation#8aa0df
string, string.quoted, string.template#6a9fff
string#6a9fff
comment, punctuation.definition.comment#cf9f8f
comment#cf9f8f
comment, punctuation.definition.comment#cf9f8f
comment#cf9f8f
invalid#d0d0d0
invalid#f47360
invalid.illegal#f47360
editor.wordHighlightStrongBackground#d0d0d0
invalid.deprecated#bf9032
invalid.illegal#f47360
editorCursor.foreground
editorGutter.background#d0d0d0
editorGroup.border#4f4f5f
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#857f8f
statusBar.background, statusBar.foreground#e0e0ff
editorLineNumber.activeForeground#3f95f6
editorLineNumber.activeForeground#3f95f6
editorLineNumber.foreground#857f8f
invalid.deprecated
editor.selectionHighlightBackground#d0d0d0
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#d0d0d0

Shiki preview

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

Loading...