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#d5d5d5
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#EDEDED
  • editor.findMatchBackground#4A90D9
  • editor.foreground#2E3436
  • editor.selectionBackground#C2D5E9
  • editorCursor.background#00BBFF
  • editorCursor.foreground#2E3436
  • editorGutter.background#EDEDED
  • editorLineNumber.activeForeground#7F7F7F
  • editorLineNumber.foreground#7F7F7F
  • inlineChatInput.background#d1d1d1
  • inlineChatInput.foreground#202426
  • inlineChatInput.placeholderForeground#0084C8
  • input.background#d1d1d1
  • input.foreground#202426
  • input.placeholderForeground#0084C8
  • panel.background#EDEDED
  • sideBar.background#d5d5d5
  • statusBar.background#FFFFFF
  • statusBar.foreground#2E3436
  • statusBar.noFolderBackground#FFFFFF
  • statusBarItem.remoteBackground#FFFFFF
  • statusBarItem.remoteForeground#2E3436

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#A52A2A
comment#999999
markup.heading#00578E
entity.name.tag#7F7F7F
entity.name.tag#2F8B58
comment#204A87
markup.underline.link#4E9A06
keyword#2F8B58
markup.list#7F7F7F
invalid#ADD8E6
keyword#F5666D
keyword#4E9A06
invalid.deprecated#CE5C00
invalid.deprecated
markup.inserted#22aa22
markup.inserted#22aa22
comment#4E9A06
comment#A52A2A
comment#4A708B
comment#6E8B3D
comment#4A708B
keyword#4E9A06
gitDecoration.addedResourceForeground#2F8B58
gitDecoration.untrackedResourceForeground#4E9A06
gitDecoration.ignoredResourceForeground#204A87
gitDecoration.renamedResourceForeground#4E9A06
gitDecoration.modifiedResourceForeground#0084C8
breadcrumb.foreground, tree.tableColumnHeader.foreground#F5666D
explorer.fileForeground#2E3436
explorer.directoryForeground#00578E
comment.documentation#696969
editorSuggestWidget.highlightForeground#8B0000
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#000000
invalid#FF0000
invalid#00578E
invalid#2F8B58
invalid#2F8B58
invalid#4E9A06
invalid, invalid.deprecated#CE5C00
invalid#B50000
invalid.deprecated#CE5C00
invalid#B50000
invalid#88090B
invalid.deprecated#F5666D
invalid#B50000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#A52A2A
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#204A87
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground#4E9A06
diff.removedTextBackground#F5666D
meta.diff.header.file
meta.diff.header
invalid.deprecated#B50000
invalid.deprecated#CE5C00
entity.name.function#0084C8
invalid.deprecated#F5666D
string#00008B
invalid.deprecated#CE5C00
invalid#B50000
invalid.deprecated#CE5C00
invalid#B50000
variable#0000FF
variable#0000FF
comment#00008B
comment
comment.documentation#006400
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#FFFFFF
string.regexp#4E9A06
meta.preprocessor, keyword.control.import#A020F0
invalid.deprecated#F5666D
invalid.deprecated#F5666D
constant, constant.language, support.constant#F5666D
constant#F5666D
storage.type, support.type, entity.name.type#2F8B58
entity.name.type#2F8B58
variable#0084C8
variable, variable.other#0084C8
variable#0084C8
entity.name.function#00578E
entity.name.function, support.function#00578E
entity.name.function#00578E
support.function, support.class, support.type#A020F0
keyword, storage, keyword.control, storage.modifier#A52A2A
keyword#A52A2A
comment.documentation#F5666D
comment.documentation, comment.block.documentation#4E9A06
comment.documentation#4E9A06
string, string.quoted, string.template#4E9A06
string#4E9A06
comment, punctuation.definition.comment#204A87
comment#204A87
comment, punctuation.definition.comment#204A87
comment#204A87
invalid#FFFFFF
invalid
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#CE5C00
invalid.illegal#B50000
editorCursor.foreground
editorGutter.background
editorGroupHeader.tabsBackground#CCCCCC
statusBar.noFolderBackground#C6C6C6
statusBar.background, statusBar.foreground#2E3436
editorLineNumber.activeForeground
editorLineNumber.activeForeground#7F7F7F
editorLineNumber.foreground#7F7F7F
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#FFFFFF

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme