Dark theme for last.fm
last.fm Dark Mode by lukethacoder

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
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);
}
}