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#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).

scopeforegroundfontStyle
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.modifierbold
keyword.other.definition.ini#000
storage.type, support.type, keyword.control#4364B8bold
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#4364B8bold
storage.type.function.arrow#000
entity.name.type, entity.other.inherited-class, meta.type.annotation, support.class#C63A7Ditalic
support.class.component#000bold
entity.name.exception#cc0000
entity.name.section#4364B8bold
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#4364B8bold
punctuation.definition.tag#000
punctuation.definition.bold#000bold
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#000bold
entity.other.attribute-name, entity.name.tag.css, meta.selector, meta.selector entity, meta.selector entity punctuation, punctuation.definition.entity.css#4364B8bold
keyword.other.unit#A5871Eitalic
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#249A8Aitalic
constant.character.entity, punctuation.definition.entity#A5871E
meta.property-name, support.type.property-name#000
support.type.property-name.jsonbold
meta.property-value, meta.property-value constant.other, support.constant.property-value#319A3C
keyword.other.importantbold
meta.paragraph.markdown#000
markup.bold.markdown#C63A7D
markup.changed#000
markup.deleted#000
markup.italicitalic
markup.error#cc0000
markup.inserted#000
meta.link#C63A7D
markup.output, markup.raw#888888
markup.prompt#888888
markup.heading#AA3731
markup.boldbold
markup.traceback#cc0000
markup.underlineunderline
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#4364B8italic
keyword, storage#4364B8italic
storage.type#4364B8italic
keyword.control#4364B8italic
meta.attribute, entity.name.function.attribute#A5871Ebold italic

Shiki preview

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

Loading...

Lit by McKayla 🌷 - VS Code Theme