Skip to content

Strava Dark Mode by macx

Mirrored from https://raw.githubusercontent.com/macx/strava-dark-mode/main/strava-dark-mode.user.css

Homepage Write a review Install Get Stylus

Details

Authormacx

LicenseMIT

Categoryuserstyles, strava, darkmode

Created

Updated

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark Mode for Strava on Desktop

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         Strava Dark Mode
@version      v0.1.0
@namespace    github.com/macx
@description  Dark Mode for Strava on Desktop
@author       macx
@license      MIT
@homepageURL  https://github.com/macx/strava-dark-mode
@supportURL   https://github.com/macx/strava-dark-mode/issues

==/UserStyle== */

@-moz-document domain("strava.com") {
  /* strava.com*/

  :root {
    --clr-bg: #121b20;
    --clr-bg--content: #253640;
    --clr-bg--content2: #1c2830;
    --clr-primary: #fc5200;
    --clr-text: #f1f7fb;
    --clr-text--light: #94a3b8;
    --clr-text--medium: #64748b;
    --clr-navigation: #2e4450;

    --clr-border: rgba(255, 255, 255, 0.2);
  }

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

  /*
  ┌──────────────────────────────────┐
    HEADER
  └──────────────────────────────────┘
  */

  #global-header,
  ._3r8IlbmQT2zCJZ1LnVpdVH {
    background-color: var(--clr-bg--content);
    border-bottom: 0;
    margin-top: 0;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.5);
  }

  #global-header .nav-group .drop-down-menu .selection {
    border-left: 0;
    border-right: 0;
  }

  #global-header .nav-bar .nav-link {
    color: var(--clr-text--light);
  }

  .drop-down-menu a,
  .drop-down-menu .clickable,
  .dropdown a,
  .dropdown .clickable,
  .ActivityEntryBody--activity-entry-container--iYy-k
    .ActivityEntryBody--achievements-summary--bsU2g
    li
    strong,
  #global-header .nav-group .drop-down-menu .selection,
  .drop-down-menu .opt-group.premium a:link,
  .drop-down-menu .opt-group.premium a:visited {
    color: var(--clr-text--light);
  }

  .drop-down-menu .opt-group,
  #global-header .nav-group .drop-down-menu:hover .nav-link,
  #global-header .nav-group .drop-down-menu.active .nav-link {
    border-color: var(--clr-border);
  }

  .LocationAndTime--subtitle-wrapper--6yH0n time,
  .LocationAndTime--subtitle-wrapper--6yH0n .LocationAndTime--location--Djc4K,
  .ActivityEntryBody--activity-entry-container--iYy-k
    .ActivityEntryBody--stats--G90hq
    .ActivityEntryBody--stat-label--47Ktd,
  .ActivityEntryBody--activity-entry-container--iYy-k
    .ActivityEntryBody--achievements-summary--bsU2g
    li
    a.ActivityEntryBody--achievements-link--CZvjJ,
  .ActivityEntryBody--activity-entry-container--iYy-k
    .ActivityEntryBody--achievements-summary--bsU2g,
  .ActivityEntryBody--activity-entry-container--iYy-k
    .ActivityEntryBody--stat-subtext--Vo0Ha,
  .KudosAndComments--kudos-and-comments--RTN8b
    .KudosAndComments--count-button--L2QfK,
  .CommentsThread--comment--ryaZV time {
    color: var(--clr-text--medium);
  }

  .CommentsThread--more-comments-button--MnE\+d {
    color: var(--clr-text) !important;
  }

  #global-header .nav-bar .selected .nav-link,
  .page a:not(.btn):link,
  .page a:not(.btn):visited,
  .page .btn.btn-link:link,
  .page .btn.btn-link:visited {
    color: var(--clr-text);
  }

  .branding {
    background-position: left top;
  }

  #global-search-bar .icon-search {
    background-position: left -46px;
  }

  #global-header .nav-group .drop-down-menu:hover,
  #global-header .nav-group .drop-down-menu.active,
  #global-header .nav-group .drop-down-menu:hover .nav-link,
  #global-header .nav-group .drop-down-menu.active .nav-link,
  .drop-down-menu > ul {
    background-color: var(--clr-navigation);
  }

  .drop-down-menu > ul {
    border-color: rgba(0, 0, 0, 0.5);
  }

  .drop-down-menu .opt-group.premium {
    background-color: var(--clr-content);
  }

  /* Remove upgrade button 😧 */
  .nav-item.upgrade {
    display: none !important;
  }

  /*
  ┌──────────────────────────────────┐
    CONTENT
  └──────────────────────────────────┘
  */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    color: var(--clr-text);
  }

  .stat-subtext {
    color: var(--clr-text--light);
  }

  .ActivityEntryBody--activity-entry-container--iYy-k
    .ActivityEntryBody--activity-name--AGMA5
    a.ActivityEntryBody--activity-name--AGMA5,
  .Activity--card--GP9rq a:not(.Activity--btn--0fOye):link,
  .Activity--card--GP9rq a:not(.Activity--btn--0fOye):visited,
  .Activity--card--GP9rq .Activity--btn--0fOye.Activity--btn-link--JK2Iw:link,
  .Activity--card--GP9rq
    .Activity--btn--0fOye.Activity--btn-link--JK2Iw:visited {
    color: var(--clr-text);
  }

  .CollapsibleSection--subsection--S7K8c .CollapsibleSection--dark--RJ5au,
  .ActivityEntryBody--activity-entry-container--iYy-k
    .ActivityEntryBody--stats--G90hq,
  .Stat--stat--AaawC .Stat--stat-label--RZ\+S4 {
    color: var(--clr-text--light);
  }

  .AthleteJoinEntry--entry-header--O4VRu,
  .AthleteJoinEntry--entry-body--qn4Rv {
    color: var(--clr-text--light);
  }

  .CreatePost--input-wrapper--ZR739 label,
  .Post--author-name--6nfjJ,
  .Comment--author-name--EHv8e {
    color: var(--clr-text--medium);
  }

  .card,
  .Activity--card--GP9rq,
  .GroupActivity--card--oCRxr,
  .Card--card--8qT2W,
  .AthleteJoinEntry--card---CeVY {
    background-color: var(--clr-bg--content);
    background-image: linear-gradient(
      to bottom,
      var(--clr-bg--content),
      var(--clr-bg--content2)
    );
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  }

  /* Archivements */
  .MaharajAchievementCelebration--achievement-celebration--ouMf5 {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom-color: var(--clr-border);
  }

  /* Avatar */
  .EntryHeader--icon-container--f6C3J {
    background-color: transparent;
  }

  .Avatar--badge--dPtDC path:first-child {
    fill: var(--clr-bg);
  }

  .AvatarGroup--avatar--8ZPsx,
  .Facepile--avatar-img--rr1lE {
    border-color: var(--clr-bg);
  }

  /* Leaderboard */
  .Leaderboard--container--PJWVx .Leaderboard--privacy-section--PTdz2,
  div[data-reach-tab-list] {
    background-color: var(--clr-bg--content);
  }

  .CategoryTabs--container--KjQZu [data-reach-tab] {
    border-color: transparent;
  }

  .CategoryTabs--container--KjQZu [data-reach-tab][data-selected] {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
  }

  /* Comments */
  .ActionsDropdown--more-icon--7I3zP:after {
    filter: invert(1);
  }

  .CreateComment--container--cE0tC textarea,
  .CreatePost--container--TnszW textarea {
    background-color: var(--clr-bg--content);
    border-color: var(--clr-border);
    color: var(--clr-text);
  }

  .CreatePost--container--TnszW textarea:focus,
  .CreateComment--container--cE0tC textarea:focus {
    background-color: var(--clr-bg--content);
  }

  /* Lines */
  .section,
  .card .card-footer,
  .card .card-section,
  .ActivityEntryBody--activity-entry-container--iYy-k
    .ActivityEntryBody--stats--G90hq
    > li,
  .KudosAndComments--kudos-and-comments--RTN8b.KudosAndComments--hairline--n9t8k,
  .AthleteJoinEntry--media--kEDKw,
  .Show--top-row--siFxa,
  .CollapsibleSection--line--Gjb6T {
    border-color: var(--clr-border);
  }

  /* Profile */
  #header-photos ul a,
  #header-photos ul a,
  .profile-heading .avatar img {
    border-color: var(--clr-border);
  }

  .avatar-athlete img,
  .avatar-athlete .avatar-img {
    background-color: var(--clr-bg--content);
  }

  /*
  ┌──────────────────────────────────┐
    TABLES
  └──────────────────────────────────┘
  */

  .LeaderboardsTable--table-container--JxwWf
    .LeaderboardsTable--table--zBtJE
    th,
  .LeaderboardsTable--table-container--JxwWf
    .LeaderboardsTable--table--zBtJE
    tr.LeaderboardsTable--leaderboard-entry--ydqYD {
    border-color: var(--clr-border);
  }

  .Leaderboard--container--PJWVx
    .Leaderboard--avatar-and-name-container--PqA52
    .Leaderboard--details--iggfk
    .Leaderboard--name--nNWT5
    a {
    color: var(--clr-text--light);
  }

  .LeaderboardsTable--table-container--JxwWf
    .LeaderboardsTable--table--zBtJE
    tr.LeaderboardsTable--leaderboard-entry--ydqYD {
    color: var(--clr-text--medium);
  }

  /*
  ┌──────────────────────────────────┐
    SIDEBAR / CHALLENGES
  └──────────────────────────────────┘
  */

  .media .participants {
    color: var(--clr-text--medium);
  }

  /*
  ┌──────────────────────────────────┐
    MAPS
  └──────────────────────────────────┘
  */

  .PhotosAndMapImage--entry-images--M264M
    .PhotosAndMapImage--entry-image-wrapper--LaoWz {
    filter: inverse(100%);
  }

  /*
  ┌──────────────────────────────────┐
    TABS
  └──────────────────────────────────┘
  */

  /* Menu Arrows*/
  .app-icon.icon-dark {
    background-position: 0 66.66666666%;
  }

  .app-icon.icon-elliptical,
  .app-icon.icon-run,
  .app-icon.icon-run-v2,
  .app-icon.icon-run-v3,
  .app-icon.icon-soccer,
  .app-icon.icon-stairstepper,
  .app-icon.icon-virtualrun,
  .app-icon.icon-swimming,
  .app-icon.icon-swim,
  .app-icon.icon-watersport,
  .app-icon.icon-nav-training {
    filter: invert(1);
  }

  [aria-selected='true'] .app-icon {
    filter: unset;
  }

  .tabbed-cards .tabs > li.selected .tab,
  .tabbed-cards .tabs > li[aria-selected='true'] .tab {
    background-color: var(--clr-navigation);
  }

  .tab-contents,
  .tab-contents > div {
    background-color: var(--clr-navigation);
  }

  /*
  ┌──────────────────────────────────┐
    ICONS
  └──────────────────────────────────┘
  */

  #global-header #notifications #notifications-button .icon-notification {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-bell'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  }

  .app-icon.icon-yoga {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M13 2a2 2 0 1 0 0 4c1.11 0 2-.89 2-2a2 2 0 0 0-2-2M4 7v2h6v6l-5.07 5.07 1.41 1.4...

Reviews

No reviews yet.