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#1f2122
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#1c1e1f
  • editor.findMatchBackground#fd971f
  • editor.foreground#d6d6d4
  • editor.selectionBackground#4e4e4e
  • editorCursor.background#fb2874
  • editorCursor.foreground#d6d6d4
  • editorGroup.border#323435
  • editorGutter.background#1c1e1f
  • editorLineNumber.activeForeground#cfc0c5
  • editorLineNumber.foreground#555556
  • inlineChatInput.background#1e2021
  • inlineChatInput.foreground#d6d6d4
  • inlineChatInput.placeholderForeground#fd971f
  • input.background#1e2021
  • input.foreground#d6d6d4
  • input.placeholderForeground#fd971f
  • panel.background#1c1e1f
  • sideBar.background#1f2122
  • statusBar.background#2d2e2e
  • statusBar.foreground#d6d6d4
  • statusBar.noFolderBackground#171819
  • statusBarItem.remoteBackground#2d2e2e
  • statusBarItem.remoteForeground#d6d6d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#fb2874
comment#555556
markup.heading#fd971f
entity.name.tag#9c91e4
entity.name.tag#fb2874
comment#555556
markup.underline.link#fb2874
keyword#66d9ef
markup.fenced_code, markup.inline.raw
markup.list#fb2874
invalid#e74c3c
keyword#e2c770
keyword#e2c770
invalid.deprecated#e2c770
invalid.deprecated
markup.inserted#9ac334
markup.inserted#7b9c29
comment#9c91e4
comment#fb2874
comment#fd971f
comment#b6e63e
comment#fb2874
keyword#66d9ef
gitDecoration.addedResourceForeground#9ac334
gitDecoration.untrackedResourceForeground#7f7f80
gitDecoration.ignoredResourceForeground#555556
gitDecoration.renamedResourceForeground#7f7f80
gitDecoration.modifiedResourceForeground#9c91e4
breadcrumb.foreground, tree.tableColumnHeader.foreground#e2c770
explorer.fileForeground#d6d6d4
explorer.directoryForeground#d6d6d4
comment.documentation#696969
editorSuggestWidget.highlightForeground#fd971f
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#d6d6d4
invalid#FF0000
invalid#b6e63e
invalid#66d9ef
invalid#66d9ef
invalid#b6e63e
invalid, invalid.deprecated#e2c770
invalid#e74c3c
invalid.deprecated#e2c770
invalid#e74c3c
invalid.deprecated
invalid
invalid#e74c3c
invalid.deprecated#e2c770
invalid#e74c3c
invalid.deprecated#e2c770
invalid#e74c3c
entity.name.type#fb2874
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#555556
diffEditor.insertedTextBackground#b6e63e
diffEditor.removedTextBackground#e74c3c
invalid#FF0000
entity.name.function#66d9ef
diff.insertedTextBackground#b6e63e
diff.removedTextBackground#e74c3c
meta.diff.header.file#268bd2
meta.diff.header#66d9ef
invalid.deprecated#e74c3c
invalid.deprecated#e2c770
entity.name.function#fd971f
invalid.deprecated#e2c770
string#FFFFE0
invalid.deprecated#e2c770
invalid#e74c3c
invalid.deprecated#e2c770
invalid#e74c3c
variable#b6e63e
variable#fb2874
variable#525254
comment#525254
comment#d6d6d4
comment.documentation#b6e63e
editor.findMatchBackground#b6e63e
editor.findMatchHighlightBackground#1B2229
editor.findMatchBackground, editor.findMatchHighlightBackground#1B2229
string.regexp#9c91e4
string.regexp#9c91e4
string.regexp#e2c770
meta.preprocessor, keyword.control.import#9c91e4
invalid.deprecated#e2c770
invalid.deprecated#e2c770
constant, constant.language, support.constant#fd971f
constant#fd971f
storage.type, support.type, entity.name.type#66d9ef
entity.name.type#66d9ef
variable#fd971f
variable, variable.other#fd971f
variable#fd971f
entity.name.function#b6e63e
entity.name.function, support.function#b6e63e
entity.name.function#b6e63e
support.function, support.class, support.type#fd971f
keyword, storage, keyword.control, storage.modifier#fb2874
keyword#fb2874
comment.documentation#fd971f
comment.documentation, comment.block.documentation#7f7f80
comment.documentation#7f7f80
string, string.quoted, string.template#e2c770
string#e2c770
comment, punctuation.definition.comment#555556
comment#555556
comment, punctuation.definition.comment#555556
comment#555556
invalid#1B2229
invalid
invalid.illegal#1B2229
editor.wordHighlightStrongBackground#e74c3c
invalid.deprecated#e2c770
invalid.illegal#e74c3c
editorCursor.foreground
editorGutter.background#4e4e4e
editorGroup.border#323435
editorGroupHeader.tabsBackground#d6d6d4
statusBar.noFolderBackground#4e4e4e
statusBar.background, statusBar.foreground#d6d6d4
editorLineNumber.activeForeground
editorLineNumber.activeForeground#cfc0c5
editorLineNumber.foreground#555556
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1B2229

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme