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#e6e6e6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#ffffff
  • editor.findMatchBackground#aaeccf
  • editor.foreground#202020
  • editor.selectionBackground#bfefff
  • editorCursor.background#0033cc
  • editorCursor.foreground#202020
  • editorGroup.border#bfc4da
  • editorGutter.background#ffffff
  • editorLineNumber.activeForeground#4250ef
  • editorLineNumber.foreground#68759f
  • inlineChatInput.background#e0e0e0
  • inlineChatInput.foreground#202020
  • inlineChatInput.placeholderForeground#008858
  • input.background#e0e0e0
  • input.foreground#202020
  • input.placeholderForeground#008858
  • panel.background#ffffff
  • sideBar.background#e6e6e6
  • statusBar.background#b7c7ff
  • statusBar.foreground#151515
  • statusBar.noFolderBackground#dbdbdb
  • statusBarItem.remoteBackground#b7c7ff
  • statusBarItem.remoteForeground#151515

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a65f6a
comment#af5a80
entity.name.tag#68759f
entity.name.tag#008858
comment#a65f6a
markup.underline.link#397a70
keyword#68759f
markup.fenced_code, markup.inline.raw
markup.list#68759f
invalid#e00033
keyword#b6532f
keyword#6052cf
invalid.deprecated#b6532f
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#a65f6a
comment#008858
comment#a65f6a
comment#4250ef
comment#cf25aa
comment#4250ef
keyword#6052cf
gitDecoration.addedResourceForeground#217a3c
gitDecoration.untrackedResourceForeground#217a3c
gitDecoration.ignoredResourceForeground#68759f
gitDecoration.modifiedResourceForeground#b6532f
breadcrumb.foreground, tree.tableColumnHeader.foreground#4250ef
explorer.fileForeground#202020
explorer.directoryForeground#4250ef
comment.documentation#696969
editorSuggestWidget.highlightForeground#4250ef
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#cf25aa
invalid#008858
invalid#008858
invalid#217a3c
invalid, invalid.deprecated#b6532f
invalid#e00033
invalid.deprecated#b6532f
invalid#e00033
invalid#e00033
invalid.deprecated#b6532f
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#6052cf
variable#1f77bb
entity.name.function#cf25aa
constant#065fff
string#4250ef
comment.documentation#68759f
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#e00033
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#e00033
invalid.deprecated#b6532f
entity.name.function#b6532f
invalid.deprecated#b6532f
string#4250ef
invalid.deprecated#b6532f
invalid#e00033
invalid.deprecated#b6532f
invalid#e00033
variable#1f77bb
variable#68759f
comment#a65f6a
comment#a65f6a
comment.documentation#506fa0
entity.name.function#b6532f
editor.findMatchBackground#202020
editor.findMatchHighlightBackground#202020
editor.findMatchBackground, editor.findMatchHighlightBackground#202020
string.regexp#ba35af
string.regexp#ba35af
string.regexp#4250ef
meta.preprocessor, keyword.control.import#d3303a
invalid.deprecated#b6532f
invalid.deprecated#b6532f
constant, constant.language, support.constant#065fff
constant#065fff
storage.type, support.type, entity.name.type#008858
entity.name.type#008858
variable#506fa0
variable, variable.other#1f77bb
variable#1f77bb
entity.name.function#af5a80
entity.name.function, support.function#cf25aa
entity.name.function#cf25aa
support.function, support.class, support.type#ba35af
keyword, storage, keyword.control, storage.modifier#6052cf
keyword#6052cf
comment.documentation#af5a80
comment.documentation, comment.block.documentation#506fa0
comment.documentation#506fa0
string, string.quoted, string.template#4250ef
string#4250ef
comment, punctuation.definition.comment#a65f6a
comment#a65f6a
comment, punctuation.definition.comment#a65f6a
comment#a65f6a
invalid#202020
invalid#e00033
invalid.illegal#e00033
editor.wordHighlightStrongBackground#202020
invalid.deprecated#b6532f
invalid.illegal#e00033
editorCursor.foreground
editorGutter.background#202020
editorGroup.border#bfc4da
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#68759f
statusBar.background, statusBar.foreground#151515
editorLineNumber.activeForeground#4250ef
editorLineNumber.activeForeground#4250ef
editorLineNumber.foreground#68759f
invalid.deprecated
editor.selectionHighlightBackground#202020
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#202020

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme