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—