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#ec775c
  • activityBar.background#1a1433
  • activityBar.border#362d5b
  • activityBar.foreground#877ebd
  • activityBar.inactiveForeground#5e5393
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#9e97d1
  • badge.background#316dca
  • badge.foreground#9e97d1
  • breadcrumb.activeSelectionForeground#5e5393
  • breadcrumb.focusForeground#877ebd
  • breadcrumb.foreground#5e5393
  • breadcrumbPicker.background#231c40
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#302852
  • button.secondaryForeground#877ebd
  • button.secondaryHoverBackground#362d5b
  • checkbox.background#231c40
  • checkbox.border#362d5b
  • debugConsole.errorForeground#eca277
  • debugConsole.infoForeground#5e5393
  • debugConsole.sourceForeground#b7b864
  • debugConsole.warningForeground#a69e4c
  • debugConsoleInputIcon.foreground#8996ec
  • debugIcon.breakpointForeground#e5534b
  • debugTokenExpression.boolean#4ec49f
  • debugTokenExpression.error#eca277
  • debugTokenExpression.name#5ebee2
  • debugTokenExpression.number#4ec49f
  • debugTokenExpression.string#93d5e8
  • debugTokenExpression.value#93d5e8
  • debugToolBar.background#231c40
  • descriptionForeground#5e5393
  • diffEditor.insertedLineBackground#117d6226
  • diffEditor.insertedTextBackground#3aab894d
  • diffEditor.removedLineBackground#b5580726
  • diffEditor.removedTextBackground#df854d4d
  • disabledForeground#9795a380
  • dropdown.background#231c40
  • dropdown.border#362d5b
  • dropdown.foreground#877ebd
  • dropdown.listBackground#231c40
  • editor.background#1a1433
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#c7d18380
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#4f44801a
  • editor.foreground#877ebd
  • editor.lineHighlightBackground#4f44801a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionHighlightBackground#3aab8940
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#4f448080
  • editor.wordHighlightBorder#4f448099
  • editor.wordHighlightStrongBackground#4f44804d
  • editor.wordHighlightStrongBorder#4f448099
  • editorBracketHighlight.foreground1#5ebee2
  • editorBracketHighlight.foreground2#4ec49f
  • editorBracketHighlight.foreground3#b7b864
  • editorBracketHighlight.foreground4#eca277
  • editorBracketHighlight.foreground5#dd9de3
  • editorBracketHighlight.foreground6#c4c7fb
  • editorBracketHighlight.unexpectedBracket.foreground#5e5393
  • editorBracketMatch.background#3aab8940
  • editorBracketMatch.border#3aab8999
  • editorCursor.foreground#539bf5
  • editorGroup.border#362d5b
  • editorGroupHeader.tabsBackground#160f2e
  • editorGroupHeader.tabsBorder#362d5b
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorHoverWidget.border#312f3b
  • editorIndentGuide.activeBackground#877ebd3d
  • editorIndentGuide.background#877ebd1f
  • editorInlayHint.background#5e539333
  • editorInlayHint.foreground#5e5393
  • editorInlayHint.paramBackground#5e539333
  • editorInlayHint.paramForeground#5e5393
  • editorInlayHint.typeBackground#5e539333
  • editorInlayHint.typeForeground#5e5393
  • editorLineNumber.activeForeground#877ebd
  • editorLineNumber.foreground#4f4480
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#42396c
  • editorWidget.background#231c40
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#877ebd
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#4f4480
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#5e5393
  • gitDecoration.untrackedResourceForeground#57ab5a
  • icon.foreground#5e5393
  • input.background#1a1433
  • input.border#362d5b
  • input.foreground#877ebd
  • input.placeholderForeground#4f4480
  • keybindingLabel.foreground#877ebd
  • list.activeSelectionBackground#4f448066
  • list.activeSelectionForeground#877ebd
  • list.focusBackground#4184e426
  • list.focusForeground#877ebd
  • list.highlightForeground#539bf5
  • list.hoverBackground#4f44801a
  • list.hoverForeground#877ebd
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#4f448066
  • list.inactiveSelectionForeground#877ebd
  • minimapSlider.activeBackground#5e539347
  • minimapSlider.background#5e539333
  • minimapSlider.hoverBackground#5e53933d
  • notificationCenterHeader.background#231c40
  • notificationCenterHeader.foreground#5e5393
  • notifications.background#231c40
  • notifications.border#362d5b
  • notifications.foreground#877ebd
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#160f2e
  • panel.border#362d5b
  • panelInput.border#362d5b
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#877ebd
  • panelTitle.inactiveForeground#5e5393
  • peekViewEditor.background#4f44801a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#1a1433
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#362d5b
  • pickerGroup.foreground#5e5393
  • progressBar.background#316dca
  • quickInput.background#231c40
  • quickInput.foreground#877ebd
  • scrollbar.shadow#42396c33
  • scrollbarSlider.activeBackground#5e539347
  • scrollbarSlider.background#5e539333
  • scrollbarSlider.hoverBackground#5e53933d
  • settings.headerForeground#877ebd
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#160f2e
  • sideBar.border#362d5b
  • sideBar.foreground#877ebd
  • sideBarSectionHeader.background#160f2e
  • sideBarSectionHeader.border#362d5b
  • sideBarSectionHeader.foreground#877ebd
  • sideBarTitle.foreground#877ebd
  • statusBar.background#1a1433
  • statusBar.border#362d5b
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#9e97d1
  • statusBar.focusBorder#316dca80
  • statusBar.foreground#5e5393
  • statusBar.noFolderBackground#1a1433
  • statusBarItem.activeBackground#877ebd1f
  • statusBarItem.focusBorder#316dca
  • statusBarItem.hoverBackground#877ebd14
  • statusBarItem.prominentBackground#4f448066
  • statusBarItem.remoteBackground#362d5b
  • statusBarItem.remoteForeground#877ebd
  • symbolIcon.arrayForeground#c39442
  • symbolIcon.booleanForeground#32a7d6
  • symbolIcon.classForeground#c39442
  • symbolIcon.colorForeground#5ebee2
  • symbolIcon.constantForeground#a7f1d6#78dbb9#4ec49f#3aab89#279576#117d62#0e6a53#0f5845#0b4738#053428
  • symbolIcon.constructorForeground#c4c7fb
  • symbolIcon.enumeratorForeground#c39442
  • symbolIcon.enumeratorMemberForeground#32a7d6
  • symbolIcon.eventForeground#4f4480
  • symbolIcon.fieldForeground#c39442
  • symbolIcon.fileForeground#a69e4c
  • symbolIcon.folderForeground#a69e4c
  • symbolIcon.functionForeground#8996ec
  • symbolIcon.interfaceForeground#c39442
  • symbolIcon.keyForeground#32a7d6
  • symbolIcon.keywordForeground#df854d
  • symbolIcon.methodForeground#8996ec
  • symbolIcon.moduleForeground#df854d
  • symbolIcon.namespaceForeground#df854d
  • symbolIcon.nullForeground#32a7d6
  • symbolIcon.numberForeground#3aab89
  • symbolIcon.objectForeground#c39442
  • symbolIcon.operatorForeground#5ebee2
  • symbolIcon.packageForeground#c39442
  • symbolIcon.propertyForeground#c39442
  • symbolIcon.referenceForeground#32a7d6
  • symbolIcon.snippetForeground#32a7d6
  • symbolIcon.stringForeground#5ebee2
  • symbolIcon.structForeground#c39442
  • symbolIcon.textForeground#5ebee2
  • symbolIcon.typeParameterForeground#5ebee2
  • symbolIcon.unitForeground#32a7d6
  • symbolIcon.variableForeground#c39442
  • tab.activeBackground#1a1433
  • tab.activeBorder#1a1433
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#877ebd
  • tab.border#362d5b
  • tab.hoverBackground#1a1433
  • tab.inactiveBackground#160f2e
  • tab.inactiveForeground#5e5393
  • tab.unfocusedActiveBorder#1a1433
  • tab.unfocusedActiveBorderTop#362d5b
  • tab.unfocusedHoverBackground#4f44801a
  • terminal.ansiBlack#42396c
  • terminal.ansiBlue#32a7d6
  • terminal.ansiBrightBlack#4f4480
  • terminal.ansiBrightBlue#5ebee2
  • terminal.ansiBrightCyan#7dd2bd
  • terminal.ansiBrightGreen#4ec49f
  • terminal.ansiBrightMagenta#c4c7fb
  • terminal.ansiBrightRed#eca277
  • terminal.ansiBrightWhite#9e97d1
  • terminal.ansiBrightYellow#b7b864
  • terminal.ansiCyan#69c3af
  • terminal.ansiGreen#3aab89
  • terminal.ansiMagenta#8996ec
  • terminal.ansiRed#df854d
  • terminal.ansiWhite#7267a9
  • terminal.ansiYellow#a69e4c
  • terminal.foreground#877ebd
  • textBlockQuote.background#160f2e
  • textBlockQuote.border#362d5b
  • textCodeBlock.background#4f448066
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.background#4f448066
  • textPreformat.foreground#5e5393
  • textSeparator.foreground#2b234c
  • titleBar.activeBackground#1a1433
  • titleBar.activeForeground#5e5393
  • titleBar.border#362d5b
  • titleBar.inactiveBackground#160f2e
  • titleBar.inactiveForeground#5e5393
  • tree.indentGuidesStroke#2b234c
  • welcomePage.buttonBackground#2b234c
  • welcomePage.buttonHoverBackground#362d5b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#5e5393—
constant.other.placeholder, constant.character#df854d—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#5ebee2—
entity.name, meta.export.default, meta.definition.variable#d7af5b—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#877ebd—
entity.name.function#c4c7fb—
entity.name.tag, support.class.component#78dbb9—
keyword#df854d—
storage, storage.type#df854d—
storage.modifier.package, storage.modifier.import, storage.type.java#877ebd—
string, string punctuation.section.embedded source#93d5e8—
support#5ebee2—
meta.property-name#5ebee2—
variable#d7af5b—
variable.other#877ebd—
invalid.broken#eca277italic
invalid.deprecated#eca277italic
invalid.illegal#eca277italic
invalid.unimplemented#eca277italic
carriage-return#9e97d1italic underline
message.error#eca277—
string variable#5ebee2—
source.regexp, string.regexp#93d5e8—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#93d5e8—
string.regexp constant.character.escape#78dbb9bold
support.constant#5ebee2—
support.variable#5ebee2—
support.type.property-name.json#78dbb9—
meta.module-reference#5ebee2—
punctuation.definition.list.begin.markdown#d7af5b—
markup.heading, markup.heading entity.name#5ebee2bold
markup.quote#78dbb9—
markup.italic#877ebditalic
markup.bold#877ebdbold
markup.underline—underline
markup.strikethrough—strikethrough
markup.inline.raw#5ebee2—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#eca277—
punctuation.section.embedded#df854d—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#78dbb9—
markup.changed, punctuation.definition.changed#d7af5b—
markup.ignored, markup.untracked#231c40—
meta.diff.range#c4c7fbbold
meta.diff.header#5ebee2—
meta.separator#5ebee2bold
meta.output#5ebee2—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#5e5393—
brackethighlighter.unmatched#eca277—
constant.other.reference.link, string.other.link#93d5e8—