Skip to content

trainingpeaks.com - Dark Mode by Nick2bad4u

Imported and mirrored from https://github.com/Nick2bad4u/UserStyles/raw/refs/heads/main/TrainingPeaks-DarkMode.user.css

Screenshot of trainingpeaks.com - Dark Mode
Homepage Write a review Install Get Stylus

Details

AuthorNick2bad4u

LicenseUnLicense

Categorytrainingpeaks

Created

Updated

Size9.1 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

trainingpeaks.com Dark Mode

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         trainingpeaks.com - Dark Mode
@version      20241107.04.55
@namespace    typpi.online
@description  trainingpeaks.com Dark Mode
@author       Nick2bad4u
@license      UnLicense
@homepageURL  https://github.com/Nick2bad4u/UserStyles
==/UserStyle== */
@-moz-document domain("trainingpeaks.com") {
  /* Invert colors except images and videos */
  :is(html:not([stylus-iframe]), img, svg, video):not(png),
  #workOutQuickView
    > div.QVHeader
    > div.QVHeaderItemsContain.cf
    > div.workoutBarView
    > div:nth-child(2)
    > div
    > div
    > div.workoutIconAndKeyStats
    > div.tomahawkButton,
  body
    > div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
    > div.overlayBoxBody
    > div.tabbedLayoutBody.scrollable
    > div
    > div
    > div
    > div
    > div:nth-child(1)
    > div.profilePicture
    > fieldset
    > div {
    filter: invert(1) hue-rotate(180deg) !important;
  }

  /* Ensure background images are not inverted */
  :is(
      html:not([stylus-iframe]),
      img,
      svg,
      video,
      #workOutQuickView
        > div.QVHeader
        > div.QVHeaderItemsContain.cf
        > div.workoutBarView
        > div:nth-child(2)
        > div
        > div
    ):not(z#z.z[z]) {
    background-color: inherit !important;
  }

  #wrapper
    > div
    > div
    > div.appContainerLibrayAndContentContainer
    > div.appContainerMainContentContainer,
  #wrapper > div > div > div.appHeader > div.userControls,
  #wrapper
    > div
    > div
    > div.appContainerLibrayAndContentContainer
    > div.appContainerMainContentContainer
    > div
    > div
    > div.trainingPeaksAthleteHomeContent
    > div.columns
    > div.column__center
    > div
    > div.todaysWorkouts
    > div:nth-child(n)
    > div
    > div
    > div.workoutHeader {
    background: #fff !important;
  }

  #wrapper
    > div
    > div
    > div.appContainerLibrayAndContentContainer
    > div.appContainerMainContentContainer
    > div
    > div
    > div.trainingPeaksAthleteHomeHeader
    > div.athleteName,
  .value {
    color: #9612b2 !important;
    text-decoration-line: underline;
    text-decoration-color: blue;
  }

  #wrapper
    > div
    > div
    > div.appHeader
    > div.userControls
    > div.logoAndUserType
    > a.appHeaderLogoLargeScreen,
  #wrapper
    > div
    > div
    > div.appHeader
    > div.userControls
    > div.secondaryNavigation
    > div.appHeaderUserSettings
    > div.appHeaderUserPhoto,
  span,
  button,
  #wrapper
    > div
    > div
    > div.appContainerLibrayAndContentContainer
    > div.appContainerMainContentContainer
    > div
    > div
    > div.trainingPeaksAthleteHomeHeader
    > div.athletePhoto
    > div
    > div,
  #wrapper
    > div
    > div
    > div.appHeader
    > div.userControls
    > div.secondaryNavigation
    > div.tpVirtualButtonContainer
    > button
    > svg
    > path:nth-child(n) {
    filter: invert(1) hue-rotate(180deg);
  }

  a:hover,
  button:hover {
    text-decoration-line: underline !important;
    text-decoration-color: #b41289 !important;
  }

  .tabbedLayoutNav li,
  .overlayBoxBody > ul > li.active > span {
    color: White;
  }

  .tabbedLayoutNav li:hover,
  .overlayBoxBody > ul > li.active > span:hover {
    color: #006bb9;
  }

  .css-37jdci-MuiTypography-root.title.newActivityUItitle.MuiTypography-H6.MuiTypography-root,
  body
    > div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
    > div.overlayBoxBody
    > div.tabbedLayoutBody.scrollable
    > div
    > div
    > div:nth-child(n)
    > div.heartRateZones
    > div
    > div
    > div.zoneSetContain.heartrate
    > fieldset
    > label:nth-child(n)
    > span,
  body
    > div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
    > div.overlayBoxBody
    > div.tabbedLayoutBody.scrollable
    > div
    > div
    > div:nth-child(n)
    > div.heartRateZones
    > div
    > div
    > div.zones.zonesConfigGroupView.ui-sortable
    > div:nth-child(n)
    > span,
  span.zoneEntryTo,
  span.zoneSetTitle {
    color: white;
  }

  .MuiTypography-root {
    color: #cb0808;
  }

  .units {
    color: #007580 !important;
  }

  body
    > div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
    > div.overlayBoxBody
    > div.tabbedLayoutBody.scrollable
    > div
    > div
    > div:nth-child(n)
    > div.heartRateZones
    > div
    > div
    > div.zoneSetContain.heartrate
    > fieldset
    > label:nth-child(n)
    > input,
  .heartRateZones
    > div
    > div
    > div.zones.zonesConfigGroupView.ui-sortable
    > div:nth-child(n)
    > input,
  body
    > div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
    > div.overlayBoxBody
    > div.tabbedLayoutBody.scrollable
    > div
    > div
    > div:nth-child()
    > div.powerZones
    > div
    > div
    > div.zoneSetContain.power
    > fieldset
    > label
    > input,
  body
    > div.tabbedSettings.userSettings.overlayBox.modal.modalShadow
    > div.overlayBoxBody
    > div.tabbedLayoutBody.scrollable
    > div
    > div
    > div:nth-child(2)
    > div.powerZones
    > div
    > div
    > div.zones.zonesConfigGroupView.ui-sortable
    > div:nth-child(n)
    > input.numberInput.tpSettingsInput.min.first {
    color: black;
  }

  div.workoutStatsColumn.workoutStatsUnitLabel > label,
  div.workoutStatsColumn.workoutStatsLabel > label,
  div.workoutStatsColumn.workoutStatsMinMaxAvgLabel > label,
  div.equipment > div > div:nth-child(2) > div > label,
  div.equipment > div > div:nth-child(3) > label {
    color: green;
  }

  #wrapper
    > div
    > div
    > div.appContainerLibrayAndContentContainer
    > div.appContainerMainContentContainer
    > div
    > div
    > div.trainingPeaksAthleteHomeContent
    > div.columns
    > div.column__center
    > div
    > div.todaysWorkouts
    > div.metric
    > div
    > div.activityHeader.metricsTileHeader
    > div
    > div
    > span.metricKeyStat.activitySubText,
  #wrapper
    > div
    > div
    > div.appContainerLibrayAndContentContainer
    > div.appContainerMainContentContainer
    > div
    > div
    > div.trainingPeaksAthleteHomeContent
    > div.columns
    > div.column__center
    > div
    > div.todaysWorkouts
    > div.metric
    > div
    > div.activityHeader.metricsTileHeader
    > div
    > span:nth-child(n) {
    color: red;
  }

  #quickViewContent
    > div.tabContent.tabContentRegion
    > div
    > div
    > div.rightColumn
    > div.otherThanCommentsContainer
    > div.workoutTagsContainer
    > div
    > div
    > div:nth-child(n)
    > span,
  #wrapper
    > div
    > div
    > div.appHeader
    > div.dreamingSeasonPencilBanner
    > div.dreamingSeasonPencilBannerContainer
    > div
    > span.MuiTypography-root.MuiTypography-body1.css-1njuh5f-MuiTypography-root,
  #wrapper
    > div
    > div
    > div.appHeader
    > div.dreamingSeasonPencilBanner
    > div.dreamingSeasonPencilBannerContainer
    > div
    > span.MuiTypography-root.MuiTypography-body1.css-1d9r2xn-MuiTypography-root,
  #workOutQuickView
    > div.QVHeader
    > div.QVHeaderItemsContain.cf
    > div.performanceData
    > div
    > div
    > div
    > div.form.TSB
    > span.label,
  #workOutQuickView
    > div.QVHeader
    > div.QVHeaderItemsContain.cf
    > div.dateAndTime
    > div
    > div
    > div
    > span,
  #wrapper
    > div
    > div
    > div.appContainerLibrayAndContentContainer
    > div.appContainerMainContentContainer
    > div
    > div
    > div.trainingPeaksAthleteHomeContent
    > div.columns
    > div.column__center
    > div
    > div.todaysWorkouts
    > div.metric
    > div
    > div.activityHeader.metricsTileHeader
    > div
    > div
    > span:nth-child(1) {
    color: white;
  }

  #workOutQuickView
    > div.QVHeader
    > div.QVHeaderItemsContain.cf
    > div.workoutBarView
    > div:nth-child(2)
    > div
    > div {
    border: white !important;
    border-color: #cb0808 !important;
    border-style: dashed !important;
  }

  .css-70qvj9.MuiBox-root.athleteHealthMetricsCalendarCardHeaderRight > svg > path {
    fill: #ff0000 !important;
    /* changes the color to red */
  }

  #wrapper
    > div
    > div
    > div.appContainerLibrayAndContentContainer
    > div.appContainerMainContentContainer
    > div
    > div.frameworkMainWrapper
    > div
    > div.calendarContainer
    > div
    > div
    > div.contents.scrollable
    > div.focusedWeeks
    > div.calendarWeekContainer.inView
    > div
    > div:nth-child(n)
    > div.activities
    > div:nth-child(n)
    > div
    > div
    > div.lowerWorkoutCard
    > div.PRCommentRPEContainer {
    filter: invert(20%) sepia(90%) saturate(700%) hue-rotate(180deg) brightness(90%) contrast(90%);
  }

  #commentsContainer
    > div
    > div
    > div:nth-child(1)
    > div.rpeContainer
    > div
    > div
    > div.emojiSelector.greatToBrutal
    > div.emojiScale
    > div:nth-child(n) {
    filter: invert(70%) sepia(100%) saturate(500%) hue-rotate(18deg) brightness(50%) contrast(100%);
  }

  #chartsContainer > div > div.dashboardChart {
    border: 2px solid pink;
  }
}

Reviews

No reviews yet.