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#181111
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#160f0f
  • editor.findMatchBackground#004f3f
  • editor.foreground#d8cfd5
  • editor.selectionBackground#16304f
  • editorCursor.background#ff99ff
  • editorCursor.foreground#d8cfd5
  • editorGroup.border#605760
  • editorGutter.background#160f0f
  • editorLineNumber.activeForeground#e772df
  • editorLineNumber.foreground#908890
  • inlineChatInput.background#181010
  • inlineChatInput.foreground#d8cfd5
  • inlineChatInput.placeholderForeground#72afff
  • input.background#181010
  • input.foreground#d8cfd5
  • input.placeholderForeground#72afff
  • panel.background#160f0f
  • sideBar.background#181111
  • statusBar.background#6a294f
  • statusBar.foreground#ffdfdf
  • statusBar.noFolderBackground#362f35
  • statusBarItem.remoteBackground#6a294f
  • statusBarItem.remoteForeground#ffdfdf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#c7a07f
comment#e07a9a
entity.name.tag#908890
entity.name.tag#8fcfdf
comment#c7a07f
markup.underline.link#afdacf
keyword#908890
markup.fenced_code, markup.inline.raw
markup.list#908890
invalid#ff7560
keyword#d4a052
keyword#d37faf
invalid.deprecated#d4a052
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#c7a07f
comment#8895ff
comment#c7a07f
comment#e772df
comment#60bf88
comment#e772df
keyword#d37faf
gitDecoration.addedResourceForeground#60b444
gitDecoration.untrackedResourceForeground#60b444
gitDecoration.ignoredResourceForeground#908890
gitDecoration.modifiedResourceForeground#d4a052
breadcrumb.foreground, tree.tableColumnHeader.foreground#e772df
explorer.fileForeground#d8cfd5
explorer.directoryForeground#e772df
comment.documentation#696969
editorSuggestWidget.highlightForeground#e772df
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#8895ff
invalid#8fcfdf
invalid#8fcfdf
invalid#60b444
invalid, invalid.deprecated#d4a052
invalid#ff7560
invalid.deprecated#d4a052
invalid#ff7560
invalid#ff7560
invalid.deprecated#d4a052
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#d37faf
variable#9ac2ff
entity.name.function#8895ff
constant#e772df
string#60bf88
comment.documentation#908890
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ff7560
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ff7560
invalid.deprecated#d4a052
entity.name.function#d4a052
invalid.deprecated#d4a052
string#60bf88
invalid.deprecated#d4a052
invalid#ff7560
invalid.deprecated#d4a052
invalid#ff7560
variable#9ac2ff
variable#908890
comment#c7a07f
comment#c7a07f
comment.documentation#c9addf
entity.name.function#d4a052
editor.findMatchBackground#d8cfd5
editor.findMatchHighlightBackground#d8cfd5
editor.findMatchBackground, editor.findMatchHighlightBackground#d8cfd5
string.regexp#f48359
string.regexp#d37faf
string.regexp#60bf88
meta.preprocessor, keyword.control.import#ff85aa
invalid.deprecated#d4a052
invalid.deprecated#d4a052
constant, constant.language, support.constant#e772df
constant#e772df
storage.type, support.type, entity.name.type#8fcfdf
entity.name.type#8fcfdf
variable#8ac0ef
variable, variable.other#9ac2ff
variable#9ac2ff
entity.name.function#7a94df
entity.name.function, support.function#8895ff
entity.name.function#8895ff
support.function, support.class, support.type#a698ef
keyword, storage, keyword.control, storage.modifier#d37faf
keyword#d37faf
comment.documentation#c9addf
comment.documentation, comment.block.documentation#c9addf
comment.documentation#c9addf
string, string.quoted, string.template#60bf88
string#60bf88
comment, punctuation.definition.comment#c7a07f
comment#c7a07f
comment, punctuation.definition.comment#c7a07f
comment#c7a07f
invalid#d8cfd5
invalid#ff7560
invalid.illegal#ff7560
editor.wordHighlightStrongBackground#d8cfd5
invalid.deprecated#d4a052
invalid.illegal#ff7560
editorCursor.foreground
editorGutter.background#d8cfd5
editorGroup.border#605760
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#908890
statusBar.background, statusBar.foreground#ffdfdf
editorLineNumber.activeForeground#e772df
editorLineNumber.activeForeground#e772df
editorLineNumber.foreground#908890
invalid.deprecated
editor.selectionHighlightBackground#d8cfd5
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#d8cfd5

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme