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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#81A1C1
comment#6f7787
markup.heading#BF616A
entity.name.tag#4C566A
entity.name.tag#81A1C1
comment#6f7787
markup.underline.link#B48EAD
keyword#8FBCBB
markup.fenced_code, markup.inline.raw
markup.list#BF616A
invalid#BF616A
keyword#EBCB8B
keyword#A3BE8C
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#78808f
gitDecoration.ignoredResourceForeground#6f7787
gitDecoration.renamedResourceForeground#78808f
gitDecoration.modifiedResourceForeground#5D80AE
breadcrumb.foreground, tree.tableColumnHeader.foreground#A3BE8C
explorer.fileForeground#ECEFF4
explorer.directoryForeground#ECEFF4
comment.documentation#696969
editorSuggestWidget.highlightForeground#81A1C1
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#ECEFF4
invalid#FF0000
invalid#88C0D0
invalid#8FBCBB
invalid#8FBCBB
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#6f7787
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#D8DEE9
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#81A1C1
string.regexp#81A1C1
string.regexp#A3BE8C
meta.preprocessor, keyword.control.import#81A1C1
invalid.deprecated#EBCB8B
invalid.deprecated#EBCB8B
constant, constant.language, support.constant#81A1C1
constant#81A1C1
storage.type, support.type, entity.name.type#8FBCBB
entity.name.type#8FBCBB
variable#D8DEE9
variable, variable.other#D8DEE9
variable#D8DEE9
entity.name.function#88C0D0
entity.name.function, support.function#88C0D0
entity.name.function#88C0D0
support.function, support.class, support.type#81A1C1
keyword, storage, keyword.control, storage.modifier#81A1C1
keyword#81A1C1
comment.documentation#81A1C1
comment.documentation, comment.block.documentation#78808f
comment.documentation#78808f
string, string.quoted, string.template#A3BE8C
string#A3BE8C
comment, punctuation.definition.comment#6f7787
comment#6f7787
comment, punctuation.definition.comment#6f7787
comment#6f7787
invalid#191C25
invalid
invalid.illegal#D8DEE9
editor.wordHighlightStrongBackground#2E3440
invalid.deprecated#EBCB8B
invalid.illegal#BF616A
editorCursor.foreground
editorGutter.background#8FBCBB
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