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#08001c
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#070019
  • editor.findMatchBackground#664f4a
  • editor.foreground#d0d0d0
  • editor.selectionBackground#042a50
  • editorCursor.background#ef6f11
  • editorCursor.foreground#d0d0d0
  • editorGroup.border#545f6f
  • editorGutter.background#070019
  • editorLineNumber.activeForeground#6f80ff
  • editorLineNumber.foreground#857f8f
  • inlineChatInput.background#08001b
  • inlineChatInput.foreground#d0d0d0
  • inlineChatInput.placeholderForeground#c48702
  • input.background#08001b
  • input.foreground#d0d0d0
  • input.placeholderForeground#c48702
  • panel.background#070019
  • sideBar.background#08001c
  • statusBar.background#352487
  • statusBar.foreground#dedeff
  • statusBar.noFolderBackground#2a2739
  • statusBarItem.remoteBackground#352487
  • statusBarItem.remoteForeground#dedeff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#d08f72
comment#d08f72
entity.name.tag#857f8f
entity.name.tag#029fff
comment#d08f72
markup.underline.link#89afef
keyword#857f8f
markup.fenced_code, markup.inline.raw
markup.list#857f8f
invalid#ef656a
keyword#c48702
keyword#6f80ff
invalid.deprecated#c48702
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#d08f72
comment#00b982
comment#d08f72
comment#6f80ff
comment#d0730f
comment#6f80ff
keyword#6f80ff
gitDecoration.addedResourceForeground#1fa526
gitDecoration.untrackedResourceForeground#1fa526
gitDecoration.ignoredResourceForeground#857f8f
gitDecoration.modifiedResourceForeground#c48702
breadcrumb.foreground, tree.tableColumnHeader.foreground#6f80ff
explorer.fileForeground#d0d0d0
explorer.directoryForeground#6f80ff
comment.documentation#696969
editorSuggestWidget.highlightForeground#6f80ff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#0dafdf
invalid#029fff
invalid#029fff
invalid#1fa526
invalid, invalid.deprecated#c48702
invalid#ef656a
invalid.deprecated#c48702
invalid#ef656a
invalid#ef656a
invalid.deprecated#c48702
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#6f80ff
variable#af85ff
entity.name.function#0dafdf
constant#379cf6
string#df805f
comment.documentation#857f8f
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ef656a
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ef656a
invalid.deprecated#c48702
entity.name.function#c48702
invalid.deprecated#c48702
string#df805f
invalid.deprecated#c48702
invalid#ef656a
invalid.deprecated#c48702
invalid#ef656a
variable#af85ff
variable#857f8f
comment#d08f72
comment#d08f72
comment.documentation#8a9fdf
entity.name.function#c48702
editor.findMatchBackground#d0d0d0
editor.findMatchHighlightBackground#d0d0d0
editor.findMatchBackground, editor.findMatchHighlightBackground#d0d0d0
string.regexp#379cf6
string.regexp#d369af
string.regexp#df805f
meta.preprocessor, keyword.control.import#7fafff
invalid.deprecated#c48702
invalid.deprecated#c48702
constant, constant.language, support.constant#379cf6
constant#379cf6
storage.type, support.type, entity.name.type#029fff
entity.name.type#029fff
variable#c57faf
variable, variable.other#af85ff
variable#af85ff
entity.name.function#8aa0df
entity.name.function, support.function#0dafdf
entity.name.function#0dafdf
support.function, support.class, support.type#5faaef
keyword, storage, keyword.control, storage.modifier#6f80ff
keyword#6f80ff
comment.documentation#c57faf
comment.documentation, comment.block.documentation#8a9fdf
comment.documentation#8a9fdf
string, string.quoted, string.template#df805f
string#df805f
comment, punctuation.definition.comment#d08f72
comment#d08f72
comment, punctuation.definition.comment#d08f72
comment#d08f72
invalid#d0d0d0
invalid#ef656a
invalid.illegal#ef656a
editor.wordHighlightStrongBackground#d0d0d0
invalid.deprecated#c48702
invalid.illegal#ef656a
editorCursor.foreground
editorGutter.background#d0d0d0
editorGroup.border#545f6f
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#857f8f
statusBar.background, statusBar.foreground#dedeff
editorLineNumber.activeForeground#6f80ff
editorLineNumber.activeForeground#6f80ff
editorLineNumber.foreground#857f8f
invalid.deprecated
editor.selectionHighlightBackground#d0d0d0
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#d0d0d0

Shiki preview

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

Loading...