Skip to main content
Coding Theme

Valentine's Day

Publisher: diathemesThemes in package: 1

Dark VS Code theme with pink, red, white, and yellow colors that vaguely remind you of Valentine's Day.

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#5F1616
  • activityBar.border#5F161660
  • activityBar.foreground#FB8F8F
  • activityBarBadge.background#FFD2D2
  • activityBarBadge.foreground#5F1616
  • badge.background#5F161630
  • badge.foreground#FF6565
  • breadcrumb.activeSelectionForeground#FF6565
  • breadcrumb.background#5F1616
  • breadcrumb.focusForeground#FB8F8F
  • breadcrumb.foreground#FF9090
  • breadcrumbPicker.background#5F1616
  • button.background#FF656550
  • contrastBorder#FF656540
  • debugToolBar.background#5F1616
  • diffEditor.insertedTextBackground#1BBCB215
  • diffEditor.removedTextBackground#DABDFF20
  • dropdown.background#5F1616
  • dropdown.border#FFD6D610
  • editor.background#5F1616
  • editor.findMatchBackground#5F1616
  • editor.findMatchBorder#FF6565
  • editor.findMatchHighlightBackground#FF656593
  • editor.findMatchHighlightBorder#FFD6D630
  • editor.foreground#FB8F8F
  • editor.lineHighlightBackground#5F161650
  • editor.selectionBackground#FFD2D230
  • editor.selectionHighlightBackground#FF65656b
  • editor.selectionHighlightBorder#FFD2D2f0
  • editorBracketMatch.background#5F1616
  • editorBracketMatch.border#55FFF47f
  • editorCursor.foreground#55FFF4
  • editorError.foreground#DABDFF70
  • editorGroup.border#5F161630
  • editorGroupHeader.tabsBackground#5F1616
  • editorGutter.addedBackground#1BBCB260
  • editorGutter.deletedBackground#DABDFF60
  • editorGutter.modifiedBackground#FFD2D260
  • editorHoverWidget.background#5F1616
  • editorHoverWidget.border#FFD6D610
  • editorIndentGuide.activeBackground#ED6464
  • editorIndentGuide.background#ED646470
  • editorInfo.foreground#FFD2D270
  • editorLineNumber.activeForeground#FFD2D2
  • editorLineNumber.foreground#FF6565c0
  • editorLink.activeForeground#FB8F8F
  • editorMarkerNavigation.background#FB8F8F05
  • editorOverviewRuler.border#5F1616
  • editorOverviewRuler.errorForeground#DABDFF40
  • editorOverviewRuler.findMatchForeground#FF6565
  • editorOverviewRuler.infoForeground#FFD2D240
  • editorOverviewRuler.warningForeground#55FFF470
  • editorRuler.foreground#ED6464
  • editorSuggestWidget.background#5F1616
  • editorSuggestWidget.border#FFD6D610
  • editorSuggestWidget.foreground#FB8F8F
  • editorSuggestWidget.highlightForeground#55FFF4
  • editorSuggestWidget.selectedBackground#FF656520
  • editorWarning.foreground#1BBCB2
  • editorWhitespace.foreground#FB8F8F40
  • editorWidget.background#5F1616
  • editorWidget.border#55FFF4
  • editorWidget.resizeBorder#FF6565
  • extensionButton.prominentBackground#1BBCB290
  • extensionButton.prominentHoverBackground#DABDFF
  • focusBorder#FFD6D600
  • gitDecoration.conflictingResourceForeground#55FFF4
  • gitDecoration.deletedResourceForeground#DABDFF
  • gitDecoration.ignoredResourceForeground#FF6565
  • gitDecoration.modifiedResourceForeground#FF9090
  • gitDecoration.untrackedResourceForeground#FFD2D2
  • input.background#A93C3C
  • input.border#FFD6D610
  • input.foreground#FB8F8F
  • input.placeholderForeground#FB8F8F60
  • inputOption.activeBackground#FB8F8F30
  • inputOption.activeBorder#FB8F8F30
  • inputValidation.errorBorder#DABDFF50
  • inputValidation.infoBorder#FFD2D250
  • inputValidation.warningBorder#55FFF450
  • list.activeSelectionBackground#5F1616
  • list.activeSelectionForeground#FF6565
  • list.focusBackground#A93C3C
  • list.focusForeground#FFD2D2
  • list.highlightForeground#FF6565
  • list.hoverBackground#ED6464
  • list.hoverForeground#FFD6D6
  • list.inactiveSelectionBackground#5F161630
  • list.inactiveSelectionForeground#FF6565
  • list.warningForeground#55FFF4
  • listFilterWidget.background#5F161630
  • listFilterWidget.noMatchesOutline#5F161630
  • listFilterWidget.outline#5F161630
  • menu.background#5F1616f8
  • menu.border#FF656550
  • menu.foreground#FB8F8F
  • menu.selectionBackground#A93C3C
  • menu.selectionBorder#5F161630
  • menu.selectionForeground#FB8F8F
  • menu.separatorBackground#FB8F8F
  • menubar.selectionBackground#A93C3C
  • menubar.selectionBorder#FF656550
  • menubar.selectionForeground#FB8F8F
  • minimap.background#5F1616
  • minimapGutter.addedBackground#DABDFF
  • minimapGutter.deletedBackground#55FFF4
  • minimapGutter.modifiedBackground#1BBCB2
  • minimapSlider.activeBackground#1BBCB2b0
  • minimapSlider.background#1BBCB280
  • minimapSlider.hoverBackground#1BBCB2a0
  • notificationLink.foreground#FF6565
  • notifications.background#5F1616
  • notifications.foreground#FB8F8F
  • panel.background#5F1616
  • panel.border#5F161660
  • panelTitle.activeBorder#FF6565
  • panelTitle.activeForeground#FFD6D6
  • panelTitle.inactiveForeground#FB8F8F
  • peekView.border#5F161630
  • peekViewEditor.background#FB8F8F05
  • peekViewEditor.matchHighlightBackground#FF656550
  • peekViewEditorGutter.background#FB8F8F05
  • peekViewResult.background#FB8F8F05
  • peekViewResult.matchHighlightBackground#FF656550
  • peekViewResult.selectionBackground#FF656570
  • peekViewTitle.background#FB8F8F05
  • peekViewTitleDescription.foreground#FB8F8F60
  • pickerGroup.foreground#FF6565
  • progressBar.background#FF6565
  • scrollbar.shadow#5F161600
  • scrollbarSlider.activeBackground#FF6565cc
  • scrollbarSlider.background#FF6565bb
  • scrollbarSlider.hoverBackground#FF6565ee
  • selection.background#FF6565
  • settings.checkboxBackground#5F1616
  • settings.checkboxForeground#FB8F8F
  • settings.dropdownBackground#5F1616
  • settings.dropdownForeground#FB8F8F
  • settings.headerForeground#FF6565
  • settings.modifiedItemIndicator#FF6565
  • settings.numberInputBackground#5F1616
  • settings.numberInputForeground#FB8F8F
  • settings.textInputBackground#5F1616
  • settings.textInputForeground#FB8F8F
  • sideBar.background#5F1616
  • sideBar.border#FF656550
  • sideBar.foreground#FFD2D2
  • sideBarSectionHeader.background#5F1616
  • sideBarSectionHeader.border#5F161660
  • sideBarSectionHeader.foreground#FFD2D2
  • sideBarTitle.foreground#FB8F8F
  • statusBar.background#FFFFFF
  • statusBar.border#5F161660
  • statusBar.debuggingBackground#55FFF4
  • statusBar.debuggingForeground#FFD6D6
  • statusBar.foreground#83A7FF
  • statusBar.noFolderBackground#5F1616
  • statusBarItem.hoverBackground#FF656520
  • statusBarItem.remoteBackground#FF6565
  • statusBarItem.remoteForeground#5F1616
  • tab.activeBackground#FF656550
  • tab.activeBorder#FF6565
  • tab.activeForeground#FFD6D6
  • tab.activeModifiedBorder#FF6565
  • tab.border#5F1616
  • tab.inactiveBackground#FF656520
  • tab.inactiveForeground#FB8F8Faf
  • tab.unfocusedActiveBackground#FF656540
  • tab.unfocusedActiveBorder#FF6565
  • tab.unfocusedActiveForeground#FB8F8F
  • tab.unfocusedInactiveBackground#FF656510
  • tab.unfocusedInactiveForeground#FB8F8F7f
  • terminal.ansiBlack#5F1616
  • terminal.ansiBlue#FFD2D2
  • terminal.ansiBrightBlack#FF6565
  • terminal.ansiBrightBlue#FFD2D2
  • terminal.ansiBrightCyan#FFFFFF
  • terminal.ansiBrightGreen#1BBCB2
  • terminal.ansiBrightMagenta#55FFF4
  • terminal.ansiBrightRed#DABDFF
  • terminal.ansiBrightWhite#FFD6D6
  • terminal.ansiBrightYellow#55FFF4
  • terminal.ansiCyan#FFFFFF
  • terminal.ansiGreen#1BBCB2
  • terminal.ansiMagenta#55FFF4
  • terminal.ansiRed#DABDFF
  • terminal.ansiWhite#FFD6D6
  • terminal.ansiYellow#55FFF4
  • terminalCursor.background#5F1616
  • terminalCursor.foreground#55FFF4
  • textLink.activeForeground#FB8F8F
  • textLink.foreground#FF6565
  • titleBar.activeBackground#5F1616
  • titleBar.activeForeground#FB8F8F
  • titleBar.border#5F161660
  • titleBar.inactiveBackground#5F1616
  • titleBar.inactiveForeground#FF6565
  • tree.indentGuidesStroke#ED6464
  • widget.shadow#5F161630

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#55FFF4
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#1BBCB2
constant.other.php#55FFF4
constant.other.color#FFD6D6
invalid, invalid.illegal#DABDFF
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#A7A8AF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#FF9090
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#FB8F8F
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FB8F8F
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#55FFF4
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#FF9090
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#FFD2D2
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#FFFFFF
support.other.variable, string.other.link, markup.table#FB8F8F
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#55FFF4
variable.parameter.function.language.special, variable.parameter#DABDFF
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#1BBCB2
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#55FFF4
support.type#B2CCD6
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#FF9090
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#DABDFF
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFD2D2italic
entity.other.attribute-name, support.function#55FFF4
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#FB8F8F
source.scss keyword.control#55FFF4
markup.inserted#1BBCB2
markup.deleted#DABDFF
markup.changed#55FFF4
string.regexp#FFFFFF
constant.character.escape#FFFFFF
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#FB8F8Fitalic
support.type.property-name.json#FB8F8F
text.html.markdown, punctuation.definition.list_item.markdown#FB8F8F
text.html.markdown markup.inline.raw.markdown#55FFF4
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#FF656550
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#FF9090bold
markup.underline#FFD2D2underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#FF656550
markup.quoteitalic
string.other.link.description.title.markdown#55FFF4
constant.other.reference.link.markdown#55FFF4
markup.raw.block#55FFF4
punctuation.definition.raw.markdown, punctuation.definition.markdown#FFFFFF
variable.language.fenced.markdown#FF6565
meta.separator#A7A8AFbold
token.info-token#FF6565
token.warn-token#55FFF4
token.error-token#FF293B
token.debug-token#FFFFFF

Shiki preview

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

Loading...

Valentine's Day - Coding Theme