Skip to content

Strava Darkest Fusion by ATX

Screenshot of Strava Darkest Fusion

Details

AuthorATX

LicenseCC-BY-SA-4.0

CategoryStrava.com

Created

Updated

Size38 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Remember to look care of your eyes, not only rest of body. This dark themed style helps your eyes be healthy while visiting Strava.

Notes

About theme

As title says, dark thme for Strava, so that it is easy to read everything when you come back at night after an all-day marathon :)

I you like my theme please support my work and fund me coffee on PayPal or Buy Me a Coffee for hundreds of hours spent to preparing dark themes for you. Thank you for being awesome!

Known bugs

  • minor issues with icons of some of activites (can't check them all),
  • probably premium activites,

Bug reports, ideas

Simply write comment below.

Changelog

  • 06.09.2024 - fixes to notifications and rankings tables,
  • 20.08.2024 - fixes to posts,
  • 04.05.2024 - fixes to messages, maps and dropdowns,
  • 18.03.2024 - fixes to activities, maps and dropdowns,
  • 15.03.2024 - fixes to segments, buttons, comparisons etc.
  • 08.02.2024 - first upload on UserStyles.world, fixes recent issues on various subpages.

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 Darkest Fusion
@namespace    Strava Darkest Fusion for userstyles.world by ATX
@description  Style designed for making Strava, sport monitoring site DARK
@version      2024.09.06
@license      CC-BY-SA-4.0
@author       ATX
@preprocessor stylus
==/UserStyle== */

@-moz-document regexp("https:\\/\\/(?:www\\.)?strava\\.com.*") {
#__next > header, #view > .header, #global-header, .footer-promos, section header, section .header, .section header, .section .header, section footer, section .footer, .section footer, .section .footer, #global-footer, [class*="KudosCommentsAndAchievementsModal-KudosCommentsAndAchievementsModal__footer"], [class^="Header_container__"], [class*="src--noBackground"] nav {
	background-color: #161616 !important;
}

.onboarding-flow-wrap, body, .lightbox-window header, #basic-analysis #stacked-chart, .ride.segments-list tr.selected, .swim.segments-list tr.selected, .ride .segment-effort-detail .pr-comparison, .swim .segment-effort-detail .pr-comparison, .lightbox-window header, .edit-personal-records tr.editable-row > td, ul.routes-list li.route-card .actions, .footer-global, [class*="Header--container--"], [class*="LandingPageV2--main-content-"], .glossary-header, [class*="LandingPage--middle-column"], [class^="logged-out-home-page-ui--main-"], body > div#__next header + div > div, body > div#__next header + div > div div, [class*="Comments--empty"], [class*="packages-ui-ModalWithTabs-styles-module__tabList"], [class^="Desktop_container__"], body > .view > .container.react-container, [class*="MapsPage_page"] > [class*="styles_globalHeader_"], [class*="Desktop_middleColumn__"], [class*="src-components-Gallery-styles__page-body"] {
	background-color: #1C1C1C !important;
}

.leaderboard .filters .option {
	/*special, non important*/
	background: #1C1C1C;
}

.flow-premium > .content-footer, .flow-container, #deny-or-accept-buttons, .search > .panel-default, .table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active, .table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th, #search-results.table .edit-col, .react-card-container > div > [class*="-feed-entry"], .activity-tags label:hover, [class*="ExpandableOptionList--"], [data-reach-dialog-content], .stats-container .table, [class*="ModalWithTabs--content"], .content > form.search[action], .segment-effort-detail, .segment-effort-detail .leaderboard-summary, #athlete-profile.card, .btn-white, .tab-contents > [data-sport], .tabbed-cards .tabs > li[aria-selected="true"] .tab, #progress-goals + .card, .drop-down-menu .options, .drop-down-menu .options .opt-group.premium, .slide-menu .options .opt-group.premium, .view section.feature-section, .starred-segments thead > tr, .goal.card, .activity-summary-container, .pagenav li > a:hover, .pagenav, .dropdown-menu, #js-dashboard-athlete-goals > .card, .dense > thead > tr, #notifications-drop-down, .card:not(#js-dashboard-athlete-goals), #map-control-container .button:not(#toggle-fullscreen):not(#create-route):not(:hover), #map-control-container .drop-down-menu .selection, #basic-analysis .chart, .lightbox-window .tabs, .lightbox-window #tab-contents, [class*="SegmentDetailsSideBar--card--"], .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > li > a, .pagination > li > span, .leaderboard .leaderboards-upsell, .table-striped > tbody > tr:nth-of-type(2n), .table-leaderboard th, .ride .segment-effort-detail .segment-leaderboard thead, .swim .segment-effort-detail .segment-leaderboard thead, #profile-heatmap-upsell, .invite-friends, ul.tabs > li.selected .tab, ul.tabs > li[aria-selected="true"] .tab, .edit-personal-records td.readonly-column, .edit-personal-records, .striped > li:nth-child(2n), .striped > div:nth-child(2n), .striped > tr:nth-child(2n), #settings-menu a:link, #settings-menu a:visited, #explorer .main-content #segments-sidebar, .page > .panel, #race-table > thead th, .year-calendar a:not(:hover), #search-results > thead > tr > th, ._3Qs1zA618wFVYn1omT73_U, .g7N7fBojz_GFCESrdaxzf, ._2wk2mpI6KzJRgwh0uUGnGU:hover .cQx-n1x8ZWjdIAziPar_Y, ._2wk2mpI6KzJRgwh0uUGnGU:active .cQx-n1x8ZWjdIAziPar_Y, ._2wk2mpI6KzJRgwh0uUGnGU:focus .cQx-n1x8ZWjdIAziPar_Y, .more-stats > table.unstyled tr > th, .more-stats > table.unstyled tr > td, .month-calendar.marginless th, .leaflet-popup-content-wrapper, .map-legends, .map-tooltip, .segment-info-box, .segment-info-box .records, ul.routes-list li.route-card, .slide-menu .options, [class^="EntryHeader--icon-container--"], #map_canvas, #contextual-health, #uploadFile form, [class*="Activity--card--"], .list-apps .app-card, .index-heading section .upsell, [class*="HeaderWithOwnerMetadata--icon-container--"], [class*="PromoEntry--card--"], [class*=" Card--"], [class*="LandingPage--main--"], .ui-dialog, .ui-dialog-titlebar, [role="dialog"] > [class^="Modal--content-"], #appUpsell, .glossary-body, [class^="src-components-NotificationsList-NotificationsList__notification-unread"], [class^="src-components-NotificationsList-NotificationsList__notifications"], #__next > header > div ul > li div li *, #__next > header > div nav > ul > li, [class*="-packages-feed-ui-src-components-media-"], [class*="HeaderWithOwnerMetadata__icon-container"], .invite-friends + .drop-down-menu > div:not(:hover), .my-segments > thead th, [class^="LimitedProfileEntry--content--"], [class*="packages-ui-ModalWithTabs-styles__tab-list"], [class*="-HeaderWithOwnerMetadata-module__avatar"], [class*="OwnerMetadata-module__iconContainer"], #elevation-profile, .leaflet-control-attribution, .mapboxgl-ctrl-scale, [class*="MoreActivities--more-activities"], .uploads .drop-down-menu.enabled> .selection, .uploads .drop-down-menu[class*="workout-type"] > .selection, [class*="--packages-ui-Card-Card-module__card--nHcH9"], [class*="packages-ui-Button-styles-module__default"], [class*="-components-Footer-Footer"] [class*="css"][class*="-control"], [class*="packages-ui-Select-Select-module"] [class*="css"][class*="-control"], [class^="Footer_footer__"], [class*="-ui-Button-Button-module__default--jLxgA"], .seg-leaderboard-upsell, #roster thead th, [class*="styles_menuItems_"], [class*="styles_menuItems_"] [class*="styles"], [class*="-EmptyState-EmptyState-module__iconCircleContainer"], [class*="NotificationsList"], [class*="NotificationsList"] a, [class*="packages-shared-ui-src-challenges"], [class*="PromotedDoradoSection-styles__challenge-info"], .activity-summary-v2 .activity-breakdown .cycling {
	background-color: #2C2C2C !important;
}

.feed-pagination.pagination {
	background-image: linear-gradient(#2C2C2C, #0000) !important;
}

.btn-accept-cookie-banner, .table-sortable > thead button:hover, .panel-footer, input:not([type="range"]), textarea, .textarea-clone, [class*="ModalWithTabs--tab-list"], [class*="KudosCommentsAndAchievementsModal--footer"], [class*="Button--default--"], [class*="Button--default--"]:link, [class*="Button--default--"]:visited, [class*="AchievementCelebration--achievement-celebration"], .activity-indicator, .drop-down-menu .options a:hover, .slide-menu .options a:hover, .drop-down-menu .options .clickable:hover, .slide-menu .options .clickable:hover, .drop-down-menu .options .btn:hover, .slide-menu .options .btn:hover, #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, .button.minimal, button.minimal, .pagenav li > a:hover, .pagenav li > a:active, .actions-menu > .button:hover, .actions-menu > .slide-menu .selection:hover, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .sidebar .upsell, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, .selection:hover, .pagination a:hover, .pagination span:hover, .pagination em:hover, :not(.photo-nav) > .btn:active, :not(.photo-nav) > .button:active, :not(.photo-nav) > button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active, .selection:active, .pagination a:active, .pagination span:active, .pagination em:active, .active.btn, .active.button, button.active, input.active[type="submit"], input.active[type="button"], input.active[type="reset"], .active.selection, .pagination a.active, .pagination span.active, .pagination em.active, .drop-down-menu.active .selection, .editable-setting:hover, .editable-setting.editing, .btn-default, .pinned .pinnable, .local-legend-container, .upsell-text-container, .drop-down-menu a:hover, .drop-down-menu .clickable:hover, .dropdown a:hover, .dropdown .clickable:hover, #notifications-drop-down li a:hover, basic-analysis #stacked-chart, ul.tabs > li:hover .tab, .s-chart-tooltip, .infobox, :not(.photo-nav):not(.media-body) > .btn, .button, :not([class*="KudosAndComments--"]):not([class*="GroupActivity"]):not(.photo-nav):not(.drop-down-menu) > button:not([class^="src-Notifications__nav-bar-button"]):not([class*="-components-KudosAndComments-KudosAndComments__count-button"]):not([class*="Activity__headline-text-btn"]):not([class*="-ActivityEntryBody__achievements-trophy"]), input[type="submit"], input[type="button"], input[type="reset"], :not(.subactions):not(.drop-down-menu) > .selection, .pagination a, .pagination span, .pagination em, table.unstyled tr, table.unstyled tr:nth-child(2n), .ride .segment-effort-detail .leaderboard-footer, .swim .segment-effort-detail .leaderboard-footer, #settings-menu a:hover, #settings-menu a:active, #explorer #segment-list ul li:hover, .form-control, .css-1jl1bc3-control, .css-1liq7bz-control, .css-16j759p-control, .css-drn9af-control, ....

Reviews

No reviews yet.