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#000000
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#000000
  • editor.findMatchBackground#1A1A1A
  • editor.foreground#F5F5F5
  • editor.selectionBackground#0000CD
  • editorCursor.background#DA70D6
  • editorCursor.foreground#F5F5F5
  • editorGutter.background#000000
  • editorLineNumber.activeForeground#B3B3B3
  • editorLineNumber.foreground#B3B3B3
  • inlineChatInput.background#000000
  • inlineChatInput.foreground#F5F5F5
  • inlineChatInput.placeholderForeground#00FFFF
  • input.background#000000
  • input.foreground#F5F5F5
  • input.placeholderForeground#00FFFF
  • panel.background#000000
  • sideBar.background#000000
  • statusBar.background#BFBFBF
  • statusBar.foreground#0000FF
  • statusBar.noFolderBackground#4D4D4D
  • statusBarItem.remoteBackground#BFBFBF
  • statusBarItem.remoteForeground#0000FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#00FFFF
comment#666666
markup.heading#00FA9A
entity.name.tag#B3B3B3
entity.name.tag#63B8FF
comment#FF7F24
markup.underline.link#FFC1C1
keyword#63B8FF
markup.list#B3B3B3
invalid#ADD8E6
keyword#FFC0CB
keyword#FFC1C1
invalid.deprecated#FF8C00
invalid.deprecated
markup.inserted#cceecc
markup.inserted#ddffdd
comment#FFC1C1
comment#00FFFF
comment#B0E2FF
comment#B4EEB4
comment#B0E2FF
keyword#FFC1C1
gitDecoration.addedResourceForeground#63B8FF
gitDecoration.untrackedResourceForeground#FFC1C1
gitDecoration.ignoredResourceForeground#FF7F24
gitDecoration.renamedResourceForeground#F08080
gitDecoration.modifiedResourceForeground#7FFFD4
breadcrumb.foreground, tree.tableColumnHeader.foreground#8470FF
explorer.fileForeground#F5F5F5
explorer.directoryForeground#00FA9A
comment.documentation#696969
editorSuggestWidget.highlightForeground#AFEEEE
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#00FA9A
invalid#63B8FF
invalid#63B8FF
invalid#FF0000
invalid#00FF00
invalid, invalid.deprecated#FF8C00
invalid#FFC0CB
invalid.deprecated#FF8C00
invalid#FFC0CB
invalid#88090B
invalid.deprecated#FFC0CB
invalid#FFC0CB
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#00FFFF
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#FF7F24
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground#00FF00
diff.removedTextBackground#FF8C69
meta.diff.header.file#FFFFF0
meta.diff.header
invalid.deprecated#FFC0CB
invalid.deprecated#FF8C00
entity.name.function#7FFFD4
invalid.deprecated#FFC0CB
string#FFFFE0
invalid.deprecated#FFA500
invalid#FF4040
invalid.deprecated#FF8C00
invalid#FFC0CB
variable#ADD8E6
variable#ADD8E6
comment#CCCCCC
comment
comment.documentation#32CD32
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#8B2323
string.regexp#FFC1C1
meta.preprocessor, keyword.control.import#6495ED
invalid.deprecated#FFC0CB
invalid.deprecated#FFC0CB
constant, constant.language, support.constant#8470FF
constant#8470FF
storage.type, support.type, entity.name.type#63B8FF
entity.name.type#63B8FF
variable#7FFFD4
variable, variable.other#7FFFD4
variable#7FFFD4
entity.name.function#00FA9A
entity.name.function, support.function#00FA9A
entity.name.function#00FA9A
support.function, support.class, support.type#B0C4DE
keyword, storage, keyword.control, storage.modifier#00FFFF
keyword#00FFFF
comment.documentation#8470FF
comment.documentation, comment.block.documentation#F08080
comment.documentation#F08080
string, string.quoted, string.template#FFC1C1
string#FFC1C1
comment, punctuation.definition.comment#FA8072
comment#FA8072
comment, punctuation.definition.comment#FF7F24
comment#FF7F24
invalid#FDF5E6
invalid
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#FF8C00
invalid.illegal#FFC0CB
editorCursor.foreground
editorGutter.background#F5DEB3
editorGroup.border
editorGroupHeader.tabsBackground#E6E6E6
statusBar.noFolderBackground#CCCCCC
statusBar.background, statusBar.foreground#0000FF
editorLineNumber.activeForeground
editorLineNumber.activeForeground#B3B3B3
editorLineNumber.foreground#B3B3B3
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#FDF5E6

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme