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#3ef9d0
  • activityBar.background#282b5e
  • activityBar.border#1b1f23
  • activityBar.foreground#b3b5cf
  • activityBar.inactiveForeground#7c7ea2
  • activityBarBadge.background#fc0373
  • activityBarBadge.foreground#ebecfc
  • badge.background#890022
  • badge.foreground#ffccff
  • breadcrumb.activeSelectionForeground#b3b5cf
  • breadcrumb.focusForeground#b3b5cf
  • breadcrumb.foreground#9799b8
  • breadcrumbPicker.background#282b5e
  • button.background#008c98
  • button.foreground#ffffff
  • button.hoverBackground#00919d
  • checkbox.background#60628b
  • checkbox.border#1b1f23
  • debugToolBar.background#000000
  • descriptionForeground#9799b8
  • diffEditor.insertedTextBackground#34d0584d
  • diffEditor.removedTextBackground#b2003166
  • dropdown.background#2e335f
  • dropdown.border#1b1f23
  • dropdown.foreground#b3b5cf
  • dropdown.listBackground#282b5e
  • editor.background#282b5e
  • editor.findMatchBackground#ffff8f
  • editor.findMatchHighlightBackground#ffdf5d4d
  • editor.focusedStackFrameHighlightBackground#947f00
  • editor.foldBackground#182049
  • editor.foreground#b3b5cf
  • editor.inactiveSelectionBackground#a600341a
  • editor.lineHighlightBackground#2e335f
  • editor.selectionBackground#89002233
  • editor.selectionHighlightBackground#ff95d2
  • editor.selectionHighlightBorder#fc037300
  • editor.stackFrameHighlightBackground#635300
  • editor.wordHighlightBackground#fc037300
  • editor.wordHighlightBorder#fc037399
  • editor.wordHighlightStrongBackground#fc037300
  • editor.wordHighlightStrongBorder#fc037380
  • editorBracketMatch.background#fc037366
  • editorBracketMatch.border#fc037300
  • editorCursor.foreground#e5ffff
  • editorGroup.border#1b1f23
  • editorGroupHeader.tabsBackground#23275a
  • editorGroupHeader.tabsBorder#282b5e
  • editorGutter.addedBackground#34d058
  • editorGutter.deletedBackground#ff7e87
  • editorGutter.modifiedBackground#71b7ff
  • editorIndentGuide.activeBackground#60628b
  • editorIndentGuide.background#2e335f
  • editorLineNumber.activeForeground#b3b5cf
  • editorLineNumber.foreground#60628b
  • editorOverviewRuler.border#1b1f23
  • editorWhitespace.foreground#60628b
  • editorWidget.background#23275a
  • errorForeground#ffb1b6
  • focusBorder#005ccb
  • foreground#b3b5cf
  • gitDecoration.addedResourceForeground#73ff88
  • gitDecoration.conflictingResourceForeground#ffe991
  • gitDecoration.deletedResourceForeground#ff7e87
  • gitDecoration.ignoredResourceForeground#7c7ea2
  • gitDecoration.modifiedResourceForeground#ace9ff
  • gitDecoration.submoduleResourceForeground#7c7ea2
  • gitDecoration.untrackedResourceForeground#73ff88
  • input.background#2e335f
  • input.border#1b1f23
  • input.foreground#b3b5cf
  • input.placeholderForeground#9799b8
  • list.activeSelectionBackground#2e335f
  • list.activeSelectionForeground#b3b5cf
  • list.focusBackground#890022
  • list.hoverBackground#2d2f62
  • list.hoverForeground#b3b5cf
  • list.inactiveFocusBackground#23275a
  • list.inactiveSelectionBackground#282b5e
  • list.inactiveSelectionForeground#b3b5cf
  • notificationCenterHeader.background#282b5e
  • notificationCenterHeader.foreground#9799b8
  • notifications.background#2e335f
  • notifications.border#1b1f23
  • notifications.foreground#b3b5cf
  • notificationsErrorIcon.foreground#ff7e87
  • notificationsInfoIcon.foreground#ace9ff
  • notificationsWarningIcon.foreground#ffe991
  • panel.background#23275a
  • panel.border#1b1f23
  • panelInput.border#2e335f
  • panelTitle.activeBorder#3ef9d0
  • panelTitle.activeForeground#b3b5cf
  • panelTitle.inactiveForeground#9799b8
  • peekViewEditor.background#282b5e99
  • peekViewEditor.matchHighlightBackground#ffffc1
  • peekViewResult.background#282b5e
  • peekViewResult.matchHighlightBackground#ffffc1
  • pickerGroup.border#60628b
  • pickerGroup.foreground#b3b5cf
  • progressBar.background#fc0373
  • quickInput.background#282b5e
  • quickInput.foreground#b3b5cf
  • scrollbar.shadow#2e335f
  • scrollbarSlider.activeBackground#9799b899
  • scrollbarSlider.background#9799b833
  • scrollbarSlider.hoverBackground#9799b840
  • settings.headerForeground#b3b5cf
  • settings.modifiedItemIndicator#2188ff
  • sideBar.background#23275a
  • sideBar.border#1b1f23
  • sideBar.foreground#b3b5cf
  • sideBarSectionHeader.background#23275a
  • sideBarSectionHeader.border#1b1f23
  • sideBarSectionHeader.foreground#b3b5cf
  • sideBarTitle.foreground#b3b5cf
  • statusBar.background#282b5e
  • statusBar.border#1b1f23
  • statusBar.debuggingBackground#ffffff
  • statusBar.debuggingForeground#ebecfc
  • statusBar.foreground#b3b5cf
  • statusBar.noFolderBackground#282b5e
  • tab.activeBackground#282b5e
  • tab.activeBorder#282b5e
  • tab.activeBorderTop#3ef9d0
  • tab.activeForeground#b3b5cf
  • tab.border#1b1f23
  • tab.hoverBackground#282b5e
  • tab.inactiveBackground#23275a
  • tab.inactiveForeground#9799b8
  • tab.unfocusedActiveBorder#282b5e
  • tab.unfocusedActiveBorderTop#282b5e
  • tab.unfocusedHoverBackground#282b5e
  • terminal.foreground#b3b5cf
  • textBlockQuote.background#282b5e
  • textBlockQuote.border#60628b
  • textCodeBlock.background#2e335f
  • textLink.activeForeground#e5ffff
  • textLink.foreground#ace9ff
  • textPreformat.foreground#b3b5cf
  • textSeparator.foreground#60628b
  • titleBar.activeBackground#282b5e
  • titleBar.activeForeground#b3b5cf
  • titleBar.border#1b1f23
  • titleBar.inactiveBackground#23275a
  • titleBar.inactiveForeground#9799b8
  • tree.indentGuidesStroke#2e335f
  • welcomePage.buttonBackground#2e335f
  • welcomePage.buttonHoverBackground#60628b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#7c7ea2—
constant, entity.name.constant, variable.other.constant, variable.language#71b7ff—
entity, entity.name#bd92ff—
variable.parameter.function#b3b5cf—
entity.name.tag#73ff88—
keyword#ff7e87—
storage, storage.type#ff7e87—
storage.modifier.package, storage.modifier.import, storage.type.java#b3b5cf—
string, punctuation.definition.string, string punctuation.section.embedded source#71b7ff—
support#71b7ff—
meta.property-name#71b7ff—
variable#ffb661—
variable.other#b3b5cf—
invalid.broken#ff979e—
invalid.deprecated#ff979e—
invalid.illegal#ff979e—
invalid.unimplemented#ff979e—
carriage-return#ffffff—
message.error#ff979e—
string source#b3b5cf—
string variable#71b7ff—
source.regexp, string.regexp#ace9ff—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#ace9ff—
string.regexp constant.character.escape#73ff88—
support.constant#71b7ff—
support.variable#71b7ff—
meta.module-reference#71b7ff—
punctuation.definition.list.begin.markdown#ffb661—
markup.heading, markup.heading entity.name#71b7ff—
markup.quote#73ff88—
markup.italic#b3b5cf—
markup.bold#b3b5cf—
markup.raw#71b7ff—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ff979e—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#73ff88—
markup.changed, punctuation.definition.changed#ffb661—
markup.ignored, markup.untracked#2e335f—
meta.diff.range#bd92ff—
meta.diff.header#71b7ff—
meta.separator#71b7ff—
meta.output#71b7ff—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#b3b5cf—
brackethighlighter.unmatched#ff979e—
constant.other.reference.link, string.other.link#ace9ff—