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#000b22
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#000a1f
  • editor.findMatchBackground#4f4f00
  • editor.foreground#ddddee
  • editor.selectionBackground#223848
  • editorCursor.background#ffff00
  • editorCursor.foreground#ddddee
  • editorGroup.border#555a64
  • editorGutter.background#000a1f
  • editorLineNumber.activeForeground#009fff
  • editorLineNumber.foreground#7f8797
  • inlineChatInput.background#000b21
  • inlineChatInput.foreground#ddddee
  • inlineChatInput.placeholderForeground#009fff
  • input.background#000b21
  • input.foreground#ddddee
  • input.placeholderForeground#009fff
  • panel.background#000a1f
  • sideBar.background#000b22
  • statusBar.background#003f8f
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#243145
  • statusBarItem.remoteBackground#003f8f
  • statusBarItem.remoteForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#af9a6a
comment#8aa0df
entity.name.tag#7f8797
entity.name.tag#9f95ff
comment#af9a6a
markup.underline.link#90afef
keyword#7f8797
markup.fenced_code, markup.inline.raw
markup.list#7f8797
invalid#cfaf00
keyword#bfaf7a
keyword#cfaf00
invalid.deprecated#bfaf7a
invalid.deprecated
markup.inserted#c4d5ff
markup.inserted#c4d5ff
comment#af9a6a
comment#7fafff
comment#af9a6a
comment#009fff
comment#cfaf00
comment#009fff
keyword#cfaf00
gitDecoration.addedResourceForeground#009fff
gitDecoration.untrackedResourceForeground#009fff
gitDecoration.ignoredResourceForeground#7f8797
gitDecoration.modifiedResourceForeground#bfaf7a
breadcrumb.foreground, tree.tableColumnHeader.foreground#009fff
explorer.fileForeground#ddddee
explorer.directoryForeground#009fff
comment.documentation#696969
editorSuggestWidget.highlightForeground#009fff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#bfaf7a
invalid#9f95ff
invalid#9f95ff
invalid#009fff
invalid, invalid.deprecated#bfaf7a
invalid#cfaf00
invalid.deprecated#bfaf7a
invalid#cfaf00
invalid#cfaf00
invalid.deprecated#bfaf7a
invalid#e5bf00
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#cfaf00
variable#0db0ff
entity.name.function#bfaf7a
constant#009fff
string#3f90f0
comment.documentation#7f8797
diffEditor.insertedTextBackground#c4d5ff
diffEditor.removedTextBackground#d4d48f
invalid#cfaf00
entity.name.function
diff.insertedTextBackground#c4d5ff
diff.removedTextBackground#d4d48f
invalid.deprecated#cfaf00
invalid.deprecated#bfaf7a
entity.name.function#bfaf7a
invalid.deprecated#bfaf7a
string#3f90f0
invalid.deprecated#bfaf7a
invalid#cfaf00
invalid.deprecated#bfaf7a
invalid#cfaf00
variable#0db0ff
variable#7f8797
comment#af9a6a
comment#af9a6a
comment.documentation#8aa0df
entity.name.function#bfaf7a
editor.findMatchBackground#ddddee
editor.findMatchHighlightBackground#ddddee
editor.findMatchBackground, editor.findMatchHighlightBackground#ddddee
string.regexp#cfaf00
string.regexp#009fff
string.regexp#3f90f0
meta.preprocessor, keyword.control.import#aa9f32
invalid.deprecated#bfaf7a
invalid.deprecated#bfaf7a
constant, constant.language, support.constant#009fff
constant#009fff
storage.type, support.type, entity.name.type#9f95ff
entity.name.type#9f95ff
variable#8aa0df
variable, variable.other#0db0ff
variable#0db0ff
entity.name.function#af9a6a
entity.name.function, support.function#bfaf7a
entity.name.function#bfaf7a
support.function, support.class, support.type#6a9fff
keyword, storage, keyword.control, storage.modifier#cfaf00
keyword#cfaf00
comment.documentation#c59fcf
comment.documentation, comment.block.documentation#8aa0df
comment.documentation#8aa0df
string, string.quoted, string.template#3f90f0
string#3f90f0
comment, punctuation.definition.comment#af9a6a
comment#af9a6a
comment, punctuation.definition.comment#af9a6a
comment#af9a6a
invalid#ddddee
invalid#cfaf00
invalid.illegal#cfaf00
editor.wordHighlightStrongBackground#ddddee
invalid.deprecated#bfaf7a
invalid.illegal#cfaf00
editorCursor.foreground
editorGutter.background#ddddee
editorGroup.border#555a64
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#7f8797
statusBar.background, statusBar.foreground#ffffff
editorLineNumber.activeForeground#009fff
editorLineNumber.activeForeground#009fff
editorLineNumber.foreground#7f8797
invalid.deprecated
editor.selectionHighlightBackground#ddddee
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#ddddee

Shiki preview

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

Loading...