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#e1e1e1
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fafafa
  • editor.findMatchBackground#ff9940
  • editor.foreground#575f66
  • editor.selectionBackground#bce1f3
  • editorCursor.background#ff9940
  • editorCursor.foreground#575f66
  • editorGroup.border#fcfcfc
  • editorGutter.background#fafafa
  • editorLineNumber.activeForeground#575f66
  • editorLineNumber.foreground#ede3e5
  • inlineChatInput.background#dcdcdc
  • inlineChatInput.foreground#2c3033
  • inlineChatInput.placeholderForeground#ff9940
  • input.background#dcdcdc
  • input.foreground#2c3033
  • input.placeholderForeground#ff9940
  • panel.background#fafafa
  • sideBar.background#e1e1e1
  • statusBar.background#fafafa
  • statusBar.foreground#ba9199
  • statusBar.noFolderBackground#fafafa
  • statusBarItem.remoteBackground#fafafa
  • statusBarItem.remoteForeground#ba9199

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#fa8d3e
comment#c4c7c9
markup.heading#f07171
entity.name.tag#ede3e5
entity.name.tag#fa8d3e
comment#c4c7c9
markup.underline.link#a37acc
keyword#e6ba7e
markup.fenced_code, markup.inline.raw
markup.list#f07171
invalid#f51818
keyword#f2ae49
keyword#86b300
invalid.deprecated#f2ae49
invalid.deprecated
markup.inserted#99bf4d
markup.inserted#7a983d
comment#b594d6
comment#fa8d3e
comment#fa8d3e
comment#86b300
comment#a37acc
keyword#55b4d4
gitDecoration.addedResourceForeground#99bf4d
gitDecoration.untrackedResourceForeground#d2d5d6
gitDecoration.ignoredResourceForeground#c4c7c9
gitDecoration.renamedResourceForeground#d2d5d6
gitDecoration.modifiedResourceForeground#b594d6
breadcrumb.foreground, tree.tableColumnHeader.foreground#86b300
explorer.fileForeground#575f66
explorer.directoryForeground#575f66
comment.documentation#696969
editorSuggestWidget.highlightForeground#ff9940
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#575f66
invalid#FF0000
invalid#f2ae49
invalid#e6ba7e
invalid#e6ba7e
invalid#86b300
invalid, invalid.deprecated#f2ae49
invalid#f51818
invalid.deprecated#f2ae49
invalid#f51818
invalid#f51818
invalid.deprecated#f2ae49
invalid#f51818
invalid.deprecated#f2ae49
invalid#f51818
entity.name.type#fa8d3e
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#c4c7c9
diffEditor.insertedTextBackground#86b300
diffEditor.removedTextBackground#f27983
invalid#FF0000
entity.name.function#55b4d4
diff.insertedTextBackground#86b300
diff.removedTextBackground#f27983
meta.diff.header.file#399ee6
meta.diff.header#55b4d4
invalid.deprecated#f51818
invalid.deprecated#f2ae49
entity.name.function#575f66
invalid.deprecated#f2ae49
string#00008B
invalid.deprecated#f2ae49
invalid#f51818
invalid.deprecated#f2ae49
invalid#f51818
variable#86b300
variable#a37acc
variable#abb0b6
comment#abb0b6
comment#575f66
comment.documentation#86b300
editor.findMatchBackground#86b300
editor.findMatchHighlightBackground#d9c2c6
editor.findMatchBackground, editor.findMatchHighlightBackground#d9c2c6
string.regexp#ed9366
string.regexp#ed9366
string.regexp#86b300
meta.preprocessor, keyword.control.import#ed9366
invalid.deprecated#f2ae49
invalid.deprecated#f2ae49
constant, constant.language, support.constant#a37acc
constant#a37acc
storage.type, support.type, entity.name.type#e6ba7e
entity.name.type#e6ba7e
variable#575f66
variable, variable.other#575f66
variable#575f66
entity.name.function#f2ae49
entity.name.function, support.function#f2ae49
entity.name.function#f2ae49
support.function, support.class, support.type#f2ae49
keyword, storage, keyword.control, storage.modifier#fa8d3e
keyword#fa8d3e
comment.documentation#a37acc
comment.documentation, comment.block.documentation#d2d5d6
comment.documentation#d2d5d6
string, string.quoted, string.template#86b300
string#86b300
comment, punctuation.definition.comment#c4c7c9
comment#c4c7c9
comment, punctuation.definition.comment#c4c7c9
comment#c4c7c9
invalid#d9c2c6
invalid
invalid.illegal#d9c2c6
editor.wordHighlightStrongBackground#f07171
invalid.deprecated#f2ae49
invalid.illegal#f51818
editorCursor.foreground
editorGutter.background#f0f8fd
editorGroup.border#fcfcfc
editorGroupHeader.tabsBackground#ba9199
statusBar.noFolderBackground#ba9199
statusBar.background, statusBar.foreground#ba9199
editorLineNumber.activeForeground
editorLineNumber.activeForeground#575f66
editorLineNumber.foreground#ede3e5
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#d9c2c6

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme