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#252928
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#222524
  • editor.findMatchBackground#894f7a
  • editor.foreground#eaf2ef
  • editor.selectionBackground#543040
  • editorCursor.background#ef7fa8
  • editorCursor.foreground#eaf2ef
  • editorGroup.border#5d5f63
  • editorGutter.background#222524
  • editorLineNumber.activeForeground#50cf89
  • editorLineNumber.foreground#969faf
  • inlineChatInput.background#252827
  • inlineChatInput.foreground#eaf2ef
  • inlineChatInput.placeholderForeground#cfaaff
  • input.background#252827
  • input.foreground#eaf2ef
  • input.placeholderForeground#cfaaff
  • panel.background#222524
  • sideBar.background#252928
  • statusBar.background#35605d
  • statusBar.foreground#ecf0ff
  • statusBar.noFolderBackground#3e4140
  • statusBarItem.remoteBackground#35605d
  • statusBarItem.remoteForeground#ecf0ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#cac89f
comment#d0b9f0
entity.name.tag#969faf
entity.name.tag#6fcfd2
comment#cac89f
markup.underline.link#8fcfbb
keyword#969faf
markup.fenced_code, markup.inline.raw
markup.list#969faf
invalid#ff7a5f
keyword#e0b02f
keyword#eba8a8
invalid.deprecated#e0b02f
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#cac89f
comment#cfaaff
comment#cac89f
comment#50cf89
comment#f59acf
comment#50cf89
keyword#eba8a8
gitDecoration.addedResourceForeground#50cf89
gitDecoration.untrackedResourceForeground#50cf89
gitDecoration.ignoredResourceForeground#969faf
gitDecoration.modifiedResourceForeground#e0b02f
breadcrumb.foreground, tree.tableColumnHeader.foreground#50cf89
explorer.fileForeground#eaf2ef
explorer.directoryForeground#50cf89
comment.documentation#696969
editorSuggestWidget.highlightForeground#50cf89
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#7fca5a
invalid#6fcfd2
invalid#6fcfd2
invalid#50cf89
invalid, invalid.deprecated#e0b02f
invalid#ff7a5f
invalid.deprecated#e0b02f
invalid#ff7a5f
invalid#ff7a5f
invalid.deprecated#e0b02f
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#eba8a8
variable#f59acf
entity.name.function#7fca5a
constant#cfaaff
string#50cf89
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#e0b02f
entity.name.function#e0b02f
invalid.deprecated#e0b02f
string#50cf89
invalid.deprecated#e0b02f
invalid#ff7a5f
invalid.deprecated#e0b02f
invalid#ff7a5f
variable#f59acf
variable#969faf
comment#cac89f
comment#cac89f
comment.documentation#99bfcf
entity.name.function#e0b02f
editor.findMatchBackground#eaf2ef
editor.findMatchHighlightBackground#eaf2ef
editor.findMatchBackground, editor.findMatchHighlightBackground#eaf2ef
string.regexp#ff656a
string.regexp#f59acf
string.regexp#50cf89
meta.preprocessor, keyword.control.import#fa90ea
invalid.deprecated#e0b02f
invalid.deprecated#e0b02f
constant, constant.language, support.constant#cfaaff
constant#cfaaff
storage.type, support.type, entity.name.type#6fcfd2
entity.name.type#6fcfd2
variable#d0b9f0
variable, variable.other#f59acf
variable#f59acf
entity.name.function#a9c99f
entity.name.function, support.function#7fca5a
entity.name.function#7fca5a
support.function, support.class, support.type#d0b9f0
keyword, storage, keyword.control, storage.modifier#eba8a8
keyword#eba8a8
comment.documentation#d0b9f0
comment.documentation, comment.block.documentation#99bfcf
comment.documentation#99bfcf
string, string.quoted, string.template#50cf89
string#50cf89
comment, punctuation.definition.comment#cac89f
comment#cac89f
comment, punctuation.definition.comment#cac89f
comment#cac89f
invalid#eaf2ef
invalid#ff7a5f
invalid.illegal#ff7a5f
editor.wordHighlightStrongBackground#eaf2ef
invalid.deprecated#e0b02f
invalid.illegal#ff7a5f
editorCursor.foreground
editorGutter.background#eaf2ef
editorGroup.border#5d5f63
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#969faf
statusBar.background, statusBar.foreground#ecf0ff
editorLineNumber.activeForeground#50cf89
editorLineNumber.activeForeground#50cf89
editorLineNumber.foreground#969faf
invalid.deprecated
editor.selectionHighlightBackground#eaf2ef
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#eaf2ef

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme