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#1c0b11
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#190a0f
  • editor.findMatchBackground#303f6f
  • editor.foreground#d3cfcf
  • editor.selectionBackground#232f3f
  • editorCursor.background#ff5aaf
  • editorCursor.foreground#d3cfcf
  • editorGroup.border#695960
  • editorGutter.background#190a0f
  • editorLineNumber.activeForeground#f470df
  • editorLineNumber.foreground#808898
  • inlineChatInput.background#1b0b10
  • inlineChatInput.foreground#d3cfcf
  • inlineChatInput.placeholderForeground#f470df
  • input.background#1b0b10
  • input.foreground#d3cfcf
  • input.placeholderForeground#f470df
  • panel.background#190a0f
  • sideBar.background#1c0b11
  • statusBar.background#771a4f
  • statusBar.foreground#ffcfdf
  • statusBar.noFolderBackground#392a2f
  • statusBarItem.remoteBackground#771a4f
  • statusBarItem.remoteForeground#ffcfdf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#bf9f8f
comment#cc9bcf
entity.name.tag#808898
entity.name.tag#f470df
comment#bf9f8f
markup.underline.link#bf9cdf
keyword#808898
markup.fenced_code, markup.inline.raw
markup.list#808898
invalid#ff656f
keyword#ea9955
keyword#ef80bf
invalid.deprecated#ea9955
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#bf9f8f
comment#a897ef
comment#bf9f8f
comment#f470df
comment#e5b76f
comment#f470df
keyword#ef80bf
gitDecoration.addedResourceForeground#60b444
gitDecoration.untrackedResourceForeground#60b444
gitDecoration.ignoredResourceForeground#808898
gitDecoration.modifiedResourceForeground#ea9955
breadcrumb.foreground, tree.tableColumnHeader.foreground#f470df
explorer.fileForeground#d3cfcf
explorer.directoryForeground#f470df
comment.documentation#696969
editorSuggestWidget.highlightForeground#f470df
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#f59280
invalid#f470df
invalid#f470df
invalid#60b444
invalid, invalid.deprecated#ea9955
invalid#ff656f
invalid.deprecated#ea9955
invalid#ff656f
invalid#ff656f
invalid.deprecated#ea9955
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#ef80bf
variable#df7fff
entity.name.function#f59280
constant#ff78aa
string#e5b76f
comment.documentation#808898
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ff656f
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ff656f
invalid.deprecated#ea9955
entity.name.function#ea9955
invalid.deprecated#ea9955
string#e5b76f
invalid.deprecated#ea9955
invalid#ff656f
invalid.deprecated#ea9955
invalid#ff656f
variable#df7fff
variable#808898
comment#bf9f8f
comment#bf9f8f
comment.documentation#cc9bcf
entity.name.function#ea9955
editor.findMatchBackground#d3cfcf
editor.findMatchHighlightBackground#d3cfcf
editor.findMatchBackground, editor.findMatchHighlightBackground#d3cfcf
string.regexp#ff7359
string.regexp#ef80bf
string.regexp#e5b76f
meta.preprocessor, keyword.control.import#8fbaef
invalid.deprecated#ea9955
invalid.deprecated#ea9955
constant, constant.language, support.constant#ff78aa
constant#ff78aa
storage.type, support.type, entity.name.type#f470df
entity.name.type#f470df
variable#cc9bcf
variable, variable.other#df7fff
variable#df7fff
entity.name.function#bf9f8f
entity.name.function, support.function#f59280
entity.name.function#f59280
support.function, support.class, support.type#a897ef
keyword, storage, keyword.control, storage.modifier#ef80bf
keyword#ef80bf
comment.documentation#cc9bcf
comment.documentation, comment.block.documentation#cc9bcf
comment.documentation#cc9bcf
string, string.quoted, string.template#e5b76f
string#e5b76f
comment, punctuation.definition.comment#bf9f8f
comment#bf9f8f
comment, punctuation.definition.comment#bf9f8f
comment#bf9f8f
invalid#d3cfcf
invalid#ff656f
invalid.illegal#ff656f
editor.wordHighlightStrongBackground#d3cfcf
invalid.deprecated#ea9955
invalid.illegal#ff656f
editorCursor.foreground
editorGutter.background#d3cfcf
editorGroup.border#695960
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#808898
statusBar.background, statusBar.foreground#ffcfdf
editorLineNumber.activeForeground#f470df
editorLineNumber.activeForeground#f470df
editorLineNumber.foreground#808898
invalid.deprecated
editor.selectionHighlightBackground#d3cfcf
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#d3cfcf

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme