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.underlineunderline
markup.strikethroughstrikethrough
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