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#000000
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#000000
  • editor.findMatchBackground#45605e
  • editor.foreground#ffffff
  • editor.selectionBackground#5a5a5a
  • editor.selectionForeground#ffffff
  • editorCursor.background#ffffff
  • editorCursor.foreground#ffffff
  • editorGroup.border#646464
  • editorGutter.background#1e1e1e
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#989898
  • inlineChatInput.background#000000
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#6ae4b9
  • input.background#000000
  • input.foreground#ffffff
  • input.placeholderForeground#6ae4b9
  • panel.background#000000
  • sideBar.background#000000
  • statusBar.background#505050
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#2d2d2d
  • statusBarItem.remoteBackground#505050
  • statusBarItem.remoteForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#989898
comment#d2b580
entity.name.tag#989898
entity.name.tag#6ae4b9
comment#989898
markup.underline.link#c6daff
keyword#989898
markup.fenced_code, markup.inline.raw
markup.list#989898
invalid#ff5f59
keyword#fec43f
keyword#b6a0ff
invalid.deprecated#fec43f
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#989898
comment#6ae4b9
comment#989898
comment#00bcff
comment#f78fe7
comment#00bcff
keyword#b6a0ff
gitDecoration.addedResourceForeground#6ae4b9
gitDecoration.untrackedResourceForeground#6ae4b9
gitDecoration.ignoredResourceForeground#989898
gitDecoration.modifiedResourceForeground#fec43f
breadcrumb.foreground, tree.tableColumnHeader.foreground#00bcff
explorer.fileForeground#ffffff
explorer.directoryForeground#00bcff
comment.documentation#696969
editorSuggestWidget.highlightForeground#00bcff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#feacd0
invalid#6ae4b9
invalid#6ae4b9
invalid#6ae4b9
invalid, invalid.deprecated#fec43f
invalid#ff5f59
invalid.deprecated#ffffff
invalid#ffffff
invalid#ffffff
invalid.deprecated#fec43f
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#b6a0ff
variable#00d3d0
entity.name.function#feacd0
constant#00bcff
string#79a8ff
comment.documentation#989898
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ff5f59
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ff5f59
invalid.deprecated#fec43f
entity.name.function#fec43f
invalid.deprecated#fec43f
string#79a8ff
invalid.deprecated#fec43f
invalid#ff5f59
invalid.deprecated#fec43f
invalid#ff5f59
variable#00d3d0
variable#989898
comment#989898
comment#989898
comment.documentation#9ac8e0
entity.name.function#dfaf7a
editor.findMatchBackground#ffffff
editor.findMatchHighlightBackground#ffffff
editor.findMatchBackground, editor.findMatchHighlightBackground#ffffff
string.regexp#00c06f
string.regexp#feacd0
string.regexp#79a8ff
meta.preprocessor, keyword.control.import#ff7f86
invalid.deprecated#fec43f
invalid.deprecated#fec43f
constant, constant.language, support.constant#00bcff
constant#00bcff
storage.type, support.type, entity.name.type#6ae4b9
entity.name.type#6ae4b9
variable#76afbf
variable, variable.other#00d3d0
variable#00d3d0
entity.name.function#d09dc0
entity.name.function, support.function#feacd0
entity.name.function#feacd0
support.function, support.class, support.type#f78fe7
keyword, storage, keyword.control, storage.modifier#b6a0ff
keyword#b6a0ff
comment.documentation#caa6df
comment.documentation, comment.block.documentation#9ac8e0
comment.documentation#9ac8e0
string, string.quoted, string.template#79a8ff
string#79a8ff
comment, punctuation.definition.comment#989898
comment#989898
comment, punctuation.definition.comment#989898
comment#989898
invalid#ffffff
invalid#ffffff
invalid.illegal#ffffff
editor.wordHighlightStrongBackground#ffffff
invalid.deprecated#fec43f
invalid.illegal#ff5f59
editorCursor.foreground
editorGutter.background#ffffff
editorGroup.border#646464
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#969696
statusBar.background, statusBar.foreground#ffffff
editorLineNumber.activeForeground#00bcff
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#989898
invalid.deprecated
editor.selectionHighlightBackground#ffffff
editor.selectionBackground, editor.selectionForeground#ffffff
editor.findMatchBackground#ffffff

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme