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#151f2f
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#131c2b
  • editor.findMatchBackground#684d54
  • editor.foreground#eaedef
  • editor.selectionBackground#183c65
  • editorCursor.background#8fdfff
  • editorCursor.foreground#eaedef
  • editorGroup.border#595a63
  • editorGutter.background#131c2b
  • editorLineNumber.activeForeground#12b4ff
  • editorLineNumber.foreground#969faf
  • inlineChatInput.background#151e2e
  • inlineChatInput.foreground#eaedef
  • inlineChatInput.placeholderForeground#70a0ff
  • input.background#151e2e
  • input.foreground#eaedef
  • input.placeholderForeground#70a0ff
  • panel.background#131c2b
  • sideBar.background#151f2f
  • statusBar.background#2f527b
  • statusBar.foreground#ecf0ff
  • statusBar.noFolderBackground#2a3644
  • statusBarItem.remoteBackground#2f527b
  • statusBarItem.remoteForeground#ecf0ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#eaa4a4
comment#d4aaf0
entity.name.tag#969faf
entity.name.tag#41bf4f
comment#eaa4a4
markup.underline.link#90a0dc
keyword#969faf
markup.fenced_code, markup.inline.raw
markup.list#969faf
invalid#ff7a5f
keyword#f0c060
keyword#70a0ff
invalid.deprecated#f0c060
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#eaa4a4
comment#2fd0db
comment#eaa4a4
comment#12b4ff
comment#7fce5f
comment#12b4ff
keyword#70a0ff
gitDecoration.addedResourceForeground#30c489
gitDecoration.untrackedResourceForeground#30c489
gitDecoration.ignoredResourceForeground#969faf
gitDecoration.modifiedResourceForeground#f0c060
breadcrumb.foreground, tree.tableColumnHeader.foreground#12b4ff
explorer.fileForeground#eaedef
explorer.directoryForeground#12b4ff
comment.documentation#696969
editorSuggestWidget.highlightForeground#12b4ff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#7fce5f
invalid#41bf4f
invalid#41bf4f
invalid#30c489
invalid, invalid.deprecated#f0c060
invalid#ff7a5f
invalid.deprecated#f0c060
invalid#ff7a5f
invalid#ff7a5f
invalid.deprecated#f0c060
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#70a0ff
variable#2fd0db
entity.name.function#7fce5f
constant#12b4ff
string#65d5a8
comment.documentation#969faf
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ff7a5f
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ff7a5f
invalid.deprecated#f0c060
entity.name.function#f0c060
invalid.deprecated#f0c060
string#65d5a8
invalid.deprecated#f0c060
invalid#ff7a5f
invalid.deprecated#f0c060
invalid#ff7a5f
variable#2fd0db
variable#969faf
comment#eaa4a4
comment#eaa4a4
comment.documentation#99bfcf
entity.name.function#f0c060
editor.findMatchBackground#eaedef
editor.findMatchHighlightBackground#eaedef
editor.findMatchBackground, editor.findMatchHighlightBackground#eaedef
string.regexp#ff6f6f
string.regexp#f59acf
string.regexp#65d5a8
meta.preprocessor, keyword.control.import#cf90ff
invalid.deprecated#f0c060
invalid.deprecated#f0c060
constant, constant.language, support.constant#12b4ff
constant#12b4ff
storage.type, support.type, entity.name.type#41bf4f
entity.name.type#41bf4f
variable#99bfcf
variable, variable.other#2fd0db
variable#2fd0db
entity.name.function#a9c99f
entity.name.function, support.function#7fce5f
entity.name.function#7fce5f
support.function, support.class, support.type#d4aaf0
keyword, storage, keyword.control, storage.modifier#70a0ff
keyword#70a0ff
comment.documentation#d4aaf0
comment.documentation, comment.block.documentation#99bfcf
comment.documentation#99bfcf
string, string.quoted, string.template#65d5a8
string#65d5a8
comment, punctuation.definition.comment#eaa4a4
comment#eaa4a4
comment, punctuation.definition.comment#eaa4a4
comment#eaa4a4
invalid#eaedef
invalid#ff7a5f
invalid.illegal#ff7a5f
editor.wordHighlightStrongBackground#eaedef
invalid.deprecated#f0c060
invalid.illegal#ff7a5f
editorCursor.foreground
editorGutter.background#eaedef
editorGroup.border#595a63
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#969faf
statusBar.background, statusBar.foreground#ecf0ff
editorLineNumber.activeForeground#12b4ff
editorLineNumber.activeForeground#12b4ff
editorLineNumber.foreground#969faf
invalid.deprecated
editor.selectionHighlightBackground#eaedef
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#eaedef

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme