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#B4EEB4
  • editor.foreground#383a42
  • editor.selectionBackground#FFEC8B
  • editorCursor.background#000000
  • editorCursor.foreground#383a42
  • editorGutter.background#fafafa
  • editorLineNumber.activeForeground#7F7F7F
  • editorLineNumber.foreground#7F7F7F
  • inlineChatInput.background#dcdcdc
  • inlineChatInput.foreground#24262b
  • inlineChatInput.placeholderForeground#0184bc
  • input.background#dcdcdc
  • input.foreground#24262b
  • input.placeholderForeground#0184bc
  • panel.background#fafafa
  • sideBar.background#e1e1e1
  • statusBar.background#f0f0f1
  • statusBar.foreground#27292e
  • statusBar.noFolderBackground#f0f0f1
  • statusBarItem.remoteBackground#f0f0f1
  • statusBarItem.remoteForeground#27292e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a626a4
comment#999999
markup.heading#0184bc
entity.name.tag#7F7F7F
entity.name.tag#c18401
comment#a0a1a7
markup.underline.link#50a14f
keyword#c18401
markup.list#7F7F7F
invalid#ADD8E6
keyword#FF0000
keyword#50a14f
invalid.deprecated#FF8C00
invalid.deprecated
markup.inserted#22aa22
markup.inserted#22aa22
comment#50a14f
comment#a626a4
comment#4A708B
comment#6E8B3D
comment#4A708B
keyword#50a14f
gitDecoration.addedResourceForeground#c18401
gitDecoration.untrackedResourceForeground#50a14f
gitDecoration.ignoredResourceForeground#a0a1a7
gitDecoration.renamedResourceForeground#50a14f
gitDecoration.modifiedResourceForeground#8B4513
breadcrumb.foreground, tree.tableColumnHeader.foreground#008B8B
explorer.fileForeground#383a42
explorer.directoryForeground#0184bc
comment.documentation#696969
editorSuggestWidget.highlightForeground#8B0000
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#000000
invalid#FF0000
invalid#0184bc
invalid#c18401
invalid#c18401
invalid#228B22
invalid, invalid.deprecated#FF8C00
invalid#FF0000
invalid.deprecated#FF8C00
invalid#FF0000
invalid#88090B
invalid.deprecated#FF0000
invalid#FF0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#a626a4
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#a0a1a7
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file
meta.diff.header
invalid.deprecated#FF0000
invalid.deprecated#FF8C00
entity.name.function#8B4513
invalid.deprecated#FF0000
string#00008B
invalid.deprecated#FF8C00
invalid#FF0000
invalid.deprecated#FF8C00
invalid#FF0000
variable#0000FF
variable#0000FF
comment#00008B
comment
comment.documentation#006400
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#B0E2FF
string.regexp#000000
string.regexp#000000
string.regexp#50a14f
meta.preprocessor, keyword.control.import#e44649
invalid.deprecated#FF0000
invalid.deprecated#FF0000
constant, constant.language, support.constant#008B8B
constant#008B8B
storage.type, support.type, entity.name.type#c18401
entity.name.type#c18401
variable#8B4513
variable, variable.other#8B4513
variable#8B4513
entity.name.function#0184bc
entity.name.function, support.function#0184bc
entity.name.function#0184bc
support.function, support.class, support.type#e44649
keyword, storage, keyword.control, storage.modifier#a626a4
keyword#a626a4
comment.documentation#008B8B
comment.documentation, comment.block.documentation#50a14f
comment.documentation#50a14f
string, string.quoted, string.template#50a14f
string#50a14f
comment, punctuation.definition.comment#a0a1a7
comment#a0a1a7
comment, punctuation.definition.comment#a0a1a7
comment#a0a1a7
invalid
invalid
invalid.illegal
editor.wordHighlightStrongBackground
invalid.deprecated#FF8C00
invalid.illegal#FF0000
editorCursor.foreground
editorGutter.background
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#a0a1a7
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#7F7F7F
editorLineNumber.foreground#7F7F7F
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground

Shiki preview

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

Loading...