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#261c2c
  • activityBar.border#2d273660
  • activityBar.foreground#cda2d5
  • activityBar.inactiveForeground#cda2d586
  • activityBarBadge.background#dbd3e4
  • activityBarBadge.foreground#2d2736
  • badge.background#cda2d5f5
  • badge.foreground#2d2736
  • breadcrumb.activeSelectionForeground#50446c
  • breadcrumb.background#2d2736
  • breadcrumb.focusForeground#dbd3e4
  • breadcrumb.foreground#594e67
  • breadcrumbPicker.background#2d2736
  • button.background#50446c50
  • contrastBorder#50446c40
  • debugIcon.breakpointForeground#cda2d5
  • debugToolBar.background#2d2736
  • diffEditor.insertedTextBackground#2d273615
  • diffEditor.removedTextBackground#dbd3e420
  • dropdown.background#2d2736
  • dropdown.border#b561e610
  • editor.background#2d2736
  • editor.findMatchBackground#cda2d533
  • editor.findMatchBorder#2d273600
  • editor.findMatchHighlightBackground#261c2c80
  • editor.findMatchHighlightBorder#2d273600
  • editor.foreground#dbd3e4
  • editor.lineHighlightBackground#261c2c70
  • editor.selectionBackground#ffbb7930
  • editor.selectionHighlightBackground#50446c8f
  • editor.selectionHighlightBorder#ea927100
  • editorBracketMatch.background#2d2736
  • editorBracketMatch.border#cda2d57f
  • editorCursor.foreground#cda2d5
  • editorError.foreground#dbd3e470
  • editorGroup.border#2d273630
  • editorGroupHeader.tabsBackground#2d2736
  • editorGutter.addedBackground#2d273660
  • editorGutter.deletedBackground#dbd3e460
  • editorGutter.modifiedBackground#ffbb7960
  • editorHoverWidget.background#2d2736
  • editorHoverWidget.border#b561e610
  • editorIndentGuide.activeBackground#594e67
  • editorIndentGuide.background#594e6770
  • editorInfo.foreground#ffbb7970
  • editorLineNumber.activeForeground#cda2d5
  • editorLineNumber.foreground#594e67c0
  • editorLink.activeForeground#cda2d5
  • editorMarkerNavigation.background#dbd3e405
  • editorOverviewRuler.border#2d2736
  • editorOverviewRuler.errorForeground#dbd3e440
  • editorOverviewRuler.findMatchForeground#50446c
  • editorOverviewRuler.infoForeground#ffbb7940
  • editorOverviewRuler.warningForeground#cda2d570
  • editorRuler.foreground#50446cd0
  • editorSuggestWidget.background#2d2736
  • editorSuggestWidget.border#b561e610
  • editorSuggestWidget.foreground#dbd3e4
  • editorSuggestWidget.highlightForeground#cda2d5
  • editorSuggestWidget.selectedBackground#50446c20
  • editorWarning.foreground#ea9271
  • editorWhitespace.foreground#dbd3e440
  • editorWidget.background#2d2736
  • editorWidget.border#cda2d5
  • editorWidget.resizeBorder#594e67
  • extensionButton.prominentBackground#2d273690
  • extensionButton.prominentHoverBackground#484860
  • focusBorder#b561e600
  • foreground#c2bac9
  • gitDecoration.addedResourceForeground#a77fa0
  • gitDecoration.conflictingResourceForeground#cda2d5
  • gitDecoration.deletedResourceForeground#dbd3e4
  • gitDecoration.ignoredResourceForeground#50446c
  • gitDecoration.modifiedResourceForeground#afc4e2
  • gitDecoration.untrackedResourceForeground#ffbb79
  • input.background#594e67b0
  • input.border#50446c2c
  • input.foreground#dbd3e4
  • input.placeholderForeground#dbd3e460
  • inputOption.activeBackground#dbd3e430
  • inputOption.activeBorder#dbd3e430
  • inputValidation.errorBorder#dbd3e450
  • inputValidation.infoBorder#ffbb7950
  • inputValidation.warningBorder#cda2d550
  • list.activeSelectionBackground#ea927150
  • list.activeSelectionForeground#dbd3e4
  • list.focusBackground#2d2736
  • list.focusForeground#dbd3e430
  • list.highlightForeground#cda2d5
  • list.hoverBackground#50446c
  • list.hoverForeground#dbd3e4
  • list.inactiveSelectionBackground#2d273630
  • list.inactiveSelectionForeground#dbd3e4
  • list.warningForeground#ea9271
  • listFilterWidget.background#2d273630
  • listFilterWidget.noMatchesOutline#2d273630
  • listFilterWidget.outline#2d273630
  • menu.background#2d2736f8
  • menu.border#50446c50
  • menu.foreground#dbd3e4
  • menu.selectionBackground#2d2736
  • menu.selectionBorder#2d273630
  • menu.selectionForeground#dbd3e4
  • menu.separatorBackground#dbd3e4
  • menubar.selectionBackground#2d2736
  • menubar.selectionBorder#50446c50
  • menubar.selectionForeground#dbd3e4
  • minimap.background#2d2736
  • minimap.errorHighlight#ea92719c
  • minimap.findMatchHighlight#cda2d580
  • minimap.selectionHighlight#ffbb796b
  • minimap.warningHighlight#ea92715f
  • minimapGutter.addedBackground#dbd3e4
  • minimapGutter.deletedBackground#cda2d5
  • minimapGutter.modifiedBackground#50446c
  • minimapSlider.activeBackground#50446c88
  • minimapSlider.background#50446c44
  • minimapSlider.hoverBackground#50446ca0
  • notificationLink.foreground#b561e6
  • notifications.background#2d2736
  • notifications.foreground#dbd3e4
  • panel.background#2d2736
  • panel.border#50446c8c
  • panelSection.dropBackground#50446caa
  • panelSectionHeader.background#2d2736
  • panelTitle.activeBorder#50446c
  • panelTitle.activeForeground#b561e6
  • panelTitle.inactiveForeground#dbd3e4
  • peekView.border#2d273630
  • peekViewEditor.background#dbd3e405
  • peekViewEditor.matchHighlightBackground#50446c50
  • peekViewEditorGutter.background#dbd3e405
  • peekViewResult.background#dbd3e405
  • peekViewResult.matchHighlightBackground#50446c50
  • peekViewResult.selectionBackground#50446c70
  • peekViewTitle.background#dbd3e405
  • peekViewTitleDescription.foreground#dbd3e460
  • pickerGroup.foreground#50446c
  • progressBar.background#50446c
  • scrollbar.shadow#261c2c
  • scrollbarSlider.activeBackground#50446cee
  • scrollbarSlider.background#50446c88
  • scrollbarSlider.hoverBackground#50446cee
  • selection.background#2d2736
  • settings.checkboxBackground#2d2736
  • settings.checkboxForeground#dbd3e4
  • settings.dropdownBackground#2d2736
  • settings.dropdownForeground#dbd3e4
  • settings.headerForeground#50446c
  • settings.modifiedItemIndicator#50446c
  • settings.numberInputBackground#2d2736
  • settings.numberInputForeground#dbd3e4
  • settings.textInputBackground#2d2736
  • settings.textInputForeground#dbd3e4
  • sideBar.background#2d2736
  • sideBar.border#50446c50
  • sideBar.foreground#c2bac9
  • sideBarSectionHeader.background#261c2c70
  • sideBarSectionHeader.border#2d273660
  • sideBarSectionHeader.foreground#c2bac9
  • sideBarTitle.foreground#dbd3e4
  • statusBar.background#cda2d5
  • statusBar.border#2d273660
  • statusBar.debuggingBackground#ea9271
  • statusBar.debuggingForeground#50446c
  • statusBar.foreground#50446c
  • statusBar.noFolderBackground#2d2736
  • statusBarItem.hoverBackground#50446c20
  • statusBarItem.remoteBackground#cda2d5
  • statusBarItem.remoteForeground#2d2736
  • tab.activeBackground#261c2c
  • tab.activeBorder#50446c
  • tab.activeForeground#b561e6
  • tab.activeModifiedBorder#50446c
  • tab.border#2d2736
  • tab.inactiveBackground#261c2c70
  • tab.inactiveForeground#dbd3e4af
  • tab.unfocusedActiveBackground#261c2c40
  • tab.unfocusedActiveBorder#50446c
  • tab.unfocusedActiveForeground#dbd3e4
  • tab.unfocusedInactiveBackground#261c2c10
  • tab.unfocusedInactiveForeground#dbd3e47f
  • 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#c9ae56
  • terminalCursor.background#2d2736
  • terminalCursor.foreground#cda2d5
  • textLink.activeForeground#cda2d5
  • textLink.foreground#b561e6
  • titleBar.activeBackground#2d2736
  • titleBar.activeForeground#dbd3e4
  • titleBar.border#2d273660
  • titleBar.inactiveBackground#2d2736
  • titleBar.inactiveForeground#50446c
  • tree.indentGuidesStroke#50446cd0
  • widget.shadow#261c2c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
storage.modifier, string constant.other.placeholder, storage.type, keyword, invalid.deprecated#b561e6
comment, punctuation.definition.comment#594e67italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#2d2736
constant.other.php, constant.other.color#b561e6
invalid, invalid.illegal#c2bac9
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#b561e6
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#b561e6
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#dbd3e4
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#dbd3e4
text.html.derivative#c2bac9
entity.name.tag, keyword.operator, meta.tag.sgml, support.class.component.svelte, markup.deleted.git_gutter#c2bac9
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#cda2d5
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#afc4e2
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#ffbb79
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#50446cd0
support.other.variable, string.other.link, markup.table#dbd3e4
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#ffbb79
variable.parameter.function.language.special, variable.parameter, variable#dbd3e4
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#000000
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#cda2d5
support.type#ffbb79
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#afc4e2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#dbd3e4
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ffbb79
entity.other.attribute-name, support.function#cda2d5
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#c2bac9
source.scss keyword.control#cda2d5
markup.inserted#000000
markup.deleted#c2bac9
markup.changed#cda2d5
string.regexp#50446cd0
constant.character.escape#c2bac9
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js, support.type.property-name.json#a77fa0
text.html.markdown, punctuation.definition.list_item.markdown#a77fa0
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#a77fa0
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#afc4e2bold
markup.underline#ffbb79underline
markup.quote punctuation.definition.blockquote.markdown#50446c50
markup.quote
string.other.link.description.title.markdown#cda2d5
constant.other.reference.link.markdown#cda2d5
markup.raw.block#cda2d5
punctuation.definition.raw.markdown, punctuation.definition.markdown#50446cd0
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.parameters, punctuation.definition.block#dbd3e4
variable.language.fenced.markdown#50446c
meta.separator#c2bac9bold
token.info-token#50446c
token.warn-token#cda2d5
token.error-token#ea9271
token.debug-token#50446cd0

Shiki preview

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

Loading...

Hololive EN by Holo_love - VS Code Theme