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#dddde6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#f5f5ff
  • editor.findMatchBackground#eebb20
  • editor.foreground#1a1a2f
  • editor.selectionBackground#dadadf
  • editorCursor.background#0000bb
  • editorCursor.foreground#1a1a2f
  • editorGroup.border#bcbcd0
  • editorGutter.background#f5f5ff
  • editorLineNumber.activeForeground#065fff
  • editorLineNumber.foreground#70627f
  • inlineChatInput.background#d8d8e0
  • inlineChatInput.foreground#1a1a2f
  • inlineChatInput.placeholderForeground#375cd8
  • input.background#d8d8e0
  • input.foreground#1a1a2f
  • input.placeholderForeground#375cd8
  • panel.background#f5f5ff
  • sideBar.background#dddde6
  • statusBar.background#99c7ff
  • statusBar.foreground#0a0a1f
  • statusBar.noFolderBackground#d3d3e0
  • statusBarItem.remoteBackground#99c7ff
  • statusBarItem.remoteForeground#0a0a1f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#77604a
comment#506fa0
entity.name.tag#70627f
entity.name.tag#805d00
comment#77604a
markup.underline.link#196f70
keyword#70627f
markup.fenced_code, markup.inline.raw
markup.list#70627f
invalid#965000
keyword#765040
keyword#4250ef
invalid.deprecated#765040
invalid.deprecated
markup.inserted#333399
markup.inserted#333399
comment#77604a
comment#1f6fbf
comment#77604a
comment#065fff
comment#965000
comment#065fff
keyword#4250ef
gitDecoration.addedResourceForeground#065fff
gitDecoration.untrackedResourceForeground#065fff
gitDecoration.ignoredResourceForeground#70627f
gitDecoration.modifiedResourceForeground#765040
breadcrumb.foreground, tree.tableColumnHeader.foreground#065fff
explorer.fileForeground#1a1a2f
explorer.directoryForeground#065fff
comment.documentation#696969
editorSuggestWidget.highlightForeground#065fff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#065fff
invalid#805d00
invalid#805d00
invalid#065fff
invalid, invalid.deprecated#765040
invalid#965000
invalid.deprecated#765040
invalid#965000
invalid#965000
invalid.deprecated#765040
invalid#603a00
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#4250ef
variable#1477b2
entity.name.function#065fff
constant#765040
string#965000
comment.documentation#70627f
diffEditor.insertedTextBackground#333399
diffEditor.removedTextBackground#553d00
invalid#965000
entity.name.function
diff.insertedTextBackground#333399
diff.removedTextBackground#553d00
invalid.deprecated#965000
invalid.deprecated#765040
entity.name.function#765040
invalid.deprecated#765040
string#965000
invalid.deprecated#765040
invalid#965000
invalid.deprecated#765040
invalid#965000
variable#1477b2
variable#70627f
comment#77604a
comment#77604a
comment.documentation#506fa0
entity.name.function#765040
editor.findMatchBackground#1a1a2f
editor.findMatchHighlightBackground#1a1a2f
editor.findMatchBackground, editor.findMatchHighlightBackground#1a1a2f
string.regexp#4250ef
string.regexp#065fff
string.regexp#965000
meta.preprocessor, keyword.control.import#6052cf
invalid.deprecated#765040
invalid.deprecated#765040
constant, constant.language, support.constant#765040
constant#765040
storage.type, support.type, entity.name.type#805d00
entity.name.type#805d00
variable#506fa0
variable, variable.other#1477b2
variable#1477b2
entity.name.function#6060d0
entity.name.function, support.function#065fff
entity.name.function#065fff
support.function, support.class, support.type#1f6fbf
keyword, storage, keyword.control, storage.modifier#4250ef
keyword#4250ef
comment.documentation#9f5080
comment.documentation, comment.block.documentation#506fa0
comment.documentation#506fa0
string, string.quoted, string.template#965000
string#965000
comment, punctuation.definition.comment#77604a
comment#77604a
comment, punctuation.definition.comment#77604a
comment#77604a
invalid#1a1a2f
invalid#965000
invalid.illegal#965000
editor.wordHighlightStrongBackground#1a1a2f
invalid.deprecated#765040
invalid.illegal#965000
editorCursor.foreground
editorGutter.background#1a1a2f
editorGroup.border#bcbcd0
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#70627f
statusBar.background, statusBar.foreground#0a0a1f
editorLineNumber.activeForeground#065fff
editorLineNumber.activeForeground#065fff
editorLineNumber.foreground#70627f
invalid.deprecated
editor.selectionHighlightBackground#1a1a2f
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1a1a2f

Shiki preview

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

Loading...