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.background#EDEDF5
  • activityBar.foreground#705697
  • activityBarBadge.background#705697
  • badge.background#705697AA
  • button.background#705697
  • dropdown.background#F5F5F5
  • editor.background#F5F5F5
  • editor.findMatchBackground#BF9CAC
  • editor.findMatchHighlightBackground#edc9d8
  • editor.lineHighlightBackground#E4F6D4
  • editor.selectionBackground#C9D0D9
  • editorCursor.foreground#54494B
  • editorGroup.dropBackground#C9D0D988
  • editorIndentGuide.activeBackground#777777b0
  • editorIndentGuide.background#aaaaaa60
  • editorLineNumber.activeForeground#9769dc
  • editorLineNumber.foreground#6D705B
  • editorWhitespace.foreground#AAAAAA
  • errorForeground#f1897f
  • focusBorder#A6B39B
  • inputOption.activeBorder#adafb7
  • inputValidation.errorBackground#ffeaea
  • inputValidation.errorBorder#f1897f
  • inputValidation.infoBackground#f2fcff
  • inputValidation.infoBorder#4ec1e5
  • inputValidation.warningBackground#fffee2
  • inputValidation.warningBorder#ffe055
  • list.activeSelectionBackground#c4d9b1
  • list.activeSelectionForeground#6c6c6c
  • list.highlightForeground#9769dc
  • list.hoverBackground#e0e0e0
  • list.inactiveSelectionBackground#d3dbcd
  • minimap.selectionHighlight#C9D0D9
  • panel.background#F5F5F5
  • peekView.border#705697
  • peekViewEditor.background#F2F8FC
  • peekViewEditor.matchHighlightBackground#C2DFE3
  • peekViewResult.background#F2F8FC
  • peekViewResult.matchHighlightBackground#93C6D6
  • peekViewTitle.background#F2F8FC
  • pickerGroup.border#749351
  • pickerGroup.foreground#A6B39B
  • ports.iconRunningProcessForeground#749351
  • progressBar.background#705697
  • quickInputList.focusBackground#CADEB9
  • selection.background#C9D0D9
  • sideBar.background#F2F2F2
  • sideBarSectionHeader.background#ede8ef
  • statusBar.background#705697
  • statusBar.debuggingBackground#705697
  • statusBar.noFolderBackground#705697
  • statusBarItem.remoteBackground#4e3c69
  • tab.lastPinnedBorder#c9d0d9
  • titleBar.activeBackground#c4b7d7
  • walkThrough.embeddedEditorBackground#00000014
  • welcomePage.tileBackground#f0f0f7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.inline.asp, comment.multiline.asp#7b9726italic
testing.block.asp#506b00bold
keyword.control.asp#f22c40
variable.asp#df5320
strong.asp#7b9726
weak.asp#c33ff3
weak_cost.asp#ff006a
numbers.asp#c38418
aggregates.asp#00ad9cbold
builtins.asp#ea3ff3bold
extpredicates.asp#1aab15bold
directives.asp#78003cbold
strings.single.quoted.asp#787800
strings.double.quoted.asp#787800
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#333333
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation, comment.block.documentation punctuation.definition.comment #448C27
invalid#cd3131
invalid.illegal#660000
keyword.operator#777777
keyword, storage#4B69C6
storage.type, support.type#7A3E9D
constant.language, support.constant, variable.language#9C5D27
variable, support.variable#7A3E9D
entity.name.function, support.function#AA3731bold
entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.class#7A3E9Dbold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#9C5D27
string#448C27
constant.character.escape#777777
string.regexp#4B69C6
constant.other.symbol#9C5D27
punctuation#777777
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#91B3E0
entity.name.tag#4B69C6
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8190A0italic
constant.character.entity, punctuation.definition.entity#9C5D27
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
meta.property-name, support.type.property-name#9C5D27
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.strikethroughstrikethrough
markup.error#660000
markup.inserted#000000
meta.link#4B69C6
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B69C6
markup.bold, markup.italic#448C27
markup.inline.raw#9C5D27
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file, punctuation.definition.from-file.diff#4B69C6
meta.diff.header.to-file, punctuation.definition.to-file.diff#4B69C6
markup.deleted.diff#C73D20
markup.changed.diff#9C5D27
markup.inserted.diff#448C27
punctuation.definition.tag.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#91B3E0
meta.jsx.children.js#333333ff

Shiki preview

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

Loading...

ASP Editor by aspeditor - VS Code Theme