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#242b33
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#21272e
  • editor.findMatchBackground#e74c3c
  • editor.foreground#f8f8f0
  • editor.selectionBackground#2e4a54
  • editorCursor.background#e74c3c
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#15171b
  • editorGutter.background#21272e
  • editorLineNumber.activeForeground#f8f8f0
  • editorLineNumber.foreground#495162
  • inlineChatInput.background#242a32
  • inlineChatInput.foreground#f8f8f0
  • inlineChatInput.placeholderForeground#e74c3c
  • input.background#242a32
  • input.foreground#f8f8f0
  • input.placeholderForeground#e74c3c
  • panel.background#21272e
  • sideBar.background#242b33
  • statusBar.background#161a1d
  • statusBar.foreground#f8f8f0
  • statusBar.noFolderBackground#181b1f
  • statusBarItem.remoteBackground#161a1d
  • statusBarItem.remoteForeground#f8f8f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#1abc9c
comment#606F73
markup.heading#e74c3c
entity.name.tag#737c8c
entity.name.tag#1abc9c
comment#606F73
markup.underline.link#f8f8f0
keyword#e74c3c
markup.fenced_code, markup.inline.raw
invalid#e74c3c
keyword#ECBE7B
keyword#53df83
invalid.deprecated#ECBE7B
invalid.deprecated
markup.inserted#9cd230
markup.inserted#7ca826
comment#C5A3FF
comment#1abc9c
comment#e74c3c
comment#53df83
comment#FFB8D1
keyword#56b6c2
gitDecoration.addedResourceForeground#53df83
gitDecoration.untrackedResourceForeground#9cd230
gitDecoration.ignoredResourceForeground#606F73
gitDecoration.renamedResourceForeground#606F73
gitDecoration.modifiedResourceForeground#ECBE7B
breadcrumb.foreground, tree.tableColumnHeader.foreground#e74c3c
explorer.fileForeground#f8f8f0
explorer.directoryForeground#606F73
comment.documentation#696969
editorSuggestWidget.highlightForeground#e74c3c
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#f8f8f0
invalid#FF0000
invalid#e74c3c
invalid#e74c3c
invalid#e74c3c
invalid#53df83
invalid, invalid.deprecated#ECBE7B
invalid#e74c3c
invalid.deprecated#ECBE7B
invalid#e74c3c
invalid#e74c3c
invalid.deprecated#ECBE7B
invalid#e74c3c
invalid.deprecated#ECBE7B
invalid#e74c3c
entity.name.type#1abc9c
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#606F73
diffEditor.insertedTextBackground#53df83
diffEditor.removedTextBackground#e74c3c
invalid#FF0000
entity.name.function#56b6c2
diff.insertedTextBackground#53df83
diff.removedTextBackground#e74c3c
meta.diff.header.file#56b5c2
meta.diff.header#56b6c2
invalid.deprecated#e74c3c
invalid.deprecated#ECBE7B
entity.name.function#f8f8f0
invalid.deprecated#ECBE7B
string#FFFFE0
invalid.deprecated#ECBE7B
invalid#e74c3c
invalid.deprecated#ECBE7B
invalid#e74c3c
variable#53df83
variable#FFB8D1
variable#737c8c
comment#737c8c
comment#f8f8f0
comment.documentation#53df83
editor.findMatchBackground#53df83
editor.findMatchHighlightBackground#606F73
editor.findMatchBackground, editor.findMatchHighlightBackground#606F73
string.regexp#e74c3c
string.regexp#e74c3c
string.regexp#53df83
meta.preprocessor, keyword.control.import#e74c3c
invalid.deprecated#ECBE7B
invalid.deprecated#ECBE7B
constant, constant.language, support.constant#1abc9c
constant#1abc9c
storage.type, support.type, entity.name.type#e74c3c
entity.name.type#e74c3c
variable#f8f8f0
variable, variable.other#f8f8f0
variable#f8f8f0
entity.name.function#e74c3c
entity.name.function, support.function#e74c3c
entity.name.function#e74c3c
support.function, support.class, support.type#1abc9c
keyword, storage, keyword.control, storage.modifier#1abc9c
keyword#1abc9c
comment.documentation#1abc9c
comment.documentation, comment.block.documentation#606F73
comment.documentation#606F73
string, string.quoted, string.template#53df83
string#53df83
comment, punctuation.definition.comment#606F73
comment#606F73
comment, punctuation.definition.comment#606F73
comment#606F73
invalid#10151a
invalid
invalid.illegal#10151a
editor.wordHighlightStrongBackground#e74c3c
invalid.deprecated#ECBE7B
invalid.illegal#e74c3c
editorCursor.foreground
editorGutter.background#282C34
editorGroup.border#15171b
editorGroupHeader.tabsBackground#f8f8f0
statusBar.noFolderBackground#495162
statusBar.background, statusBar.foreground#f8f8f0
editorLineNumber.activeForeground
editorLineNumber.activeForeground#f8f8f0
editorLineNumber.foreground#495162
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#10151a

Shiki preview

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

Loading...