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#ebecfc
  • activityBar.border#b3b5cf
  • activityBar.foreground#444775
  • activityBar.inactiveForeground#9799b8
  • activityBarBadge.background#fc0373
  • activityBarBadge.foreground#ebecfc
  • badge.background#ffccff
  • badge.foreground#890022
  • breadcrumb.activeSelectionForeground#60628b
  • breadcrumb.focusForeground#444775
  • breadcrumb.foreground#7c7ea2
  • breadcrumbPicker.background#ebecfc
  • button.background#00bdc9
  • button.foreground#ebecfc
  • button.hoverBackground#70ffff
  • checkbox.background#ebecfc
  • checkbox.border#b3b5cf
  • debugToolBar.background#ebecfc
  • descriptionForeground#7c7ea2
  • diffEditor.insertedTextBackground#34d05833
  • diffEditor.removedTextBackground#b2003140
  • dropdown.background#ebecfc
  • dropdown.border#b3b5cf
  • dropdown.foreground#444775
  • dropdown.listBackground#ebecfc
  • editor.background#ebecfc
  • editor.findMatchBackground#ffdf5d
  • editor.findMatchHighlightBackground#ffdf5d66
  • editor.focusedStackFrameHighlightBackground#ffffc1
  • editor.foldBackground#ebecfc
  • editor.foreground#282b5e
  • editor.inactiveSelectionBackground#c200481a
  • editor.lineHighlightBackground#cfd0e5
  • editor.selectionBackground#c2004833
  • editor.selectionHighlightBackground#03f0fc4d
  • editor.selectionHighlightBorder#03f0fc00
  • editor.stackFrameHighlightBackground#fffff6
  • editor.wordHighlightBackground#03f0fc00
  • editor.wordHighlightBorder#008c9899
  • editor.wordHighlightStrongBackground#03f0fc00
  • editor.wordHighlightStrongBorder#008c984d
  • editorBracketMatch.background#03f0fc4d
  • editorBracketMatch.border#03f0fc00
  • editorCursor.foreground#550000
  • editorGroup.border#b3b5cf
  • editorGroupHeader.tabsBackground#cfd0e5
  • editorGroupHeader.tabsBorder#b3b5cf
  • editorGutter.addedBackground#009e29
  • editorGutter.deletedBackground#b20031
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#b3b5cf
  • editorIndentGuide.background#cfd0e5
  • editorLineNumber.activeForeground#282b5e
  • editorLineNumber.foreground#b3b5cf
  • editorOverviewRuler.border#ebecfc
  • editorWhitespace.foreground#b3b5cf
  • editorWidget.background#cfd0e5
  • errorForeground#7a000b
  • focusBorder#fc0373
  • foreground#60628b
  • gitDecoration.addedResourceForeground#009e29
  • gitDecoration.conflictingResourceForeground#8b2800
  • gitDecoration.deletedResourceForeground#b20031
  • gitDecoration.ignoredResourceForeground#9799b8
  • gitDecoration.modifiedResourceForeground#003499
  • gitDecoration.submoduleResourceForeground#9799b8
  • gitDecoration.untrackedResourceForeground#009e29
  • input.background#ebecfc
  • input.border#b3b5cf
  • input.foreground#444775
  • input.placeholderForeground#9799b8
  • list.activeSelectionBackground#9799b8
  • list.activeSelectionForeground#444775
  • list.focusBackground#ffffff
  • list.hoverBackground#cfd0e5
  • list.hoverForeground#444775
  • list.inactiveFocusBackground#ffccff
  • list.inactiveSelectionBackground#b3b5cf
  • list.inactiveSelectionForeground#444775
  • notificationCenterHeader.background#b3b5cf
  • notificationCenterHeader.foreground#7c7ea2
  • notifications.background#ebecfc
  • notifications.border#b3b5cf
  • notifications.foreground#444775
  • notificationsErrorIcon.foreground#b20031
  • notificationsInfoIcon.foreground#003499
  • notificationsWarningIcon.foreground#8b2800
  • panel.background#cfd0e5
  • panel.border#b3b5cf
  • panelInput.border#b3b5cf
  • panelTitle.activeBorder#3ef9d0
  • panelTitle.activeForeground#444775
  • panelTitle.inactiveForeground#7c7ea2
  • pickerGroup.border#b3b5cf
  • pickerGroup.foreground#444775
  • progressBar.background#fc0373
  • quickInput.background#ebecfc
  • quickInput.foreground#444775
  • scrollbar.shadow#cfd0e5
  • scrollbarSlider.activeBackground#b3b5cf99
  • scrollbarSlider.background#b3b5cf33
  • scrollbarSlider.hoverBackground#b3b5cf40
  • settings.headerForeground#444775
  • settings.modifiedItemIndicator#2188ff
  • sideBar.background#cfd0e5
  • sideBar.border#b3b5cf
  • sideBar.foreground#60628b
  • sideBarSectionHeader.background#cfd0e5
  • sideBarSectionHeader.border#b3b5cf
  • sideBarSectionHeader.foreground#444775
  • sideBarTitle.foreground#444775
  • statusBar.background#ebecfc
  • statusBar.border#b3b5cf
  • statusBar.debuggingBackground#ffffff
  • statusBar.debuggingForeground#ebecfc
  • statusBar.foreground#60628b
  • statusBar.noFolderBackground#ebecfc
  • tab.activeBackground#ebecfc
  • tab.activeBorder#ebecfc
  • tab.activeBorderTop#3ef9d0
  • tab.activeForeground#444775
  • tab.border#b3b5cf
  • tab.hoverBackground#ebecfc
  • tab.inactiveBackground#cfd0e5
  • tab.inactiveForeground#7c7ea2
  • tab.unfocusedActiveBorder#ebecfc
  • tab.unfocusedActiveBorderTop#b3b5cf
  • tab.unfocusedHoverBackground#ebecfc
  • terminal.foreground#60628b
  • textBlockQuote.background#ebecfc
  • textBlockQuote.border#b3b5cf
  • textCodeBlock.background#cfd0e5
  • textLink.activeForeground#890022
  • textLink.foreground#c20048
  • textPreformat.foreground#60628b
  • textSeparator.foreground#b3b5cf
  • titleBar.activeBackground#ebecfc
  • titleBar.activeForeground#444775
  • titleBar.border#b3b5cf
  • titleBar.inactiveBackground#cfd0e5
  • titleBar.inactiveForeground#7c7ea2
  • tree.indentGuidesStroke#b3b5cf
  • welcomePage.buttonBackground#cfd0e5
  • welcomePage.buttonHoverBackground#b3b5cf

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#003499—
entity, entity.name#5837a0—
variable.parameter.function#282b5e—
entity.name.tag#006d00—
keyword#b20031—
storage, storage.type#b20031—
storage.modifier.package, storage.modifier.import, storage.type.java#282b5e—
string, punctuation.definition.string, string punctuation.section.embedded source#00003f—
support#003499—
meta.property-name#003499—
variable#8b2800—
variable.other#282b5e—
invalid.broken#4a0000—
invalid.deprecated#4a0000—
invalid.illegal#4a0000—
invalid.unimplemented#4a0000—
carriage-return#ffffff—
message.error#4a0000—
string source#282b5e—
string variable#003499—
source.regexp, string.regexp#00003f—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#00003f—
string.regexp constant.character.escape#006d00—
support.constant#003499—
support.variable#003499—
meta.module-reference#003499—
punctuation.definition.list.begin.markdown#8b2800—
markup.heading, markup.heading entity.name#003499—
markup.quote#006d00—
markup.italic#282b5e—
markup.bold#282b5e—
markup.raw#003499—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#4a0000—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#006d00—
markup.changed, punctuation.definition.changed#8b2800—
markup.ignored, markup.untracked#cfd0e5—
meta.diff.range#5837a0—
meta.diff.header#003499—
meta.separator#003499—
meta.output#003499—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#60628b—
brackethighlighter.unmatched#4a0000—
constant.other.reference.link, string.other.link#00003f—