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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...