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#f1f1f1
  • activityBar.foreground#454857
  • activityBarBadge.background#457dff
  • activityBarBadge.foreground#f8fafd
  • badge.background#d1d8e0
  • button.background#457dff
  • debugToolBar.background#d1d8e0
  • diffEditor.insertedTextBackground#a7aec5
  • dropdown.background#d1d8e0
  • dropdown.border#d1d8e0
  • dropdown.foreground#454857
  • editor.background#ffffff
  • editor.findMatchBackground#ffffff
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#7f848e2f
  • editor.foreground#454857
  • editor.lineHighlightBackground#f1f1f1
  • editor.selectionBackground#f1f1f1
  • editor.selectionHighlightBackground#f1f1f1
  • editor.selectionHighlightBorder#f1f1f1
  • editor.wordHighlightBackground#f1f1f1
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#f1f1f1
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#454857
  • editorBracketMatch.background#f1f1f1
  • editorBracketMatch.border#e7e7e7
  • editorCursor.background#f1f1f1
  • editorCursor.foreground#457dff
  • editorError.foreground#ee635b
  • editorGroup.background#7f848e
  • editorGroup.border#7f848e
  • editorGroupHeader.tabsBackground#ffffff
  • editorHoverWidget.background#232634
  • editorHoverWidget.border#7f848e
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#7f848e
  • editorRuler.foreground#454857
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#7f848e
  • editorSuggestWidget.selectedBackground#7f848e
  • editorWhitespace.foreground#838794
  • editorWidget.background#ffffff
  • focusBorder#457dff
  • input.background#f1f1f1
  • input.foreground#454857
  • input.placeholderForeground#838794
  • list.activeSelectionBackground#457dff
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#7f848e
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#7f848e2f
  • list.inactiveSelectionBackground#7f848e2f
  • list.inactiveSelectionForeground#d7dae0
  • menu.foreground#454857
  • panel.border#f1f1f1
  • panelTitle.activeBorder#457dff
  • peekViewEditor.background#7f848e
  • peekViewEditor.matchHighlightBackground#7f848e2f
  • peekViewResult.background#7f848e
  • scrollbarSlider.activeBackground#f1f1f1
  • scrollbarSlider.background#f1f1f1
  • scrollbarSlider.hoverBackground#f1f1f1
  • settings.dropdownForeground#454857
  • settings.headerForeground#454857
  • sideBar.background#f1f1f1
  • sideBar.border#f1f1f1
  • sideBar.foreground#454857
  • sideBarSectionHeader.background#f1f1f1
  • statusBar.background#d1d8e0
  • statusBar.debuggingBackground#457dff
  • statusBar.debuggingBorder#6e97dd
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#454857
  • statusBar.noFolderBackground#7f848e
  • statusBarItem.hoverBackground#7f848e
  • statusBarItem.remoteBackground#6797e9
  • statusBarItem.remoteForeground#454857
  • tab.activeBackground#f1f1f1
  • tab.activeBorder#457dff
  • tab.activeForeground#454857
  • tab.border#f1f1f1
  • tab.hoverBackground#f1f1f1
  • tab.inactiveBackground#ffffff
  • tab.unfocusedHoverBackground#ffffff
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#457dff
  • terminal.ansiBrightBlack#454857
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#db3434
  • 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#454857
  • textLink.foreground#61afef
  • titleBar.activeBackground#f1f1f1
  • titleBar.activeForeground#454857
  • titleBar.border#f1f1f1
  • titleBar.inactiveBackground#7f848e
  • titleBar.inactiveForeground#454857

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#98c379
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#db4543
constant.character.escape, keyword.operator, markup.underline.link, string.regexp, string.url#4ac3d3
entity.name.function, entity.other.attribute-name.id.css, string.other.link, support.function, variable.language.super#457dff
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#9f61e2
constant, entity.other.attribute-name, keyword.operator.quantifier.regexp, markup.bold, support.constant, variable.other.constant, variable.parameter#eb813b
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#4d88ec
token.warn-token#e9b34e
token.error-token#f05050
token.debug-token#a34de0

Shiki preview

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

Loading...

Space Invader by Sam Ogorman - VS Code Theme