Skip to main content
CodingTheme

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.activeBackground#0052CC
  • activityBar.background#0747A6
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#DFE1E6
  • activityBarBadge.background#FFC400
  • activityBarBadge.foreground#172B4D
  • badge.background#EBECF0
  • badge.foreground#0747A6
  • button.background#0052CC
  • button.foreground#FFFFFF
  • button.hoverBackground#0065FF
  • button.secondaryBackground#C1C7D0
  • button.secondaryForeground#172B4D
  • button.secondaryHoverBackground#B3BAC5
  • descriptionForeground#FAFBFC
  • dropdown.background#FFFFFF
  • dropdown.border#B3BAC5
  • dropdown.foreground#172B4D
  • dropdown.listBackground#FFFFFF
  • editor.background#FFFFFF
  • editor.findMatchBackground#ABF5D1A0
  • editor.findMatchHighlightBackground#E3FCEF30
  • editor.foreground#172B4D
  • editor.inactiveSelectionBackground#E6FCFF
  • editor.lineHighlightBackground#DEEBFF80
  • editor.selectionBackground#B3D4FF
  • editor.selectionHighlightBackground#E6FCFF
  • editor.wordHighlightBackground#4C9AFF1F
  • editor.wordHighlightStrongBackground#4C9AFF46
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#36B37E
  • editorError.foreground#DE350B
  • editorGroup.dropBackground#0052CC3F
  • editorGutter.addedBackground#2684FF
  • editorGutter.deletedBackground#FF5630
  • editorInfo.foreground#0065FF
  • editorLineNumber.activeForeground#091E42
  • editorLineNumber.foreground#6B778C
  • editorRuler.foreground#DFE1E6
  • editorWarning.foreground#FF8B00
  • editorWhitespace.foreground#E6FCFF
  • foreground#253858
  • icon.foreground#091E42
  • list.activeSelectionBackground#EBECF0
  • list.activeSelectionForeground#091E42
  • list.activeSelectionIconForeground#091E42
  • peekViewEditor.background#FAFBFC
  • problemsErrorIcon.foreground#DE350B
  • problemsInfoIcon.foreground#0065FF
  • problemsWarningIcon.foreground#FF8B00
  • selection.background#B3D4FF
  • sideBar.background#FAFBFC
  • sideBar.border#DFE1E6
  • sideBar.foreground#172B4D
  • statusBar.background#0747A6
  • statusBar.border#00000000
  • statusBar.debuggingBackground#0747A6
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#0747A6
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.errorBackground#DE350B
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.warningBackground#FF8B00
  • statusBarItem.warningForeground#172B4D
  • textLink.foreground#0052CC
  • titleBar.activeBackground#FAFBFC
  • titleBar.activeForeground#172B4D
  • titleBar.inactiveBackground#EBECF0
  • window.activeBorder#172B4D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A869Aitalic
comment.block.preprocessor#7A869A
comment.documentation, comment.block.documentation#7A869A
invalid.illegal#BF2600
keyword.operator#7A869A
keyword, storage#D05030
storage.type, support.type#008DA6
constant.language, support.constant, variable.language#403294
variable, support.variable#0052CC
entity.name.function, support.function#0747A6bold
entity.name.type, entity.other.inherited-class, support.class#0747A6bold
entity.name.exception#FF8B00
entity.name.sectionbold
constant.numeric, constant.character, constant#091E42
string#448C27
constant.character.escape#777777
string.regexp#4B83CD
constant.other.symbol#00875A
punctuation#7A869A
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#4C9AFF
entity.name.tag#4B83CD
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#4C9AFFitalic
constant.character.entity, punctuation.definition.entity#FFAB00
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#00A3BF
meta.property-name, support.type.property-name#6554C0
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#172B4D
markup.deleted#172B4D
markup.italicitalic
markup.error#BF2600
markup.inserted#172B4D
meta.link#0052CC
markup.output, markup.raw#7A869A
markup.prompt#7A869A
markup.heading#006644
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#403294
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343

Shiki preview

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

Loading...

Atlassian (Light Mode) by Tanvee Islam - VS Code Theme