Skip to main content
CodingTheme

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.activeBorder#457dff
  • activityBar.background#0b0b0f
  • activityBar.foreground#a7aec5
  • activityBarBadge.background#457dff
  • activityBarBadge.foreground#f8fafd
  • badge.background#0b0b0f
  • button.background#0b0b0f
  • debugToolBar.background#0b0b0f
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#0b0b0f
  • dropdown.border#0b0b0f
  • editor.background#12141b
  • editor.findMatchBackground#12141b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#528bff3d
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#101218
  • editor.selectionBackground#4d566960
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#0b0b0f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#457dff
  • editorError.foreground#ee635b
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#12141b
  • editorHoverWidget.background#232634
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#abb2bf26
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#12141b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#12141b
  • focusBorder#457dff
  • input.background#1d1f23
  • list.activeSelectionBackground#457dff
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#001233
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#ffffff0a
  • list.inactiveSelectionBackground#232831
  • list.inactiveSelectionForeground#d7dae0
  • menu.foreground#c8c8c8
  • panel.border#181a1f
  • panelTitle.activeBorder#457dff
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#0b0b0f
  • sideBar.border#0b0b0f
  • sideBarSectionHeader.background#0b0b0f
  • statusBar.background#0b0b0f
  • statusBar.debuggingBackground#457dff
  • statusBar.debuggingBorder#6e97dd
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#1b1d23
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#6797e9
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#0b0b0f
  • tab.activeBorder#457dff
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#12141b
  • tab.inactiveBackground#12141b
  • tab.unfocusedHoverBackground#12141b
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f05757
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#c8c8c8
  • textLink.foreground#61afef
  • titleBar.activeBackground#0b0b0f
  • titleBar.activeForeground#9da5b4
  • titleBar.border#181a1f
  • titleBar.inactiveBackground#232634
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type, entity.other.inherited-class, keyword.other.type, punctuation.definition.annotation, storage.modifier.import, storage.modifier.package, storage.type.annotation, storage.type.built-in, storage.type.generic, storage.type.java, storage.type.groovy, storage.type.primitive, support.class, support.other.namespace, support.type, variable.language.this#DDE49E
constant.other.character-class, entity.name.tag, heading, meta.object-literal.key, punctuation.definition.list.begin.markdown, punctuation.definition.list.end.markdown, punctuation.definition.template-expression, punctuation.section.embedded, support.type.property-name, variable.object.property, variable.other.enummember#CE7A79
constant.character.escape, keyword.operator, markup.underline.link, string.regexp, string.url#76c8d3
entity.name.function, entity.other.attribute-name.id.css, string.other.link, support.function, variable.language.super#83B0FF
punctuation.separator, support.type.property-name.css#99A0B8
markup.inline, markup.quote, source.ini, string.other.link.description, string#88D687
comment#5C6370
keyword.operator.new, keyword, markup.italic, storage.modifier, storage.type#CCA5F7
constant, entity.other.attribute-name, keyword.operator.quantifier.regexp, markup.bold, support.constant, variable.other.constant, variable.parameter#E8B28D
markup.quote, markup.italicitalic
heading, markup.boldbold
comment, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.thisitalic
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive
token.info-token#75a4f5
token.warn-token#e5c07b
token.error-token#f05050
token.debug-token#c07ef0

Shiki preview

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

Loading...

Space Invader by Sam Ogorman - VS Code Theme