Skip to main content
CodingTheme

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.background#272226
  • activityBar.border#20202060
  • activityBar.foreground#FFC0D8
  • activityBar.inactiveForeground#ffc0d886
  • activityBarBadge.background#dadada
  • activityBarBadge.foreground#202020
  • badge.background#ffc0d8f5
  • badge.foreground#202020
  • breadcrumb.activeSelectionForeground#462e44
  • breadcrumb.background#202020
  • breadcrumb.focusForeground#dadada
  • breadcrumb.foreground#534252
  • breadcrumbPicker.background#202020
  • button.background#462e4450
  • contrastBorder#462e4440
  • debugIcon.breakpointForeground#FFC0D8
  • debugToolBar.background#202020
  • diffEditor.insertedTextBackground#20202015
  • diffEditor.removedTextBackground#dadada20
  • dropdown.background#202020
  • dropdown.border#C0184810
  • editor.background#202020
  • editor.findMatchBackground#ffc0d833
  • editor.findMatchBorder#20202000
  • editor.findMatchHighlightBackground#e6697e23
  • editor.findMatchHighlightBorder#e6697e00
  • editor.foreground#dadada
  • editor.lineHighlightBackground#272226
  • editor.selectionBackground#aaaae630
  • editor.selectionHighlightBackground#462e448f
  • editor.selectionHighlightBorder#e6697e00
  • editorBracketMatch.background#202020
  • editorBracketMatch.border#FFC0D87f
  • editorCursor.foreground#FFC0D8
  • editorError.foreground#dadada70
  • editorGroup.border#20202030
  • editorGroupHeader.tabsBackground#202020
  • editorGutter.addedBackground#20202060
  • editorGutter.deletedBackground#dadada60
  • editorGutter.modifiedBackground#aaaae660
  • editorHoverWidget.background#202020
  • editorHoverWidget.border#C0184810
  • editorIndentGuide.activeBackground#534252
  • editorIndentGuide.background#53425270
  • editorInfo.foreground#aaaae670
  • editorLineNumber.activeForeground#FFC0D8
  • editorLineNumber.foreground#534252c0
  • editorLink.activeForeground#FFC0D8
  • editorMarkerNavigation.background#dadada05
  • editorOverviewRuler.border#202020
  • editorOverviewRuler.errorForeground#dadada40
  • editorOverviewRuler.findMatchForeground#462e44
  • editorOverviewRuler.infoForeground#aaaae640
  • editorOverviewRuler.warningForeground#FFC0D870
  • editorRuler.foreground#462e44d0
  • editorSuggestWidget.background#202020
  • editorSuggestWidget.border#C0184810
  • editorSuggestWidget.foreground#dadada
  • editorSuggestWidget.highlightForeground#FFC0D8
  • editorSuggestWidget.selectedBackground#462e4420
  • editorWarning.foreground#e6697e
  • editorWhitespace.foreground#dadada40
  • editorWidget.background#202020
  • editorWidget.border#FFC0D8
  • editorWidget.resizeBorder#534252
  • extensionButton.prominentBackground#20202090
  • extensionButton.prominentHoverBackground#484860
  • focusBorder#C0184800
  • foreground#bebebe
  • gitDecoration.addedResourceForeground#e4c8cc
  • gitDecoration.conflictingResourceForeground#FFC0D8
  • gitDecoration.deletedResourceForeground#dadada
  • gitDecoration.ignoredResourceForeground#462e44
  • gitDecoration.modifiedResourceForeground#d44f65
  • gitDecoration.untrackedResourceForeground#aaaae6
  • input.background#534252b0
  • input.border#462e442c
  • input.foreground#dadada
  • input.placeholderForeground#dadada60
  • inputOption.activeBackground#dadada30
  • inputOption.activeBorder#dadada30
  • inputValidation.errorBorder#dadada50
  • inputValidation.infoBorder#aaaae650
  • inputValidation.warningBorder#FFC0D850
  • list.activeSelectionBackground#e6697e50
  • list.activeSelectionForeground#dadada
  • list.focusBackground#202020
  • list.focusForeground#dadada30
  • list.highlightForeground#FFC0D8
  • list.hoverBackground#462e44
  • list.hoverForeground#dadada
  • list.inactiveSelectionBackground#20202030
  • list.inactiveSelectionForeground#dadada
  • list.warningForeground#e6697e
  • listFilterWidget.background#20202030
  • listFilterWidget.noMatchesOutline#20202030
  • listFilterWidget.outline#20202030
  • menu.background#202020f8
  • menu.border#462e4450
  • menu.foreground#dadada
  • menu.selectionBackground#202020
  • menu.selectionBorder#20202030
  • menu.selectionForeground#dadada
  • menu.separatorBackground#dadada
  • menubar.selectionBackground#202020
  • menubar.selectionBorder#462e4450
  • menubar.selectionForeground#dadada
  • minimap.background#202020
  • minimap.errorHighlight#e6697e9c
  • minimap.findMatchHighlight#462e4480
  • minimap.selectionHighlight#aaaae66b
  • minimap.warningHighlight#e6697e5f
  • minimapGutter.addedBackground#dadada
  • minimapGutter.deletedBackground#FFC0D8
  • minimapGutter.modifiedBackground#462e44
  • minimapSlider.activeBackground#462e4488
  • minimapSlider.background#462e4444
  • minimapSlider.hoverBackground#462e4488
  • notificationLink.foreground#C01848
  • notifications.background#202020
  • notifications.foreground#dadada
  • panel.background#202020
  • panel.border#462e448c
  • panelSection.dropBackground#462e44aa
  • panelSectionHeader.background#202020
  • panelTitle.activeBorder#462e44
  • panelTitle.activeForeground#C01848
  • panelTitle.inactiveForeground#dadada
  • peekView.border#20202030
  • peekViewEditor.background#dadada05
  • peekViewEditor.matchHighlightBackground#462e4450
  • peekViewEditorGutter.background#dadada05
  • peekViewResult.background#dadada05
  • peekViewResult.matchHighlightBackground#462e4450
  • peekViewResult.selectionBackground#462e4470
  • peekViewTitle.background#dadada05
  • peekViewTitleDescription.foreground#dadada60
  • pickerGroup.foreground#462e44
  • progressBar.background#462e44
  • scrollbar.shadow#1f1b1e
  • scrollbarSlider.activeBackground#462e44ee
  • scrollbarSlider.background#462e4488
  • scrollbarSlider.hoverBackground#462e44ee
  • selection.background#462e44
  • settings.checkboxBackground#202020
  • settings.checkboxForeground#dadada
  • settings.dropdownBackground#202020
  • settings.dropdownForeground#dadada
  • settings.headerForeground#462e44
  • settings.modifiedItemIndicator#462e44
  • settings.numberInputBackground#202020
  • settings.numberInputForeground#dadada
  • settings.textInputBackground#202020
  • settings.textInputForeground#dadada
  • sideBar.background#202020
  • sideBar.border#462e4450
  • sideBar.foreground#bebebe
  • sideBarSectionHeader.background#272226
  • sideBarSectionHeader.border#20202060
  • sideBarSectionHeader.foreground#bebebe
  • sideBarTitle.foreground#dadada
  • statusBar.background#FFC0D8
  • statusBar.border#20202060
  • statusBar.debuggingBackground#e6697e
  • statusBar.debuggingForeground#462e44
  • statusBar.foreground#462e44
  • statusBar.noFolderBackground#202020
  • statusBarItem.hoverBackground#462e4420
  • statusBarItem.remoteBackground#FFC0D8
  • statusBarItem.remoteForeground#202020
  • tab.activeBackground#462e44b0
  • tab.activeBorder#462e44
  • tab.activeForeground#C01848
  • tab.activeModifiedBorder#462e44
  • tab.border#202020
  • tab.inactiveBackground#272226
  • tab.inactiveForeground#dadadaaf
  • tab.unfocusedActiveBackground#462e4440
  • tab.unfocusedActiveBorder#462e44
  • tab.unfocusedActiveForeground#dadada
  • tab.unfocusedInactiveBackground#462e4410
  • tab.unfocusedInactiveForeground#dadada7f
  • terminal.ansiBlack#161616
  • terminal.ansiBlue#5474b8
  • terminal.ansiBrightBlack#696969
  • terminal.ansiBrightBlue#8ca4db
  • terminal.ansiBrightCyan#a7d8eb
  • terminal.ansiBrightGreen#8adb98
  • terminal.ansiBrightMagenta#d992de
  • terminal.ansiBrightRed#d15c5c
  • terminal.ansiBrightWhite#e2e2e2
  • terminal.ansiBrightYellow#e3cb7b
  • terminal.ansiCyan#6b9fb3
  • terminal.ansiGreen#55a171
  • terminal.ansiMagenta#9a62a3
  • terminal.ansiRed#995c5e
  • terminal.ansiWhite#d3d3d3
  • terminal.ansiYellow#c7ad56
  • terminalCursor.background#202020
  • terminalCursor.foreground#FFC0D8
  • textLink.activeForeground#FFC0D8
  • textLink.foreground#C01848
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#dadada
  • titleBar.border#20202060
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#462e44
  • tree.indentGuidesStroke#462e44d0
  • widget.shadow#1f1b1e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
storage.modifier, string constant.other.placeholder, storage.type, keyword, invalid.deprecated#C01848
comment, punctuation.definition.comment#534252italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#202020
constant.other.php, constant.other.color#C01848
invalid, invalid.illegal#bebebe
Keyword, Storage
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#C01848
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#C01848
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#dadada
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#dadada
text.html.derivative#bebebe
entity.name.tag, keyword.operator, meta.tag.sgml, support.class.component.svelte, markup.deleted.git_gutter#bebebe
entity.name.tag.html
variable.parameter.js, variable.parameter.keyframe-list.css, variable.function, entity.name.function, meta.class-method.js entity.name.function.js, variable.function.constructor#FFC0D8
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#d44f65
string, string.quoted.double.html, string.quoted.single.scss, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, keyword.other.special-method, markup.bold, markup.bold.markdown, markup.italic.markdown, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control, markup.fenced_code.block#aaaae6
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#462e44d0
support.other.variable, string.other.link, markup.table#dadada
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#aaaae6
variable.parameter.function.language.special, variable.parameter, variable#dadada
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#202020
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html#FFC0D8
support.type#aaaae6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#d44f65
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#dadada
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#aaaae6
entity.other.attribute-name, support.function#FFC0D8
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#bebebe
source.scss keyword.control#FFC0D8
markup.inserted#202020
markup.deleted#bebebe
markup.changed#FFC0D8
string.regexp#462e44d0
constant.character.escape#bebebe
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js, support.type.property-name.json#e4c8cc
text.html.markdown, punctuation.definition.list_item.markdown#dadada
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#FFC0D8
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#d44f65bold
markup.underline#aaaae6underline
markup.quote punctuation.definition.blockquote.markdown#462e4450
markup.quote
string.other.link.description.title.markdown#FFC0D8
constant.other.reference.link.markdown#FFC0D8
markup.raw.block#FFC0D8
punctuation.definition.raw.markdown, punctuation.definition.markdown#462e44d0
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.parameters, punctuation.definition.block#dadada
variable.language.fenced.markdown#462e44
meta.separator#bebebebold
token.info-token#462e44
token.warn-token#FFC0D8
token.error-token#e6697e
token.debug-token#462e44d0

Shiki preview

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

Loading...

Hololive EN by Holo_love - VS Code Theme