Skip to main content
Coding Theme

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#9945FF
  • activityBar.background#000
  • activityBar.border#191919
  • activityBar.foreground#dbd7cacc
  • activityBar.inactiveForeground#dedcd550
  • activityBarBadge.background#bfbaaa
  • activityBarBadge.foreground#000
  • badge.background#dedcd590
  • badge.foreground#000
  • breadcrumb.activeSelectionForeground#eeeeee15
  • breadcrumb.background#121212
  • breadcrumb.focusForeground#dbd7cacc
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#000
  • button.background#9945FF
  • button.foreground#000
  • button.hoverBackground#9945FF
  • checkbox.background#121212
  • checkbox.border#2f363d
  • debugToolBar.background#000
  • descriptionForeground#dedcd590
  • diffEditor.insertedTextBackground#4d937522
  • diffEditor.removedTextBackground#ab595922
  • dropdown.background#000
  • dropdown.border#191919
  • dropdown.foreground#dbd7cacc
  • dropdown.listBackground#121212
  • editor.background#000
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#e6cc7744
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#eeeeee10
  • editor.foreground#dbd7cacc
  • editor.inactiveSelectionBackground#eeeeee08
  • editor.lineHighlightBackground#121212
  • editor.selectionBackground#eeeeee15
  • editor.selectionHighlightBackground#eeeeee08
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#00FFFF
  • editorBracketHighlight.foreground2#14F195
  • editorBracketHighlight.foreground3#ff9900
  • editorBracketHighlight.foreground4#EB459E
  • editorBracketHighlight.foreground5#FEE75C
  • editorBracketHighlight.foreground6#5865F2
  • editorBracketMatch.background#4d937520
  • editorError.foreground#ED4245
  • editorGroup.border#191919
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#191919
  • editorGutter.addedBackground#14F195
  • editorGutter.commentRangeForeground#dedcd550
  • editorGutter.deletedBackground#ED4245
  • editorGutter.foldingControlForeground#dedcd590
  • editorGutter.modifiedBackground#5865F2
  • editorHint.foreground#14F195
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#5865F2
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#FF00Fcc
  • editorLineNumber.activeForeground#bfbaaa
  • editorLineNumber.foreground#dedcd550
  • editorOverviewRuler.border#111
  • editorStickyScroll.background#121212
  • editorStickyScrollHover.background#121212
  • editorWarning.foreground#ff9900
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#000
  • errorForeground#ED4245
  • focusBorder#00000000
  • foreground#dbd7cacc
  • gitDecoration.addedResourceForeground#14F195
  • gitDecoration.conflictingResourceForeground#ff9900
  • gitDecoration.deletedResourceForeground#ED4245
  • gitDecoration.ignoredResourceForeground#dedcd550
  • gitDecoration.modifiedResourceForeground#5865F2
  • gitDecoration.submoduleResourceForeground#dedcd590
  • gitDecoration.untrackedResourceForeground#00FFFF
  • input.background#121212
  • input.border#191919
  • input.foreground#dbd7cacc
  • input.placeholderForeground#dedcd590
  • inputOption.activeBackground#dedcd550
  • list.activeSelectionBackground#121212
  • list.activeSelectionForeground#dbd7cacc
  • list.focusBackground#121212
  • list.highlightForeground#9945FF
  • list.hoverBackground#121212
  • list.hoverForeground#dbd7cacc
  • list.inactiveFocusBackground#000
  • list.inactiveSelectionBackground#121212
  • list.inactiveSelectionForeground#dbd7cacc
  • menu.separatorBackground#191919
  • notificationCenterHeader.background#000
  • notificationCenterHeader.foreground#959da5
  • notifications.background#000
  • notifications.border#191919
  • notifications.foreground#dbd7cacc
  • notificationsErrorIcon.foreground#ED4245
  • notificationsInfoIcon.foreground#5865F2
  • notificationsWarningIcon.foreground#ff9900
  • panel.background#000
  • panel.border#191919
  • panelInput.border#2f363d
  • panelTitle.activeBorder#9945FF
  • panelTitle.activeForeground#dbd7cacc
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#000
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#000
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#191919
  • pickerGroup.foreground#dbd7cacc
  • problemsErrorIcon.foreground#ED4245
  • problemsInfoIcon.foreground#5865F2
  • problemsWarningIcon.foreground#ff9900
  • progressBar.background#9945FF
  • quickInput.background#000
  • quickInput.foreground#dbd7cacc
  • quickInputList.focusBackground#121212
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#dedcd550
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd550
  • settings.headerForeground#dbd7cacc
  • settings.modifiedItemIndicator#9945FF
  • sideBar.background#000
  • sideBar.border#191919
  • sideBar.foreground#bfbaaa
  • sideBarSectionHeader.background#000
  • sideBarSectionHeader.border#191919
  • sideBarSectionHeader.foreground#dbd7cacc
  • sideBarTitle.foreground#dbd7cacc
  • statusBar.background#000
  • statusBar.border#191919
  • statusBar.debuggingBackground#121212
  • statusBar.debuggingForeground#bfbaaa
  • statusBar.foreground#bfbaaa
  • statusBar.noFolderBackground#000
  • statusBarItem.prominentBackground#121212
  • tab.activeBackground#000
  • tab.activeBorder#191919
  • tab.activeBorderTop#9945FF
  • tab.activeForeground#dbd7cacc
  • tab.border#191919
  • tab.hoverBackground#121212
  • tab.inactiveBackground#000
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#191919
  • tab.unfocusedActiveBorderTop#191919
  • tab.unfocusedHoverBackground#000
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#5865F2
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#5865F2
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#14F195
  • terminal.ansiBrightMagenta#EB459E
  • terminal.ansiBrightRed#ED4245
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FEE75C
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#14F195
  • terminal.ansiMagenta#EB459E
  • terminal.ansiRed#ED4245
  • terminal.ansiWhite#dbd7caee
  • terminal.ansiYellow#FEE75C
  • terminal.foreground#dbd7cacc
  • terminal.selectionBackground#eeeeee15
  • textBlockQuote.background#000
  • textBlockQuote.border#191919
  • textCodeBlock.background#000
  • textLink.activeForeground#9945FF
  • textLink.foreground#9945FF
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#000
  • titleBar.activeForeground#bfbaaa
  • titleBar.border#121212
  • titleBar.inactiveBackground#000
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#758575dd
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational, keyword.operator.assignment, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, meta.embedded.block.github-actions-expression, storage.type.function.arrow, keyword.operator.type, meta.objectliteral.ts, punctuation#FF00Fcc
constant, entity.name.constant, variable.language, meta.definition.variable#CCFF00
entity, entity.name#FEE75C
variable.parameter.function#dbd7cacc
entity.name.tag, tag.html#14F195
entity.name.function#FEE75C
keyword, storage.type.class.jsdoc#14F195
storage, storage.type, support.type.builtin, constant.language.undefined, constant.language.null#14F195
text.html.derivative, storage.modifier.package, storage.modifier.import, storage.type.java#dbd7cacc
string, string punctuation.section.embedded source, attribute.value#ff9900
punctuation.definition.string, punctuation.support.type.property-name#ff990099
support#9945FF
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#9945FF
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#00FFFF
variable, identifier#00FFFF
support.type.primitive, entity.name.type#CCFF00
namespace#FF780A
keyword.operator, keyword.operator.assignment.compound, meta.var.expr.ts#FF00FF
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic underline
message.error#fdaeb7
string variable#ff9900
source.regexp, string.regexp#ffea7f
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#ff9900
string.regexp constant.character.escape#FEE75C
support.constant#CCFF00
constant.numeric, number#FEE75C
keyword.other.unit#14F195
constant.language.boolean, constant.language#FF078A
meta.module-reference#9945FF
punctuation.definition.list.begin.markdown#ff9900
markup.heading, markup.heading entity.name#9945FFbold
markup.quote#FF078A
markup.italic#dbd7caccitalic
markup.bold#dbd7caccbold
markup.raw#9945FF
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ff9900
markup.underline.link.markdown#dedcd590underline
type.identifier#CCFF00
entity.other.attribute-name.html.vue#FEE75C
invalid.illegal.unrecognized-tag.htmlnormal
Lumos Theme by nyxb - VS Code Theme