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#0e0f1f
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#0d0e1c
  • editor.findMatchBackground#45605e
  • editor.foreground#ffffff
  • editor.selectionBackground#555a66
  • editor.selectionForeground#ffffff
  • editorCursor.background#ff66ff
  • editorCursor.foreground#ffffff
  • editorGroup.border#61647a
  • editorGutter.background#1d2235
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#989898
  • inlineChatInput.background#0e0f1e
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#4ae2f0
  • input.background#0e0f1e
  • input.foreground#ffffff
  • input.placeholderForeground#4ae2f0
  • panel.background#0d0e1c
  • sideBar.background#0e0f1f
  • statusBar.background#484d67
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#292d48
  • statusBarItem.remoteBackground#484d67
  • statusBarItem.remoteForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ef8386
comment#d2b580
entity.name.tag#989898
entity.name.tag#11c777
comment#ef8386
markup.underline.link#c6daff
keyword#989898
markup.fenced_code, markup.inline.raw
markup.list#989898
invalid#ff5f59
keyword#d0bc00
keyword#79a8ff
invalid.deprecated#d0bc00
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#ef8386
comment#f78fe7
comment#ef8386
comment#b6a0ff
comment#00d3d0
comment#b6a0ff
keyword#79a8ff
gitDecoration.addedResourceForeground#11c777
gitDecoration.untrackedResourceForeground#11c777
gitDecoration.ignoredResourceForeground#989898
gitDecoration.modifiedResourceForeground#d0bc00
breadcrumb.foreground, tree.tableColumnHeader.foreground#b6a0ff
explorer.fileForeground#ffffff
explorer.directoryForeground#b6a0ff
comment.documentation#696969
editorSuggestWidget.highlightForeground#00bcff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#f78fe7
invalid#11c777
invalid#11c777
invalid#11c777
invalid, invalid.deprecated#d0bc00
invalid#ff5f59
invalid.deprecated#ffffff
invalid#ffffff
invalid#ffffff
invalid.deprecated#d0bc00
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#79a8ff
variable#4ae2f0
entity.name.function#f78fe7
constant#b6a0ff
string#2fafff
comment.documentation#989898
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ff5f59
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ff5f59
invalid.deprecated#d0bc00
entity.name.function#d0bc00
invalid.deprecated#d0bc00
string#2fafff
invalid.deprecated#d0bc00
invalid#ff5f59
invalid.deprecated#d0bc00
invalid#ff5f59
variable#4ae2f0
variable#989898
comment#ef8386
comment#ef8386
comment.documentation#9ac8e0
entity.name.function#dfaf7a
editor.findMatchBackground#ffffff
editor.findMatchHighlightBackground#ffffff
editor.findMatchBackground, editor.findMatchHighlightBackground#ffffff
string.regexp#b6a0ff
string.regexp#f78fe7
string.regexp#2fafff
meta.preprocessor, keyword.control.import#ff7f86
invalid.deprecated#d0bc00
invalid.deprecated#d0bc00
constant, constant.language, support.constant#b6a0ff
constant#b6a0ff
storage.type, support.type, entity.name.type#11c777
entity.name.type#11c777
variable#76afbf
variable, variable.other#4ae2f0
variable#4ae2f0
entity.name.function#d09dc0
entity.name.function, support.function#f78fe7
entity.name.function#f78fe7
support.function, support.class, support.type#feacd0
keyword, storage, keyword.control, storage.modifier#79a8ff
keyword#79a8ff
comment.documentation#caa6df
comment.documentation, comment.block.documentation#9ac8e0
comment.documentation#9ac8e0
string, string.quoted, string.template#2fafff
string#2fafff
comment, punctuation.definition.comment#ef8386
comment#ef8386
comment, punctuation.definition.comment#ef8386
comment#ef8386
invalid#ffffff
invalid#ffffff
invalid.illegal#ffffff
editor.wordHighlightStrongBackground#ffffff
invalid.deprecated#d0bc00
invalid.illegal#ff5f59
editorCursor.foreground
editorGutter.background#ffffff
editorGroup.border#61647a
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#969696
statusBar.background, statusBar.foreground#ffffff
editorLineNumber.activeForeground#b6a0ff
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#989898
invalid.deprecated
editor.selectionHighlightBackground#ffffff
editor.selectionBackground, editor.selectionForeground#ffffff
editor.findMatchBackground#ffffff

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme