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#000f19
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#000e17
  • editor.findMatchBackground#6f345a
  • editor.foreground#afbcbf
  • editor.selectionBackground#253146
  • editorCursor.background#00ccff
  • editorCursor.foreground#afbcbf
  • editorGroup.border#3a4a66
  • editorGutter.background#000e17
  • editorLineNumber.activeForeground#029fff
  • editorLineNumber.foreground#70819f
  • inlineChatInput.background#000f19
  • inlineChatInput.foreground#afbcbf
  • inlineChatInput.placeholderForeground#6fafff
  • input.background#000f19
  • input.foreground#afbcbf
  • input.placeholderForeground#6fafff
  • panel.background#000e17
  • sideBar.background#000f19
  • statusBar.background#003a7f
  • statusBar.foreground#ceeeff
  • statusBar.noFolderBackground#242e39
  • statusBarItem.remoteBackground#003a7f
  • statusBarItem.remoteForeground#ceeeff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#cf9f7f
comment#c59fcf
entity.name.tag#70819f
entity.name.tag#c59fcf
comment#cf9f7f
markup.underline.link#b0a0a0
keyword#70819f
markup.fenced_code, markup.inline.raw
markup.list#70819f
invalid#ef656a
keyword#e6832f
keyword#6a88ff
invalid.deprecated#e6832f
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#cf9f7f
comment#3dc0b0
comment#cf9f7f
comment#029fff
comment#e580ea
comment#029fff
keyword#6a88ff
gitDecoration.addedResourceForeground#00a972
gitDecoration.untrackedResourceForeground#00a972
gitDecoration.ignoredResourceForeground#70819f
gitDecoration.modifiedResourceForeground#e6832f
breadcrumb.foreground, tree.tableColumnHeader.foreground#029fff
explorer.fileForeground#afbcbf
explorer.directoryForeground#029fff
comment.documentation#696969
editorSuggestWidget.highlightForeground#029fff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#3dc0b0
invalid#c59fcf
invalid#c59fcf
invalid#00a972
invalid, invalid.deprecated#e6832f
invalid#ef656a
invalid.deprecated#e6832f
invalid#ef656a
invalid#ef656a
invalid.deprecated#e6832f
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#6a88ff
variable#6fafff
entity.name.function#3dc0b0
constant#af8aff
string#029fff
comment.documentation#70819f
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ef656a
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ef656a
invalid.deprecated#e6832f
entity.name.function#e6832f
invalid.deprecated#e6832f
string#029fff
invalid.deprecated#e6832f
invalid#ef656a
invalid.deprecated#e6832f
invalid#ef656a
variable#6fafff
variable#70819f
comment#cf9f7f
comment#cf9f7f
comment.documentation#92b4df
entity.name.function#e6832f
editor.findMatchBackground#afbcbf
editor.findMatchHighlightBackground#afbcbf
editor.findMatchBackground, editor.findMatchHighlightBackground#afbcbf
string.regexp#e580ea
string.regexp#d570af
string.regexp#029fff
meta.preprocessor, keyword.control.import#d56f72
invalid.deprecated#e6832f
invalid.deprecated#e6832f
constant, constant.language, support.constant#af8aff
constant#af8aff
storage.type, support.type, entity.name.type#c59fcf
entity.name.type#c59fcf
variable#92b4df
variable, variable.other#6fafff
variable#6fafff
entity.name.function#92b4df
entity.name.function, support.function#3dc0b0
entity.name.function#3dc0b0
support.function, support.class, support.type#00a972
keyword, storage, keyword.control, storage.modifier#6a88ff
keyword#6a88ff
comment.documentation#c59fcf
comment.documentation, comment.block.documentation#92b4df
comment.documentation#92b4df
string, string.quoted, string.template#029fff
string#029fff
comment, punctuation.definition.comment#cf9f7f
comment#cf9f7f
comment, punctuation.definition.comment#cf9f7f
comment#cf9f7f
invalid#afbcbf
invalid#ef656a
invalid.illegal#ef656a
editor.wordHighlightStrongBackground#afbcbf
invalid.deprecated#e6832f
invalid.illegal#ef656a
editorCursor.foreground
editorGutter.background#afbcbf
editorGroup.border#3a4a66
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#70819f
statusBar.background, statusBar.foreground#ceeeff
editorLineNumber.activeForeground#029fff
editorLineNumber.activeForeground#029fff
editorLineNumber.foreground#70819f
invalid.deprecated
editor.selectionHighlightBackground#afbcbf
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#afbcbf

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme