Lit
Publisher: McKayla 🌷Themes in package: 2
A Visual Studio Code theme for me and no one else
Color themes
![[mckayla] Lit VS Code color theme preview](https://images.codingtheme.com/themes/b3d0b845-a8cf-48bd-898e-17818e64104b.svg)
![[mckayla] Lit Dark VS Code color theme preview](https://images.codingtheme.com/themes/36faf0f5-a83b-4291-84e8-b610bf307f29.svg)
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#4364B8
- activityBar.background#000
- activityBar.foreground#fff
- activityBar.inactiveForeground#888
- activityBarBadge.background#4364B8
- activityBarBadge.foreground#fff
- badge.background#4364B8
- badge.foreground#fff
- breadcrumb.foreground#666
- button.background#000
- button.foreground#fff
- button.hoverBackground#000b
- charts.blue#7cd5f1
- charts.foreground#f2fffc
- charts.green#a2e57b
- charts.lines#6b7678
- charts.orange#A5871E
- charts.purple#baa0f8
- charts.red#ff6d7e
- charts.yellow#ffed72
- diffEditor.insertedTextBackground#a2e57b19
- diffEditor.removedTextBackground#ff6d7e19
- editor.background#fafafa
- editor.foreground#000
- editor.lineHighlightBackground#f7f7f7
- editor.lineHighlightBorder#f7f7f7
- editor.selectionBackground#4364B840
- editor.selectionForeground#000
- editorBracketHighlight.foreground1#000
- editorBracketHighlight.foreground2#000
- editorBracketHighlight.foreground3#000
- editorBracketHighlight.foreground4#000
- editorBracketHighlight.foreground5#000
- editorBracketHighlight.foreground6#000
- editorCursor.background#000
- editorCursor.foreground#4364B8
- editorGroupHeader.tabsBackground#f3f3f3
- editorGutter.addedBackground#a2e57b
- editorGutter.background#fafafa
- editorGutter.deletedBackground#ff6d7e
- editorGutter.modifiedBackground#A5871E
- editorIndentGuide.background#3a4449
- editorLineNumber.activeForeground#000
- editorLineNumber.foreground#666
- editorRuler.foreground#545f62
- editorWhitespace.foreground#545f62
- editorWidget.background#fefefe
- editorWidget.border#eaeaea
- editorWidget.foreground#000
- focusBorder#4364B8
- input.background#fff2
- list.activeSelectionBackground#4364B880
- list.activeSelectionForeground#fff
- list.focusBackground#4364B860
- list.hoverBackground#4364B840
- list.inactiveSelectionBackground#4364B840
- list.inactiveSelectionForeground#fff
- merge.border#f3f3f3
- merge.commonContentBackground#f2fffc19
- merge.commonHeaderBackground#f2fffc26
- merge.currentContentBackground#ff6d7e19
- merge.currentHeaderBackground#ff6d7e26
- merge.incomingContentBackground#a2e57b19
- merge.incomingHeaderBackground#a2e57b26
- notificationCenter.border#3a4449
- notificationCenterHeader.background#3a4449
- notificationCenterHeader.foreground#8b9798
- notificationLink.foreground#ffed72
- notifications.background#3a4449
- notifications.border#3a4449
- notifications.foreground#b8c4c3
- notificationsErrorIcon.foreground#ff6d7e
- notificationsInfoIcon.foreground#7cd5f1
- notificationsWarningIcon.foreground#A5871E
- notificationToast.border#3a4449
- quickInput.background#fefefe
- quickInput.border#eaeaea
- quickInput.foreground#000
- sideBar.background#fafafa
- sideBar.border#eaeaea
- sideBar.foreground#666
- sideBarSectionHeader.background#e6e6e6
- sideBarSectionHeader.border#eaeaea
- sideBarSectionHeader.foreground#000
- statusBar.background#000
- statusBar.border#161b1e
- statusBar.debuggingBackground#4364B8
- statusBar.debuggingBorder#1d2528
- statusBar.debuggingForeground#f2fffc
- statusBar.foreground#fff
- statusBar.noFolderBackground#000
- statusBar.noFolderBorder#161b1e
- statusBar.noFolderForeground#6b7678
- statusBarItem.activeBackground#f3f3f3
- statusBarItem.hoverBackground#f2fffc0c
- statusBarItem.prominentBackground#3a4449
- statusBarItem.prominentHoverBackground#3a4449
- statusBarItem.remoteBackground#4364B8
- statusBarItem.remoteForeground#fff
- tab.activeBackground#fefefe
- tab.activeBorder#ffed72
- tab.activeForeground#000
- tab.activeModifiedBorder#545f62
- tab.border#f3f3f3
- tab.hoverBackground#f3f3f3
- tab.hoverBorder#545f62
- tab.inactiveBackground#f3f3f3
- tab.inactiveForeground#666
- tab.inactiveModifiedBorder#545f62
- tab.unfocusedActiveBorder#8b9798
- tab.unfocusedActiveForeground#b8c4c3
- tab.unfocusedActiveModifiedBorder#3a4449
- tab.unfocusedHoverBackground#f3f3f3
- tab.unfocusedHoverBorder#f3f3f3
- tab.unfocusedInactiveForeground#8b9798
- tab.unfocusedInactiveModifiedBorder#4364B8
- terminal.ansiBlack#999
- terminal.ansiBlue#4063D9
- terminal.ansiBrightBlack#ccc
- terminal.ansiBrightBlue#618BD7
- terminal.ansiBrightCyan#92D1DB
- terminal.ansiBrightGreen#A2CAA2
- terminal.ansiBrightMagenta#DA6CA1
- terminal.ansiBrightRed#D76673
- terminal.ansiBrightWhite#333
- terminal.ansiBrightYellow#E8C05C
- terminal.ansiCyan#60B3BD
- terminal.ansiGreen#82C06C
- terminal.ansiMagenta#D4498C
- terminal.ansiRed#D83649
- terminal.ansiWhite#666
- terminal.ansiYellow#E8B229
- terminal.background#fafafa
- terminal.border#4364B8
- terminal.foreground#000
- terminal.selectionBackground#4364B840
- terminalCursor.background#000
- terminalCursor.foreground#4364B8
- titleBar.activeBackground#1d2528
- titleBar.activeForeground#8b9798
- titleBar.border#161b1e
- titleBar.inactiveBackground#1d2528
- titleBar.inactiveForeground#545f62
- welcomePage.buttonBackground#3a4449
- welcomePage.buttonHoverBackground#545f62
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #666 | — |
| comment.block.preprocessor | #666 | |
| comment.documentation, comment.block.documentation | #666 | — |
| comment.block.documentation punctuation.definition.bracket.curly | #249A8A | — |
| comment.block storage.type | — | |
| comment.block.documentation punctuation.definition.block.tag | #4364B8 | — |
| invalid.illegal | #CE4B3A | — |
| keyword.operator | #CE4B3A | — |
| keyword.operator.assignment, keyword.operator.type | #000 | |
| keyword.operator.arithmetic | — | |
| keyword, storage | #4364B8 | — |
| keyword.control.flow, keyword.control.default, storage.modifier | — | bold |
| keyword.other.definition.ini | #000 | — |
| storage.type, support.type, keyword.control | #4364B8 | bold |
| constant.language, support.constant, variable.language | #4364B8 | — |
| constant.language.import-export-all | #000 | — |
| variable, support.variable | #000 | — |
| meta.tag.attributes variable.other | #000 | — |
| entity.name.function, support.function | #4364B8 | bold |
| storage.type.function.arrow | #000 | |
| entity.name.type, entity.other.inherited-class, meta.type.annotation, support.class | #C63A7D | italic |
| support.class.component | #000 | bold |
| entity.name.exception | #cc0000 | — |
| entity.name.section | #4364B8 | bold |
| constant.numeric, constant.character, constant | #A5871E | — |
| string | #319A3C | — |
| constant.character.escape | #666 | — |
| string.regexp punctuation.definition.string | #249A8A | — |
| string.regexp | #249A8A | — |
| constant.other.symbol | #DB9D24 | — |
| punctuation | #000 | — |
| punctuation.definition.string | #319A3C | — |
| punctuation.definition.keyword | #4364B8 | — |
| punctuation.definition.entity.ini | #4364B8 | bold |
| punctuation.definition.tag | #000 | — |
| punctuation.definition.bold | #000 | bold |
| punctuation.definition.heading | #4364B8 | |
| punctuation.definition.string.template | #319A3C | — |
| meta.tag.attributes punctuation | #000 | — |
| meta.definition.variable, meta.definition.variable entity.name.function | #000 | — |
| meta.function-call entity.name.function | — | |
| meta.link.inline | #249A8A | — |
| support.type, support.type.primitive, meta.type.parameters entity.name.type | #C63A7D | — |
| meta.brace, meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag | #C63A7D | — |
| entity.name.tag, meta.tag.sgml punctuation.definition.tag.html, punctuation.definition.tag | #000 | bold |
| entity.other.attribute-name, entity.name.tag.css, meta.selector, meta.selector entity, meta.selector entity punctuation, punctuation.definition.entity.css | #4364B8 | bold |
| keyword.other.unit | #A5871E | italic |
| meta.tag entity.other.attribute-name, entity.other.attribute-name.html | #249A8A | italic |
| constant.character.entity, punctuation.definition.entity | #A5871E | — |
| meta.property-name, support.type.property-name | #000 | — |
| support.type.property-name.json | — | bold |
| meta.property-value, meta.property-value constant.other, support.constant.property-value | #319A3C | — |
| keyword.other.important | — | bold |
| meta.paragraph.markdown | #000 | — |
| markup.bold.markdown | #C63A7D | — |
| markup.changed | #000 | — |
| markup.deleted | #000 | — |
| markup.italic | — | italic |
| markup.error | #cc0000 | — |
| markup.inserted | #000 | — |
| meta.link | #C63A7D | — |
| markup.output, markup.raw | #888888 | — |
| markup.prompt | #888888 | — |
| markup.heading | #AA3731 | — |
| markup.bold | — | bold |
| markup.traceback | #cc0000 | — |
| markup.underline | — | underline |
| markup.quote | #4364B8 | — |
| markup.list | #C63A7D | — |
| markup.bold, markup.italic | #319A3C | — |
| markup.inline.raw | #C63A7D | |
| meta.diff.range, meta.diff.index, meta.separator | #434343 | — |
| meta.diff.header.from-file | #434343 | — |
| meta.diff.header.to-file | #434343 | — |
| keyword.operator | #4364B8 | italic |
| keyword, storage | #4364B8 | italic |
| storage.type | #4364B8 | italic |
| keyword.control | #4364B8 | italic |
| meta.attribute, entity.name.function.attribute | #A5871E | bold italic |
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#3961C7
- activityBar.background#000
- activityBar.foreground#fff
- activityBar.inactiveForeground#666
- activityBarBadge.background#3961C7
- activityBarBadge.foreground#fff
- badge.background#3961C7
- badge.foreground#fff
- breadcrumb.foreground#888
- button.background#000
- button.foreground#aaa
- button.hoverBackground#000b
- charts.blue#7cd5f1
- charts.foreground#f2fffc
- charts.green#a2e57b
- charts.lines#6b7678
- charts.orange#DBC139
- charts.purple#baa0f8
- charts.red#ff6d7e
- charts.yellow#ffed72
- diffEditor.insertedTextBackground#a2e57b19
- diffEditor.removedTextBackground#ff6d7e19
- editor.background#101316
- editor.foreground#DDDBCC
- editor.lineHighlightBackground#1A222E
- editor.lineHighlightBorder#1A222E
- editor.selectionBackground#3961C740
- editor.selectionForeground#DDDBCC
- editorBracketHighlight.foreground1#DDDBCC
- editorBracketHighlight.foreground2#DDDBCC
- editorBracketHighlight.foreground3#DDDBCC
- editorBracketHighlight.foreground4#DDDBCC
- editorBracketHighlight.foreground5#DDDBCC
- editorBracketHighlight.foreground6#DDDBCC
- editorCursor.background#DDDBCC
- editorCursor.foreground#3961C7
- editorGroupHeader.tabsBackground#161C25
- editorGutter.addedBackground#a2e57b
- editorGutter.background#101316
- editorGutter.deletedBackground#ff6d7e
- editorGutter.modifiedBackground#DBC139
- editorIndentGuide.background#3a4449
- editorLineNumber.activeForeground#DDDBCC
- editorLineNumber.foreground#888
- editorRuler.foreground#545f62
- editorWhitespace.foreground#545f62
- editorWidget.background#18202C
- editorWidget.border#444
- editorWidget.foreground#DDDBCC
- focusBorder#3961C7
- input.background#fff2
- list.activeSelectionBackground#3961C780
- list.activeSelectionForeground#fff
- list.focusBackground#3961C760
- list.hoverBackground#3961C740
- list.inactiveSelectionBackground#3961C740
- list.inactiveSelectionForeground#fff
- merge.border#161C25
- merge.commonContentBackground#f2fffc19
- merge.commonHeaderBackground#f2fffc26
- merge.currentContentBackground#ff6d7e19
- merge.currentHeaderBackground#ff6d7e26
- merge.incomingContentBackground#a2e57b19
- merge.incomingHeaderBackground#a2e57b26
- notificationCenter.border#3a4449
- notificationCenterHeader.background#3a4449
- notificationCenterHeader.foreground#8b9798
- notificationLink.foreground#ffed72
- notifications.background#3a4449
- notifications.border#3a4449
- notifications.foreground#b8c4c3
- notificationsErrorIcon.foreground#ff6d7e
- notificationsInfoIcon.foreground#7cd5f1
- notificationsWarningIcon.foreground#DBC139
- notificationToast.border#3a4449
- quickInput.background#18202C
- quickInput.border#444
- quickInput.foreground#DDDBCC
- sideBar.background#101316
- sideBar.border#444
- sideBar.foreground#888
- sideBarSectionHeader.background#1A222E
- sideBarSectionHeader.border#444
- sideBarSectionHeader.foreground#DDDBCC
- statusBar.background#000
- statusBar.border#161b1e
- statusBar.debuggingBackground#3961C7
- statusBar.debuggingBorder#1d2528
- statusBar.debuggingForeground#f2fffc
- statusBar.foreground#aaa
- statusBar.noFolderBackground#000
- statusBar.noFolderBorder#161b1e
- statusBar.noFolderForeground#6b7678
- statusBarItem.activeBackground#161C25
- statusBarItem.hoverBackground#f2fffc0c
- statusBarItem.prominentBackground#3a4449
- statusBarItem.prominentHoverBackground#3a4449
- statusBarItem.remoteBackground#3961C7
- statusBarItem.remoteForeground#aaa
- tab.activeBackground#18202C
- tab.activeBorder#ffed72
- tab.activeForeground#DDDBCC
- tab.activeModifiedBorder#545f62
- tab.border#161C25
- tab.hoverBackground#161C25
- tab.hoverBorder#545f62
- tab.inactiveBackground#161C25
- tab.inactiveForeground#888
- tab.inactiveModifiedBorder#545f62
- tab.unfocusedActiveBorder#8b9798
- tab.unfocusedActiveForeground#b8c4c3
- tab.unfocusedActiveModifiedBorder#3a4449
- tab.unfocusedHoverBackground#161C25
- tab.unfocusedHoverBorder#161C25
- tab.unfocusedInactiveForeground#8b9798
- tab.unfocusedInactiveModifiedBorder#3961C7
- terminal.ansiBlack#999
- terminal.ansiBlue#4063D9
- terminal.ansiBrightBlack#ccc
- terminal.ansiBrightBlue#618BD7
- terminal.ansiBrightCyan#92D1DB
- terminal.ansiBrightGreen#A2CAA2
- terminal.ansiBrightMagenta#DA6CA1
- terminal.ansiBrightRed#D76673
- terminal.ansiBrightWhite#333
- terminal.ansiBrightYellow#E8C05C
- terminal.ansiCyan#60B3BD
- terminal.ansiGreen#82C06C
- terminal.ansiMagenta#D4498C
- terminal.ansiRed#D83649
- terminal.ansiWhite#666
- terminal.ansiYellow#E8B229
- terminal.background#101316
- terminal.border#3961C7
- terminal.foreground#DDDBCC
- terminal.selectionBackground#3961C740
- terminalCursor.background#DDDBCC
- terminalCursor.foreground#3961C7
- titleBar.activeBackground#1d2528
- titleBar.activeForeground#8b9798
- titleBar.border#161b1e
- titleBar.inactiveBackground#1d2528
- titleBar.inactiveForeground#545f62
- welcomePage.buttonBackground#3a4449
- welcomePage.buttonHoverBackground#545f62
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #888 | — |
| comment.block.preprocessor | #888 | |
| comment.documentation, comment.block.documentation | #888 | — |
| comment.block.documentation punctuation.definition.bracket.curly | #2AB2A0 | — |
| comment.block storage.type | — | |
| comment.block.documentation punctuation.definition.block.tag | #3961C7 | — |
| invalid.illegal | #DD5441 | — |
| keyword.operator | #DD5441 | — |
| keyword.operator.assignment, keyword.operator.type | #DDDBCC | |
| keyword.operator.arithmetic | — | |
| keyword, storage | #3961C7 | — |
| keyword.control.flow, keyword.control.default, storage.modifier | — | bold |
| keyword.other.definition.ini | #DDDBCC | — |
| storage.type, support.type, keyword.control | #3961C7 | bold |
| constant.language, support.constant, variable.language | #3961C7 | — |
| constant.language.import-export-all | #DDDBCC | — |
| variable, support.variable | #DDDBCC | — |
| meta.tag.attributes variable.other | #DDDBCC | — |
| entity.name.function, support.function | #3961C7 | bold |
| storage.type.function.arrow | #DDDBCC | |
| entity.name.type, entity.other.inherited-class, meta.type.annotation, support.class | #D4498C | italic |
| support.class.component | #DDDBCC | bold |
| entity.name.exception | #cc0000 | — |
| entity.name.section | #3961C7 | bold |
| constant.numeric, constant.character, constant | #DBC139 | — |
| string | #55B45F | — |
| constant.character.escape | #888 | — |
| string.regexp punctuation.definition.string | #2AB2A0 | — |
| string.regexp | #2AB2A0 | — |
| constant.other.symbol | #F4B02B | — |
| punctuation | #DDDBCC | — |
| punctuation.definition.string | #55B45F | — |
| punctuation.definition.keyword | #3961C7 | — |
| punctuation.definition.entity.ini | #3961C7 | bold |
| punctuation.definition.tag | #DDDBCC | — |
| punctuation.definition.bold | #DDDBCC | bold |
| punctuation.definition.heading | #3961C7 | |
| punctuation.definition.string.template | #55B45F | — |
| meta.tag.attributes punctuation | #DDDBCC | — |
| meta.definition.variable, meta.definition.variable entity.name.function | #DDDBCC | — |
| meta.function-call entity.name.function | — | |
| meta.link.inline | #2AB2A0 | — |
| support.type, support.type.primitive, meta.type.parameters entity.name.type | #D4498C | — |
| meta.brace, meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag | #D4498C | — |
| entity.name.tag, meta.tag.sgml punctuation.definition.tag.html, punctuation.definition.tag | #DDDBCC | bold |
| entity.other.attribute-name, entity.name.tag.css, meta.selector, meta.selector entity, meta.selector entity punctuation, punctuation.definition.entity.css | #3961C7 | bold |
| keyword.other.unit | #DBC139 | italic |
| meta.tag entity.other.attribute-name, entity.other.attribute-name.html | #2AB2A0 | italic |
| constant.character.entity, punctuation.definition.entity | #DBC139 | — |
| meta.property-name, support.type.property-name | #DDDBCC | — |
| support.type.property-name.json | — | bold |
| meta.property-value, meta.property-value constant.other, support.constant.property-value | #55B45F | — |
| keyword.other.important | — | bold |
| meta.paragraph.markdown | #DDDBCC | — |
| markup.bold.markdown | #D4498C | — |
| markup.changed | #DDDBCC | — |
| markup.deleted | #DDDBCC | — |
| markup.italic | — | italic |
| markup.error | #cc0000 | — |
| markup.inserted | #DDDBCC | — |
| meta.link | #D4498C | — |
| markup.output, markup.raw | #888888 | — |
| markup.prompt | #888888 | — |
| markup.heading | #AA3731 | — |
| markup.bold | — | bold |
| markup.traceback | #cc0000 | — |
| markup.underline | — | underline |
| markup.quote | #3961C7 | — |
| markup.list | #D4498C | — |
| markup.bold, markup.italic | #55B45F | — |
| markup.inline.raw | #D4498C | |
| meta.diff.range, meta.diff.index, meta.separator | #434343 | — |
| meta.diff.header.from-file | #434343 | — |
| meta.diff.header.to-file | #434343 | — |
| keyword.operator | #3961C7 | italic |
| keyword, storage | #3961C7 | italic |
| storage.type | #3961C7 | italic |
| keyword.control | #3961C7 | italic |
| meta.attribute, entity.name.function.attribute | #DBC139 | bold italic |