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#2d3034
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#292c2f
  • editor.findMatchBackground#8f7a7f
  • editor.foreground#d0d0d0
  • editor.selectionBackground#404f66
  • editorCursor.background#afe6ef
  • editorCursor.foreground#d0d0d0
  • editorGroup.border#4f5f66
  • editorGutter.background#292c2f
  • editorLineNumber.activeForeground#7ac0b9
  • editorLineNumber.foreground#857f8f
  • inlineChatInput.background#2c3033
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#72aff0
  • input.background#2c3033
  • input.foreground#ffffff
  • input.placeholderForeground#72aff0
  • panel.background#292c2f
  • sideBar.background#2d3034
  • statusBar.background#5b637e
  • statusBar.foreground#dadfe5
  • statusBar.noFolderBackground#40474b
  • statusBarItem.remoteBackground#5b637e
  • statusBarItem.remoteForeground#dadfe5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#aab2df
comment#e5bbd7
entity.name.tag#857f8f
entity.name.tag#cfa0e8
comment#aab2df
markup.underline.link#aab9af
keyword#857f8f
markup.fenced_code, markup.inline.raw
markup.list#857f8f
invalid#df885f
keyword#d1a45f
keyword#99bfd0
invalid.deprecated#d1a45f
invalid.deprecated
markup.inserted#a0d0d0
markup.inserted#a0d0d0
comment#aab2df
comment#d67869
comment#aab2df
comment#7ac0b9
comment#cf9f90
comment#7ac0b9
keyword#99bfd0
gitDecoration.addedResourceForeground#70bb70
gitDecoration.untrackedResourceForeground#70bb70
gitDecoration.ignoredResourceForeground#857f8f
gitDecoration.modifiedResourceForeground#d1a45f
breadcrumb.foreground, tree.tableColumnHeader.foreground#7ac0b9
explorer.fileForeground#d0d0d0
explorer.directoryForeground#7ac0b9
comment.documentation#696969
editorSuggestWidget.highlightForeground#7ac0b9
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#60bd90
invalid#cfa0e8
invalid#cfa0e8
invalid#70bb70
invalid, invalid.deprecated#d1a45f
invalid#df885f
invalid.deprecated#d1a45f
invalid#df885f
invalid#df885f
invalid.deprecated#d1a45f
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#99bfd0
variable#a0a0ef
entity.name.function#60bd90
constant#cf9f90
string#7ac0b9
comment.documentation#857f8f
diffEditor.insertedTextBackground#a0d0d0
diffEditor.removedTextBackground#f0bfcf
invalid#df885f
entity.name.function
diff.insertedTextBackground#a0d0d0
diff.removedTextBackground#f0bfcf
invalid.deprecated#df885f
invalid.deprecated#d1a45f
entity.name.function#d1a45f
invalid.deprecated#d1a45f
string#7ac0b9
invalid.deprecated#d1a45f
invalid#df885f
invalid.deprecated#d1a45f
invalid#df885f
variable#a0a0ef
variable#857f8f
comment#aab2df
comment#aab2df
comment.documentation#9fb3a7
entity.name.function#d1a45f
editor.findMatchBackground#d0d0d0
editor.findMatchHighlightBackground#d0d0d0
editor.findMatchBackground, editor.findMatchHighlightBackground#d0d0d0
string.regexp#d67869
string.regexp#e5a0ea
string.regexp#7ac0b9
meta.preprocessor, keyword.control.import#98c06f
invalid.deprecated#d1a45f
invalid.deprecated#d1a45f
constant, constant.language, support.constant#cf9f90
constant#cf9f90
storage.type, support.type, entity.name.type#cfa0e8
entity.name.type#cfa0e8
variable#aab2df
variable, variable.other#a0a0ef
variable#a0a0ef
entity.name.function#9fb3a7
entity.name.function, support.function#60bd90
entity.name.function#60bd90
support.function, support.class, support.type#80a4e0
keyword, storage, keyword.control, storage.modifier#99bfd0
keyword#99bfd0
comment.documentation#e5bbd7
comment.documentation, comment.block.documentation#9fb3a7
comment.documentation#9fb3a7
string, string.quoted, string.template#7ac0b9
string#7ac0b9
comment, punctuation.definition.comment#aab2df
comment#aab2df
comment, punctuation.definition.comment#aab2df
comment#aab2df
invalid#d0d0d0
invalid#df885f
invalid.illegal#df885f
editor.wordHighlightStrongBackground#d0d0d0
invalid.deprecated#d1a45f
invalid.illegal#df885f
editorCursor.foreground
editorGutter.background#d0d0d0
editorGroup.border#4f5f66
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#857f8f
statusBar.background, statusBar.foreground#dadfe5
editorLineNumber.activeForeground#7ac0b9
editorLineNumber.activeForeground#7ac0b9
editorLineNumber.foreground#857f8f
invalid.deprecated
editor.selectionHighlightBackground#d0d0d0
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#d0d0d0

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme