Garmin Connect Dark Mode (Updated)

Garmin Connect Dark Dashboard
当前为 2025-01-22 提交的版本，查看最新版本。
换行
/* ==UserStyle==
@name         Garmin Connect Dark Mode (Updated)
@version      3.1
@namespace    typpi.online
@homepageURL  https://github.com/Nick2bad4u/UserStyles
@supportURL   https://github.com/Nick2bad4u/UserStyles/issues
@description  Garmin Connect Dark Dashboard
@author       Nick2bad4u
@license      UnLicense

@var color inverted-background "Inverted Background Color" #000000
@var color primary-text-color "Primary Text Color" #ffffff
@var color border-color "Border Color" #5971c6f0
@var color scrollbar-thumb-color "Scrollbar Thumb Color" #30acfd
@var color scrollbar-background-color "Scrollbar Background Color" #ffffff
==/UserStyle== */
@-moz-document domain("connect.garmin.com") {
	:root {
		--inverted-background: var(inverted-background);
		--primary-text: var(primary-text-color);
		--border: var(border-color);
		--scrollbar-thumb: var(scrollbar-thumb-color);
		--scrollbar-background: var(scrollbar-background-color);
	}

	:is(.connect-container) {
		filter: invert(1) hue-rotate(180deg);
	}

	.main-nav,
	.leaflet-zoom-animated,
	html img,
	#activityYouTubePlaceholder > div,
	.modal-backdrop,
	.modal:not(
			.modal.fullscreen.fullscreen,
			.modal-wide.metrics-edit-modal.in
		),
	.edit-carousel-content .edit-image-div,
	.Notification_notification__189UW,
	.connect-map-view .leaflet-container {
		-webkit-filter: invert(1) hue-rotate(180deg) !important;
		filter: invert(1) hue-rotate(180deg) !important;
	}

	h1,
	.h1,
	h2,
	.h2,
	h3,
	.h3,
	h4,
	.h4,
	h5,
	.h5,
	h6,
	.h6 {
		font-weight: 600;
	}

	th.weekly-totals.weekly-totals-header,
	td.weekly-totals.weekly-totals-data,
	#defaultActivityOptionsGroup
		> div.row-fluid.page-top
		> div.span8.page-intro
		> div
		> h3
		> div
		> div
		> button
		> i,
	.modal-body > select {
		filter: invert(1) hue-rotate(180deg);
		background-color: var(
			--inverted-background
		) !important;
		color: var(--primary-text) !important;
	}

	.video-container {
		opacity: 10%;
	}

	.video-container:hover {
		opacity: 100% !important;
	}

	.in.fade.modal-backdrop {
		display: table !important;
	}

	[class*='modal']:not(
			#pageContainer
				> div
				> div.modal.hide.fade.modal-wide.metrics-edit-modal.in
				> div.modal-header
				> h3,
			#pageContainer
				> div
				> div
				> div.row-fluid.list-items.flexItemAutoHeight
				> ul
				> li:nth-child(n)
				> div
				> div.pull-left.activity-name-type.title-col
				> div.activity-name-edit.inline-edit.inline-edit-text-field
				> button,
			#activityIntroViewPlaceholder
				> div.page-header-content
				> h3
				> div
				> div
				> button,
			.inline-edit-trigger,
			.modal.fade.in,
			.modal-header h3,
			.fade,
			:not(.help-icon)
		) {
		/*Manipulations stuff*/
		filter: invert(1) hue-rotate(180deg);
		/*Box model stuff*/
		border-color: var(--border);
		background-color: var(
			--primary-text
		) !important;
		/*Typography stuff*/
		color: var(--inverted-background) !important;
	}

	.photo-carousel {
		background-color: var(
			--primary-text
		) !important;
	}

	.photo-carousel-modal .close {
		color: var(--inverted-background) !important;
	}

	.photo-carousel-modal .photo {
		filter: unset !important;
		cursor: initial;
	}

	.photo-carousel-modal .slides {
		margin-bottom: 35px;
		background: var(--inverted-background);
	}

	.btn-small {
		z-index: 9999;
	}

	.react-global-modal
		.Dialog_dialogFooter__W9xGT
		> a {
		background-color: var(
			--primary-text
		) !important;
		color: var(--inverted-background);
	}

	/* For WebKit browsers (e.g., Chrome, Safari) */
	::-webkit-scrollbar {
		width: 12px;
	}

	::-webkit-scrollbar-thumb {
		border: 3px solid var(--scrollbar-thumb);
		border-radius: 6px;
		background-color: var(--primary-text);
	}

	/* For Edge, IE */
	body {
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}
}

@-moz-document domain("forums.garmin.com"),
regexp("^https?:\\/\\/(www\\.)?garmin\\.com(\\/[^\\s]*)?$") {
	:root {
		--inverted-background: var(
			inverted-background
		);
		--primary-text: var(primary-text-color);
		--scrollbar-thumb: var(scrollbar-thumb-color);
	}

	:is(
		html:not([stylus-iframe]),
		#app,
		.ugc-gallery-image__figure__img,
		.app__headline--dark,
		img:not(.avatar > a > img),
		svg,
		video
	),
	.content-author .avatar img,
	.gf__footer,
	.g__email-signup,
	.g__tile .g__tile__content-text > .g__heading p,
	.css-karl3g div,
	.app__color__picker__item,
	.app__tabs__content__wrap img,
	.app__tabs__content__main,
	.app__product__card,
	.app__related__card__inner {
		filter: invert(1) hue-rotate(180deg);
	}

	.g__email-signup,
	.g__email-signup__copy__disclaimer,
	.g__email-signup__copy__disclaimer a,
	.app__sidebar__full {
		background-color: var(--inverted-background);
		color: var(--primary-text);
	}

	.app__feature__card__image {
		filter: unset !important;
	}

	/* For WebKit browsers (e.g., Chrome, Safari) */
	::-webkit-scrollbar {
		width: 12px;
	}

	::-webkit-scrollbar-thumb {
		border: 3px solid var(--scrollbar-thumb);
		border-radius: 6px;
		background-color: var(--scrollbar-background);
	}

	/* For Edge, IE */
	body {
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}
}
欢迎访问Greasy Fork镜像
