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#3b6ea8
  • editor.foreground#2a2a2a
  • editor.selectionBackground#bdbdbd
  • editorCursor.background#3b6ea8
  • editorCursor.foreground#2a2a2a
  • editorGroup.border#c4c4c4
  • editorGutter.background#fafafa
  • editorLineNumber.activeForeground#2a2a2a
  • editorLineNumber.foreground#454545
  • inlineChatInput.background#dcdcdc
  • inlineChatInput.foreground#262626
  • inlineChatInput.placeholderForeground#3b6ea8
  • input.background#dcdcdc
  • input.foreground#262626
  • input.placeholderForeground#3b6ea8
  • panel.background#fafafa
  • sideBar.background#e1e1e1
  • statusBar.background#d6d6d6
  • statusBar.foreground#242424
  • statusBar.noFolderBackground#eeeeee
  • statusBarItem.remoteBackground#d6d6d6
  • statusBarItem.remoteForeground#242424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#3b6ea8
comment#b1b1b1
markup.heading#3b6ea8
entity.name.tag#3b6ea8
entity.name.tag#3b6ea8
comment#b1b1b1
markup.underline.link#97365b
keyword#9a7500
markup.fenced_code, markup.inline.raw
markup.list#99324b
invalid#99324b
keyword#9a7500
keyword#4f894c
invalid.deprecated#9a7500
invalid.deprecated
markup.inserted#4f894c
markup.inserted#3f6d3c
comment#842879
comment#3b6ea8
comment#ac4426
comment#4f894c
comment#97365b
keyword#398eac
gitDecoration.addedResourceForeground#4f894c
gitDecoration.untrackedResourceForeground#b6b6b6
gitDecoration.ignoredResourceForeground#b1b1b1
gitDecoration.renamedResourceForeground#b6b6b6
gitDecoration.modifiedResourceForeground#842879
breadcrumb.foreground, tree.tableColumnHeader.foreground#4f894c
explorer.fileForeground#2a2a2a
explorer.directoryForeground#2a2a2a
comment.documentation#696969
editorSuggestWidget.highlightForeground#3b6ea8
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#2a2a2a
invalid#FF0000
invalid#29838d
invalid#9a7500
invalid#9a7500
invalid#4f894c
invalid, invalid.deprecated#9a7500
invalid#99324b
invalid.deprecated#9a7500
invalid#99324b
invalid#99324b
invalid.deprecated#9a7500
invalid#99324b
invalid.deprecated#9a7500
invalid#99324b
entity.name.type#3b6ea8
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#b1b1b1
diffEditor.insertedTextBackground#4f894c
diffEditor.removedTextBackground#99324b
invalid#FF0000
entity.name.function#398eac
diff.insertedTextBackground#4f894c
diff.removedTextBackground#99324b
meta.diff.header.file#3b6ea8
meta.diff.header#398eac
invalid.deprecated#99324b
invalid.deprecated#9a7500
entity.name.function#cb9aad
invalid.deprecated#9a7500
string#00008B
invalid.deprecated#9a7500
invalid#99324b
invalid.deprecated#9a7500
invalid#99324b
variable#4f894c
variable#97365b
variable#bdbdbd
comment#bdbdbd
comment#2a2a2a
comment.documentation#4f894c
editor.findMatchBackground#4f894c
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground
string.regexp#3b6ea8
string.regexp#3b6ea8
string.regexp#4f894c
meta.preprocessor, keyword.control.import#3b6ea8
invalid.deprecated#9a7500
invalid.deprecated#9a7500
constant, constant.language, support.constant#97365b
constant#97365b
storage.type, support.type, entity.name.type#9a7500
entity.name.type#9a7500
variable#cb9aad
variable, variable.other#cb9aad
variable#cb9aad
entity.name.function#29838d
entity.name.function, support.function#29838d
entity.name.function#29838d
support.function, support.class, support.type#29838d
keyword, storage, keyword.control, storage.modifier#3b6ea8
keyword#3b6ea8
comment.documentation#97365b
comment.documentation, comment.block.documentation#b6b6b6
comment.documentation#b6b6b6
string, string.quoted, string.template#4f894c
string#4f894c
comment, punctuation.definition.comment#b1b1b1
comment#b1b1b1
comment, punctuation.definition.comment#b1b1b1
comment#b1b1b1
invalid#fafafa
invalid
invalid.illegal#fafafa
editor.wordHighlightStrongBackground#99324b
invalid.deprecated#9a7500
invalid.illegal#99324b
editorCursor.foreground
editorGutter.background#bdbdbd
editorGroup.border#c4c4c4
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#9e9e9e
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#2a2a2a
editorLineNumber.foreground#454545
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#fafafa

Shiki preview

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

Loading...