trainingpeaks.com Dark Mode
/* ==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-style: dashed !important;
border-color: #cb0808 !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;
}
}