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#323d4a
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#2d3743
  • editor.findMatchBackground#338f86
  • editor.foreground#e1e1e0
  • editor.selectionBackground#2d4948
  • editor.selectionForeground#e1e1e0
  • editorCursor.background#415160
  • editorCursor.foreground#e1e1e0
  • editorGutter.background#2d3743
  • editorLineNumber.activeForeground#B3B3B3
  • editorLineNumber.foreground#B3B3B3
  • inlineChatInput.background#313b48
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#729fcf
  • input.background#313b48
  • input.foreground#ffffff
  • input.placeholderForeground#729fcf
  • panel.background#2d3743
  • sideBar.background#323d4a
  • statusBar.background#212931
  • statusBar.foreground#eeeeec
  • statusBar.noFolderBackground#878787
  • statusBarItem.remoteBackground#212931
  • statusBarItem.remoteForeground#eeeeec

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ffad29
comment#666666
markup.heading#00ede1
entity.name.tag#B3B3B3
entity.name.tag#34cae2
comment#74af68
markup.underline.link#e67128
keyword#34cae2
markup.list#B3B3B3
invalid#ADD8E6
keyword#ff4242
keyword#e67128
invalid.deprecated#FF8C00
invalid.deprecated
markup.inserted#cceecc
markup.inserted#ddffdd
comment#e67128
comment#ffad29
comment#B0E2FF
comment#B4EEB4
comment#B0E2FF
keyword#e67128
gitDecoration.addedResourceForeground#34cae2
gitDecoration.untrackedResourceForeground#e67128
gitDecoration.ignoredResourceForeground#74af68
gitDecoration.renamedResourceForeground#e67128
gitDecoration.modifiedResourceForeground#dbdb95
breadcrumb.foreground, tree.tableColumnHeader.foreground#008b8b
explorer.fileForeground#e1e1e0
explorer.directoryForeground#00ede1
comment.documentation#696969
editorSuggestWidget.highlightForeground#AFEEEE
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#00ede1
invalid#34cae2
invalid#34cae2
invalid#00FF00
invalid, invalid.deprecated#FF8C00
invalid#FFC0CB
invalid.deprecated#FF8C00
invalid#FFC0CB
invalid#88090B
invalid.deprecated#ff4242
invalid#FFC0CB
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#ffad29
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#74af68
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file
meta.diff.header
invalid.deprecated#FFC0CB
invalid.deprecated#FF8C00
entity.name.function#dbdb95
invalid.deprecated#ff4242
string#FFFFE0
invalid.deprecated#FF8C00
invalid#FFC0CB
invalid.deprecated#FF8C00
invalid#FFC0CB
variable#ADD8E6
variable#ADD8E6
comment#CCCCCC
comment
comment.documentation#32CD32
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#000000
string.regexp#e67128
meta.preprocessor, keyword.control.import#23d7d7
invalid.deprecated#ff4242
invalid.deprecated#ff4242
constant, constant.language, support.constant#008b8b
constant#008b8b
storage.type, support.type, entity.name.type#34cae2
entity.name.type#34cae2
variable#dbdb95
variable, variable.other#dbdb95
variable#dbdb95
entity.name.function#00ede1
entity.name.function, support.function#00ede1
entity.name.function#00ede1
support.function, support.class, support.type#23d7d7
keyword, storage, keyword.control, storage.modifier#ffad29
keyword#ffad29
comment.documentation#008b8b
comment.documentation, comment.block.documentation#e67128
comment.documentation#e67128
string, string.quoted, string.template#e67128
string#e67128
comment, punctuation.definition.comment#74af68
comment#74af68
comment, punctuation.definition.comment#74af68
comment#74af68
invalid#e1e1e0
invalid#e1e1e0
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#FF8C00
invalid.illegal#FFC0CB
editorCursor.foreground
editorGutter.background
editorGroupHeader.tabsBackground#333333
statusBar.noFolderBackground#eeeeec
statusBar.background, statusBar.foreground#eeeeec
editorLineNumber.activeForeground
editorLineNumber.activeForeground#B3B3B3
editorLineNumber.foreground#B3B3B3
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground#e1e1e0
editor.findMatchBackground#e1e1e0

Shiki preview

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

Loading...