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#110f07
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#0f0e06
  • editor.findMatchBackground#265f4a
  • editor.foreground#cfbcba
  • editor.selectionBackground#3f1324
  • editorCursor.background#ffaa33
  • editorCursor.foreground#cfbcba
  • editorGroup.border#58514f
  • editorGutter.background#0f0e06
  • editorLineNumber.activeForeground#00b066
  • editorLineNumber.foreground#887c8a
  • inlineChatInput.background#100f06
  • inlineChatInput.foreground#cfbcba
  • inlineChatInput.placeholderForeground#3dbbb0
  • input.background#100f06
  • input.foreground#cfbcba
  • input.placeholderForeground#3dbbb0
  • panel.background#0f0e06
  • sideBar.background#110f07
  • statusBar.background#692a12
  • statusBar.foreground#feeeca
  • statusBar.noFolderBackground#36322f
  • statusBarItem.remoteBackground#692a12
  • statusBarItem.remoteForeground#feeeca

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#cf9f7f
comment#c590af
entity.name.tag#887c8a
entity.name.tag#2fa526
comment#cf9f7f
markup.underline.link#70a89f
keyword#887c8a
markup.fenced_code, markup.inline.raw
markup.list#887c8a
invalid#f06a3f
keyword#c48702
keyword#c48702
invalid.deprecated#c48702
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#cf9f7f
comment#3dbbb0
comment#cf9f7f
comment#00b066
comment#d0730f
comment#00b066
keyword#c48702
gitDecoration.addedResourceForeground#00b066
gitDecoration.untrackedResourceForeground#00b066
gitDecoration.ignoredResourceForeground#887c8a
gitDecoration.modifiedResourceForeground#c48702
breadcrumb.foreground, tree.tableColumnHeader.foreground#00b066
explorer.fileForeground#cfbcba
explorer.directoryForeground#00b066
comment.documentation#696969
editorSuggestWidget.highlightForeground#00b066
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#3dbbb0
invalid#2fa526
invalid#2fa526
invalid#00b066
invalid, invalid.deprecated#c48702
invalid#f06a3f
invalid.deprecated#c48702
invalid#f06a3f
invalid#f06a3f
invalid.deprecated#c48702
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#c48702
variable#6fafff
entity.name.function#3dbbb0
constant#64aa0f
string#f06a3f
comment.documentation#887c8a
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#f06a3f
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#f06a3f
invalid.deprecated#c48702
entity.name.function#c48702
invalid.deprecated#c48702
string#f06a3f
invalid.deprecated#c48702
invalid#f06a3f
invalid.deprecated#c48702
invalid#f06a3f
variable#6fafff
variable#887c8a
comment#cf9f7f
comment#cf9f7f
comment.documentation#5f9f6f
entity.name.function#c48702
editor.findMatchBackground#cfbcba
editor.findMatchHighlightBackground#cfbcba
editor.findMatchBackground, editor.findMatchHighlightBackground#cfbcba
string.regexp#af8aff
string.regexp#d570af
string.regexp#f06a3f
meta.preprocessor, keyword.control.import#d570af
invalid.deprecated#c48702
invalid.deprecated#c48702
constant, constant.language, support.constant#64aa0f
constant#64aa0f
storage.type, support.type, entity.name.type#2fa526
entity.name.type#2fa526
variable#82a0af
variable, variable.other#6fafff
variable#6fafff
entity.name.function#82a0af
entity.name.function, support.function#3dbbb0
entity.name.function#3dbbb0
support.function, support.class, support.type#ff7a7f
keyword, storage, keyword.control, storage.modifier#c48702
keyword#c48702
comment.documentation#c590af
comment.documentation, comment.block.documentation#5f9f6f
comment.documentation#5f9f6f
string, string.quoted, string.template#f06a3f
string#f06a3f
comment, punctuation.definition.comment#cf9f7f
comment#cf9f7f
comment, punctuation.definition.comment#cf9f7f
comment#cf9f7f
invalid#cfbcba
invalid#f06a3f
invalid.illegal#f06a3f
editor.wordHighlightStrongBackground#cfbcba
invalid.deprecated#c48702
invalid.illegal#f06a3f
editorCursor.foreground
editorGutter.background#cfbcba
editorGroup.border#58514f
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#887c8a
statusBar.background, statusBar.foreground#feeeca
editorLineNumber.activeForeground#00b066
editorLineNumber.activeForeground#00b066
editorLineNumber.foreground#887c8a
invalid.deprecated
editor.selectionHighlightBackground#cfbcba
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#cfbcba

Shiki preview

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

Loading...