Skip to content

last.fm Dark Mode by lukethacoder

Screenshot of last.fm Dark Mode

Details

Authorlukethacoder

LicenseNo License

Categorylast.fm

Created

Updated

Size4.5 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark theme for last.fm

Notes

Please raise any issues on Github

Source code

/* ==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);
  }
}

Reviews

No reviews yet.