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#e6e6e6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#ffffff
  • editor.findMatchBackground#2f86d2
  • editor.foreground#1857a4
  • editor.selectionBackground#cbcdcb
  • editorCursor.background#2f86d2
  • editorCursor.foreground#1857a4
  • editorGroup.border#e1e6ec
  • editorGutter.background#ffffff
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#cccccc
  • inlineChatInput.background#e0e0e0
  • inlineChatInput.foreground#0c2c52
  • inlineChatInput.placeholderForeground#2f86d2
  • input.background#e0e0e0
  • input.foreground#0c2c52
  • input.placeholderForeground#2f86d2
  • panel.background#ffffff
  • sideBar.background#e6e6e6
  • statusBar.background#eff2ef
  • statusBar.foreground#1857a4
  • statusBar.noFolderBackground#eff2ef
  • statusBarItem.remoteBackground#eff2ef
  • statusBarItem.remoteForeground#1857a4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#219fd5
comment#8195b0
markup.heading#ef5350
entity.name.tag#637c9d
entity.name.tag#219fd5
comment#8195b0
markup.underline.link#dc3eb7
keyword#dc3eb7
markup.fenced_code, markup.inline.raw
markup.list#ef5350
invalid#ef5350
keyword#fa841d
keyword#a44185
invalid.deprecated#fa841d
invalid.deprecated
markup.inserted#357b42
markup.inserted#2a6234
comment#a44185
comment#219fd5
comment#fa841d
comment#357b42
comment#dc3eb7
keyword#219fd5
gitDecoration.addedResourceForeground#357b42
gitDecoration.untrackedResourceForeground#60a8a1
gitDecoration.ignoredResourceForeground#8195b0
gitDecoration.renamedResourceForeground#60a8a1
gitDecoration.modifiedResourceForeground#a44185
breadcrumb.foreground, tree.tableColumnHeader.foreground#a44185
explorer.fileForeground#1857a4
explorer.directoryForeground#1857a4
comment.documentation#696969
editorSuggestWidget.highlightForeground#2f86d2
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#1857a4
invalid#FF0000
invalid#dc3eb7
invalid#dc3eb7
invalid#dc3eb7
invalid#357b42
invalid, invalid.deprecated#fa841d
invalid#ef5350
invalid.deprecated#fa841d
invalid#ef5350
invalid#ef5350
invalid.deprecated#fa841d
invalid#ef5350
invalid.deprecated#fa841d
invalid#ef5350
entity.name.type#219fd5
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#8195b0
diffEditor.insertedTextBackground#357b42
diffEditor.removedTextBackground#ef5350
invalid#FF0000
entity.name.function#219fd5
diff.insertedTextBackground#357b42
diff.removedTextBackground#ef5350
meta.diff.header.file#2f86d2
meta.diff.header#219fd5
invalid.deprecated#ef5350
invalid.deprecated#fa841d
entity.name.function#1857a4
invalid.deprecated#fa841d
string#00008B
invalid.deprecated#fa841d
invalid#ef5350
invalid.deprecated#fa841d
invalid#ef5350
variable#357b42
variable#dc3eb7
variable#8195b0
comment#8195b0
comment#1857a4
comment.documentation#357b42
editor.findMatchBackground#357b42
editor.findMatchHighlightBackground#ffffff
editor.findMatchBackground, editor.findMatchHighlightBackground#ffffff
string.regexp#219fd5
string.regexp#219fd5
string.regexp#a44185
meta.preprocessor, keyword.control.import#219fd5
invalid.deprecated#fa841d
invalid.deprecated#fa841d
constant, constant.language, support.constant#2f86d2
constant#2f86d2
storage.type, support.type, entity.name.type#dc3eb7
entity.name.type#dc3eb7
variable#1857a4
variable, variable.other#1857a4
variable#1857a4
entity.name.function#dc3eb7
entity.name.function, support.function#dc3eb7
entity.name.function#dc3eb7
support.function, support.class, support.type#dc3eb7
keyword, storage, keyword.control, storage.modifier#219fd5
keyword#219fd5
comment.documentation#2f86d2
comment.documentation, comment.block.documentation#60a8a1
comment.documentation#60a8a1
string, string.quoted, string.template#a44185
string#a44185
comment, punctuation.definition.comment#8195b0
comment#8195b0
comment, punctuation.definition.comment#8195b0
comment#8195b0
invalid#ffffff
invalid
invalid.illegal#ffffff
editor.wordHighlightStrongBackground#ef5350
invalid.deprecated#fa841d
invalid.illegal#ef5350
editorCursor.foreground
editorGutter.background#8195b0
editorGroup.border#e1e6ec
editorGroupHeader.tabsBackground#1857a4
statusBar.noFolderBackground#637c9d
statusBar.background, statusBar.foreground#1857a4
editorLineNumber.activeForeground
editorLineNumber.activeForeground#cccccc
editorLineNumber.foreground#cccccc
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#ffffff

Shiki preview

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

Loading...