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#dde6e0
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#f6fff9
  • editor.findMatchBackground#ffc09f
  • editor.foreground#34494a
  • editor.selectionBackground#d0e6ff
  • editorCursor.background#bf005f
  • editorCursor.foreground#34494a
  • editorGroup.border#b4c4c0
  • editorGutter.background#f6fff9
  • editorLineNumber.activeForeground#1a870f
  • editorLineNumber.foreground#777294
  • inlineChatInput.background#d8e0db
  • inlineChatInput.foreground#1d2829
  • inlineChatInput.placeholderForeground#1a870f
  • input.background#d8e0db
  • input.foreground#1d2829
  • input.placeholderForeground#1a870f
  • panel.background#f6fff9
  • sideBar.background#dde6e0
  • statusBar.background#90e8b0
  • statusBar.foreground#243228
  • statusBar.noFolderBackground#e0e6e3
  • statusBarItem.remoteBackground#90e8b0
  • statusBarItem.remoteForeground#243228

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#876450
comment#a04360
entity.name.tag#777294
entity.name.tag#9435b4
comment#876450
markup.underline.link#9d5e7a
keyword#777294
markup.fenced_code, markup.inline.raw
markup.list#777294
invalid#d03003
keyword#a45f22
keyword#007f68
invalid.deprecated#a45f22
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#876450
comment#375cc6
comment#876450
comment#1a870f
comment#cf2f4f
comment#1a870f
keyword#007f68
gitDecoration.addedResourceForeground#1a870f
gitDecoration.untrackedResourceForeground#1a870f
gitDecoration.ignoredResourceForeground#777294
gitDecoration.modifiedResourceForeground#a45f22
breadcrumb.foreground, tree.tableColumnHeader.foreground#1a870f
explorer.fileForeground#34494a
explorer.directoryForeground#1a870f
comment.documentation#696969
editorSuggestWidget.highlightForeground#1a870f
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#4a7d00
invalid#9435b4
invalid#9435b4
invalid#1a870f
invalid, invalid.deprecated#a45f22
invalid#d03003
invalid.deprecated#a45f22
invalid#d03003
invalid#d03003
invalid.deprecated#a45f22
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#007f68
variable#1f6fbf
entity.name.function#4a7d00
constant#d03003
string#b6540f
comment.documentation#777294
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#d03003
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#d03003
invalid.deprecated#a45f22
entity.name.function#a45f22
invalid.deprecated#a45f22
string#b6540f
invalid.deprecated#a45f22
invalid#d03003
invalid.deprecated#a45f22
invalid#d03003
variable#1f6fbf
variable#777294
comment#876450
comment#876450
comment.documentation#a04360
entity.name.function#a45f22
editor.findMatchBackground#34494a
editor.findMatchHighlightBackground#34494a
editor.findMatchBackground, editor.findMatchHighlightBackground#34494a
string.regexp#cb26a0
string.regexp#d5206f
string.regexp#b6540f
meta.preprocessor, keyword.control.import#cb26a0
invalid.deprecated#a45f22
invalid.deprecated#a45f22
constant, constant.language, support.constant#d03003
constant#d03003
storage.type, support.type, entity.name.type#9435b4
entity.name.type#9435b4
variable#5f6abf
variable, variable.other#1f6fbf
variable#1f6fbf
entity.name.function#61756c
entity.name.function, support.function#4a7d00
entity.name.function#4a7d00
support.function, support.class, support.type#1a870f
keyword, storage, keyword.control, storage.modifier#007f68
keyword#007f68
comment.documentation#a04360
comment.documentation, comment.block.documentation#a04360
comment.documentation#a04360
string, string.quoted, string.template#b6540f
string#b6540f
comment, punctuation.definition.comment#876450
comment#876450
comment, punctuation.definition.comment#876450
comment#876450
invalid#34494a
invalid#d03003
invalid.illegal#d03003
editor.wordHighlightStrongBackground#34494a
invalid.deprecated#a45f22
invalid.illegal#d03003
editorCursor.foreground
editorGutter.background#34494a
editorGroup.border#b4c4c0
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#777294
statusBar.background, statusBar.foreground#243228
editorLineNumber.activeForeground#1a870f
editorLineNumber.activeForeground#1a870f
editorLineNumber.foreground#777294
invalid.deprecated
editor.selectionHighlightBackground#34494a
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#34494a

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme