Skip to main content
Coding Theme

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#F0F0F0
  • activityBar.border#DDDDDD
  • activityBar.foreground#445566
  • activityBarBadge.background#FF8800
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF8800
  • badge.foreground#FFFFFF
  • button.background#0088FF
  • button.foreground#FFFFFF
  • button.hoverBackground#6b83ed
  • diffEditor.insertedTextBackground#00999933
  • dropdown.background#FFFFFF
  • dropdown.border#DDDDDD
  • editor.background#FAFAFA
  • editor.findMatchHighlightBackground#FF880033
  • editor.foreground#445566
  • editor.lineHighlightBackground#F5F5F5
  • editor.selectionBackground#EEEEEE
  • editorCursor.foreground#445566
  • editorGroup.border#DDDDDD
  • editorGroupHeader.border#DDDDDD
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorHoverWidget.background#FAFAFA
  • editorHoverWidget.border#DDDDDD
  • editorIndentGuide.activeBackground#DDDDDD
  • editorIndentGuide.background#EEEEEE
  • editorInlayHint.background#FAFAFA
  • editorInlayHint.foreground#DDDDDD
  • editorLineNumber.activeForeground#778899
  • editorLineNumber.foreground#99AABB
  • editorRuler.foreground#DDDDDD
  • editorSuggestWidget.background#FAFAFA
  • editorSuggestWidget.border#DDDDDD
  • editorSuggestWidget.selectedBackground#FFFFFF
  • editorWhitespace.foreground#EEEEEE
  • editorWidget.background#FAFAFA
  • editorWidget.border#DDDDDD
  • extensionButton.prominentBackground#3bba54
  • extensionButton.prominentHoverBackground#4cc263
  • focusBorder#DDDDDD
  • input.background#FFFFFF
  • input.border#DDDDDD
  • list.activeSelectionBackground#DDDDDD
  • list.activeSelectionForeground#445566
  • list.focusBackground#DDDDDD
  • list.highlightForeground#445566
  • list.hoverBackground#EEEEEE
  • list.inactiveSelectionBackground#DDDDDD
  • list.inactiveSelectionForeground#445566
  • notebook.cellEditorBackground#FAFAFA
  • peekView.border#DDDDDD
  • peekViewEditor.background#FFFFFF
  • peekViewResult.background#FAFAFA
  • peekViewResult.selectionBackground#DDDDDD
  • peekViewTitle.background#FFFFFF
  • pickerGroup.border#FF8800
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#F5F5F5
  • sideBar.border#DDDDDD
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.border#DDDDDD
  • statusBar.background#F5F5F5
  • statusBar.border#DDDDDD
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#445566
  • statusBar.noFolderBackground#F5F5F5
  • statusBarItem.hoverBackground#DDDDDD
  • tab.activeBackground#FAFAFA
  • tab.activeForeground#445566
  • tab.border#DDDDDD
  • tab.inactiveBackground#F5F5F5
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#445566
  • titleBar.border#DDDDDD
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#445566

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#99AABBnormal
comment.block.preprocessor#99AABB
comment.documentation, comment.block.documentation#FF6699
invalid.illegal#990000
keyword.operator#778899
keyword, storage#FF8800
storage.type, support.type#FF8800
constant.language, support.constant, variable.language#00BBAA
variable, support.variable#445566
entity.name.function, support.function#0088FFnormal
entity.name.type, entity.other.inherited-class, support.class#00BBAAnormal
entity.name.exception#990000
entity.name.sectionbold
constant.numeric, constant.character, constant#FF6699
string#FF6699
constant.character.escape#778899
string.regexp#FF8800
constant.other.symbol#6666CC
punctuation#778899
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#99AABB
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#778899
entity.name.tag#FF8800
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#00BBAAnormal
constant.character.entity, punctuation.definition.entity#00BBAA
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#00BBAA
meta.property-name, support.type.property-name#0088FF
meta.property-value, meta.property-value constant.other, support.constant.property-value#FF6699
keyword.other.importantnormal
markup.changed#000000
markup.deleted#000000
markup.italicnormal
markup.error#990000
markup.inserted#000000
meta.link#FF8800
markup.output, markup.raw#778899
markup.prompt#778899
markup.heading#0088FF
markup.boldbold
markup.traceback#990000
markup.underlineunderline
markup.quote#00BBAA
markup.list#FF8800
markup.bold, markup.italic#FF6699
markup.inline.raw#6666CC
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
Lavinia Light Theme by Rahman Yerli - VS Code Theme