last.fm Dark Mode by lukethacoder

/* ==UserStyle==
@name           last.fm
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Dark theme for last.fm
@author         https://lukesecomb.digital
==/UserStyle== */

@-moz-document domain("last.fm") {
  :root,
  :host {
    --primary-color: oklch(0.57 0.21 27.5);
    --highlight-color: oklch(0.29 0.1 26.05);
    --bg-color: oklch(0.19 0 0);
    --bg-color-secondary: oklch(from var(--bg-color) calc(l/2 + 0.15) c h);
    --text-color: oklch(1 0 0);
    --text-color-secondary: oklch(0.68 0 0);
    --text-color-tertiary: oklch(0.49 0 0);
    --text-disabled-color: oklch(0.68 0 0);
    --border-color: oklab(0.35 0 0);
    --link-color: oklch(0.64 0.2 252.91);

    --bg-color-invert: oklch(0.94 0 0);
    --text-color-invert: oklch(0 0 0);
    --border-color-invert: oklch(0.82 0 0);
  }

  body {
    color: var(--text-color);
    background-color: var(--bg-color);
  }

  a,
  .more-items {
    color: var(--link-color);
  }

  .catalogue-tags .tag a,
  .catalogue-tags .tags-add,
  .catalogue-tags .tags-add-cta {
    color: var(--link-color);
    box-shadow: inset 0 0 0 1px
      oklch(from var(--link-color) calc(l/2 + 0.2) c h);
  }

  .shout-user a {
    color: var(--text-color-secondary);
  }

  .chartlist-count-bar-slug {
    background-color: var(--primary-color);
  }

  .header--overview,
  .main-content,
  .adaptive-skin-container,
  .adaptive-skin-wrapper,
  .page-content {
    background-color: var(--bg-color);
    color: var(--text-color);
  }

  .chartlist-row--highlight,
  .chartlist-row--now-scrobbling {
    background-color: var(--highlight-color);
  }

  .chartlist-row:hover {
    background-color: oklch(from var(--highlight-color) calc(l/2 + 0.2) c h);
  }

  .header-metadata .header-metadata-title {
    color: var(--text-color-secondary);
  }
  .header--overview .header-info-secondary {
    color: var(--text-color-tertiary);
  }

  .promo-v3 .listening-report-promo {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
  }

  .promo-v3 .listening-report-promo:focus,
  .promo-v3 .listening-report-promo:hover {
    background-color: var(--bg-color-secondary);
  }

  .share-chart .share-block,
  .dropdown-menu-clickable,
  .recs-feed .context {
    background-color: var(--bg-color-secondary);
  }

  .recs-feed .context {
    box-shadow: none;
    color: var(--text-color-secondary);
  }

  .full-bleed-ad-container,
  .sidebar-ad-container,
  .section-with-separator:after,
  .content-top-has-nav .content-top,
  .two-column-layout .content-top,
  .dropdown-menu-clickable-item:active,
  body:not([data-whatinput='touch']) .dropdown-menu-clickable-item:focus,
  body:not([data-whatinput='touch']) .dropdown-menu-clickable-item:hover,
  .subscribe-cta,
  .container.content-top-lower,
  .modal-body {
    background-color: var(--bg-color);
  }

  .content-form select {
    background-color: var(--bg-color-invert);
    color: var(--text-color-invert);
    border-color: var(--border-color-invert);
    filter: invert(1);
  }
  .content-form select option {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
  }

  .dropdown-menu-clickable-button:focus,
  .dropdown-menu-clickable-button:hover,
  .dropdown-menu-clickable-item {
    color: var(--text-color);
  }

  .dropdown-menu-clickable-item:hover {
    color: var(--primary-color);
  }

  .dropdown-menu-clickable-button:after,
  .share-chart .share-button-profile:before,
  .section-settings-toggle:before,
  .share-option,
  .promo-v3 .listening-report-promo-date {
    filter: invert(1);
  }

  .promo-v3 .listening-report-promo-date {
    color: var(--text-color-invert);
  }

  .content-form .form-control,
  .content-form input[type='date'],
  .content-form input[type='email'],
  .content-form input[type='number'],
  .content-form input[type='password'],
  .content-form input[type='text'],
  .content-form input[type='url'],
  .content-form select,
  .content-form textarea {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
  }

  .section-with-settings .section-control:before,
  .stationlink-list .stationlink:after,
  .shout-form,
  .shout,
  .chartlist-break:after,
  .chartlist-row:after,
  .content-top-has-nav .content-top:after,
  .two-column-layout .content-top:after,
  .user-list-shared-artists {
    border-color: var(--border-color);
  }
}