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#e6dede
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fff7f7
  • editor.findMatchBackground#c0d0ff
  • editor.foreground#201f36
  • editor.selectionBackground#dfe4f4
  • editorCursor.background#d06f30
  • editorCursor.foreground#201f36
  • editorGroup.border#bab7bc
  • editorGutter.background#fff7f7
  • editorLineNumber.activeForeground#3c3bbe
  • editorLineNumber.foreground#776f79
  • inlineChatInput.background#e0d9d9
  • inlineChatInput.foreground#201f36
  • inlineChatInput.placeholderForeground#4250ef
  • input.background#e0d9d9
  • input.foreground#201f36
  • input.placeholderForeground#4250ef
  • panel.background#fff7f7
  • sideBar.background#e6dede
  • statusBar.background#e0bfba
  • statusBar.foreground#151515
  • statusBar.noFolderBackground#e0dbdb
  • statusBarItem.remoteBackground#e0bfba
  • statusBarItem.remoteForeground#151515

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#506fa0
comment#a04646
entity.name.tag#776f79
entity.name.tag#b00234
comment#506fa0
markup.underline.link#af4988
keyword#776f79
markup.fenced_code, markup.inline.raw
markup.list#776f79
invalid#e00033
keyword#b6530f
keyword#3c3bbe
invalid.deprecated#b6530f
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#506fa0
comment#1077ab
comment#506fa0
comment#3c3bbe
comment#b00234
comment#3c3bbe
keyword#3c3bbe
gitDecoration.addedResourceForeground#217a3c
gitDecoration.untrackedResourceForeground#217a3c
gitDecoration.ignoredResourceForeground#776f79
gitDecoration.modifiedResourceForeground#b6530f
breadcrumb.foreground, tree.tableColumnHeader.foreground#3c3bbe
explorer.fileForeground#201f36
explorer.directoryForeground#3c3bbe
comment.documentation#696969
editorSuggestWidget.highlightForeground#3c3bbe
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#9f248a
invalid#b00234
invalid#b00234
invalid#217a3c
invalid, invalid.deprecated#b6530f
invalid#e00033
invalid.deprecated#b6530f
invalid#e00033
invalid#e00033
invalid.deprecated#b6530f
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#3c3bbe
variable#4250ef
entity.name.function#9f248a
constant#7022bf
string#a04646
comment.documentation#776f79
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#e00033
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#e00033
invalid.deprecated#b6530f
entity.name.function#b6530f
invalid.deprecated#b6530f
string#a04646
invalid.deprecated#b6530f
invalid#e00033
invalid.deprecated#b6530f
invalid#e00033
variable#4250ef
variable#776f79
comment#506fa0
comment#506fa0
comment.documentation#954f90
entity.name.function#b6530f
editor.findMatchBackground#201f36
editor.findMatchHighlightBackground#201f36
editor.findMatchBackground, editor.findMatchHighlightBackground#201f36
string.regexp#d5305f
string.regexp#a01f64
string.regexp#a04646
meta.preprocessor, keyword.control.import#3f6faf
invalid.deprecated#b6530f
invalid.deprecated#b6530f
constant, constant.language, support.constant#7022bf
constant#7022bf
storage.type, support.type, entity.name.type#b00234
entity.name.type#b00234
variable#6060d0
variable, variable.other#4250ef
variable#4250ef
entity.name.function#954f90
entity.name.function, support.function#9f248a
entity.name.function#9f248a
support.function, support.class, support.type#a01f64
keyword, storage, keyword.control, storage.modifier#3c3bbe
keyword#3c3bbe
comment.documentation#954f90
comment.documentation, comment.block.documentation#954f90
comment.documentation#954f90
string, string.quoted, string.template#a04646
string#a04646
comment, punctuation.definition.comment#506fa0
comment#506fa0
comment, punctuation.definition.comment#506fa0
comment#506fa0
invalid#201f36
invalid#e00033
invalid.illegal#e00033
editor.wordHighlightStrongBackground#201f36
invalid.deprecated#b6530f
invalid.illegal#e00033
editorCursor.foreground
editorGutter.background#201f36
editorGroup.border#bab7bc
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#776f79
statusBar.background, statusBar.foreground#151515
editorLineNumber.activeForeground#3c3bbe
editorLineNumber.activeForeground#3c3bbe
editorLineNumber.foreground#776f79
invalid.deprecated
editor.selectionHighlightBackground#201f36
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#201f36

Shiki preview

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

Loading...