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#333946
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#2E3440
  • editor.findMatchBackground#9099AB
  • editor.foreground#ECEFF4
  • editor.selectionBackground#434C5E
  • editorCursor.background#9099AB
  • editorCursor.foreground#ECEFF4
  • editorGroup.border#1c2028
  • editorGutter.background#2E3440
  • editorLineNumber.activeForeground#D8DEE9
  • editorLineNumber.foreground#6f7787
  • inlineChatInput.background#323845
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#9099AB
  • input.background#323845
  • input.foreground#ffffff
  • input.placeholderForeground#9099AB
  • panel.background#2E3440
  • sideBar.background#333946
  • statusBar.background#242832
  • statusBar.foreground#ECEFF4
  • statusBar.noFolderBackground#292e39
  • statusBarItem.remoteBackground#242832
  • statusBarItem.remoteForeground#ECEFF4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#81A1C1
comment#9099AB
markup.heading#BF616A
entity.name.tag#4C566A
entity.name.tag#81A1C1
comment#9099AB
markup.underline.link#B48EAD
keyword#A3BE8C
markup.fenced_code, markup.inline.raw
markup.list#BF616A
invalid#BF616A
keyword#EBCB8B
keyword#8FBCBB
invalid.deprecated#EBCB8B
invalid.deprecated
markup.inserted#A3BE8C
markup.inserted#829870
comment#5D80AE
comment#81A1C1
comment#D08770
comment#A3BE8C
comment#B48EAD
keyword#88C0D0
gitDecoration.addedResourceForeground#A3BE8C
gitDecoration.untrackedResourceForeground#D8DEE9
gitDecoration.ignoredResourceForeground#9099AB
gitDecoration.renamedResourceForeground#D8DEE9
gitDecoration.modifiedResourceForeground#5D80AE
breadcrumb.foreground, tree.tableColumnHeader.foreground#8FBCBB
explorer.fileForeground#ECEFF4
explorer.directoryForeground#ECEFF4
comment.documentation#696969
editorSuggestWidget.highlightForeground#9099AB
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#ECEFF4
invalid#FF0000
invalid#EBCB8B
invalid#A3BE8C
invalid#A3BE8C
invalid#A3BE8C
invalid, invalid.deprecated#EBCB8B
invalid#BF616A
invalid.deprecated#EBCB8B
invalid#BF616A
invalid#BF616A
invalid.deprecated#EBCB8B
invalid#BF616A
invalid.deprecated#EBCB8B
invalid#BF616A
entity.name.type#81A1C1
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#9099AB
diffEditor.insertedTextBackground#A3BE8C
diffEditor.removedTextBackground#BF616A
invalid#FF0000
entity.name.function#88C0D0
diff.insertedTextBackground#A3BE8C
diff.removedTextBackground#BF616A
meta.diff.header.file#81A1C1
meta.diff.header#88C0D0
invalid.deprecated#BF616A
invalid.deprecated#EBCB8B
entity.name.function#88C0D0
invalid.deprecated#EBCB8B
string#FFFFE0
invalid.deprecated#EBCB8B
invalid#BF616A
invalid.deprecated#EBCB8B
invalid#BF616A
variable#A3BE8C
variable#B48EAD
variable#434C5E
comment#434C5E
comment#ECEFF4
comment.documentation#A3BE8C
editor.findMatchBackground#A3BE8C
editor.findMatchHighlightBackground#F0F4FC
editor.findMatchBackground, editor.findMatchHighlightBackground#F0F4FC
string.regexp#88C0D0
string.regexp#88C0D0
string.regexp#8FBCBB
meta.preprocessor, keyword.control.import#88C0D0
invalid.deprecated#EBCB8B
invalid.deprecated#EBCB8B
constant, constant.language, support.constant#81A1C1
constant#81A1C1
storage.type, support.type, entity.name.type#A3BE8C
entity.name.type#A3BE8C
variable#88C0D0
variable, variable.other#88C0D0
variable#88C0D0
entity.name.function#EBCB8B
entity.name.function, support.function#EBCB8B
entity.name.function#EBCB8B
support.function, support.class, support.type#B48EAD
keyword, storage, keyword.control, storage.modifier#81A1C1
keyword#81A1C1
comment.documentation#81A1C1
comment.documentation, comment.block.documentation#D8DEE9
comment.documentation#D8DEE9
string, string.quoted, string.template#8FBCBB
string#8FBCBB
comment, punctuation.definition.comment#9099AB
comment#9099AB
comment, punctuation.definition.comment#9099AB
comment#9099AB
invalid#191C25
invalid
invalid.illegal#373E4C
editor.wordHighlightStrongBackground#BF616A
invalid.deprecated#EBCB8B
invalid.illegal#BF616A
editorCursor.foreground
editorGutter.background#434C5E
editorGroup.border#1c2028
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#9099AB
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#D8DEE9
editorLineNumber.foreground#6f7787
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#191C25

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme