☰

Garmin Connect Dark Mode

Applies a dark theme to connect.garmin.com for improved readability

当前为 2025-04-19 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Garmin Connect Dark Mode
  3. // @namespace    https://github.com/patrickstigler/Tampermonkey
  4. // @version      1.0
  5. // @description  Applies a dark theme to connect.garmin.com for improved readability
  6. // @author       Patrick Stigler
  7. // @license      MIT License
  8. // @match        https://connect.garmin.com/*
  9. // @grant        GM_addStyle
  10. // @run-at       document-start
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     const css = `
  16. :root {
  17.     --inverted-background: #1a1a1a;
  18.     --inverted-background2: #f2f2f2;
  19.     --primary-text: #f2f2f2;
  20.     --primary-text2: #1a1a1a;
  21.     --header-text: #1a1a1a;
  22.     --border: #5971c6f0;
  23.     --scrollbar-thumb: #30acfd;
  24.     --scrollbar-background: #f2f2f2;
  25. }
  26.  
  27. .connect-container {
  28.     filter: invert(1) hue-rotate(180deg);
  29. }
  30.  
  31. .main-nav,
  32. .leaflet-zoom-animated,
  33. html img,
  34. #activityYouTubePlaceholder > div,
  35. .modal-backdrop,
  36. .modal:not(.modal.fullscreen.fullscreen, .modal-wide.metrics-edit-modal.in),
  37. .edit-carousel-content .edit-image-div,
  38. .Notification_notification__189UW,
  39. .connect-map-view .leaflet-container,
  40. .marTopXS > iframe {
  41.     -webkit-filter: invert(1) hue-rotate(180deg) !important;
  42.     filter: invert(1) hue-rotate(180deg) !important;
  43. }
  44.  
  45. h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  46.     color: var(--header-text);
  47.     font-weight: 600;
  48. }
  49.  
  50. th.weekly-totals.weekly-totals-header,
  51. td.weekly-totals.weekly-totals-data,
  52. #defaultActivityOptionsGroup > div.row-fluid.page-top > div.span8.page-intro > div > h3 > div > div > button > i,
  53. .modal-body > select {
  54.     filter: invert(1) hue-rotate(180deg);
  55.     background-color: var(--inverted-background) !important;
  56.     color: var(--primary-text) !important;
  57. }
  58.  
  59. .video-container {
  60.     opacity: 10%;
  61. }
  62. .video-container:hover {
  63.     opacity: 100% !important;
  64. }
  65.  
  66. .in.fade.modal-backdrop {
  67.     display: table !important;
  68. }
  69.  
  70. [class*='modal']:not(#pageContainer > div > div.modal.hide.fade.modal-wide.metrics-edit-modal.in > div.modal-header > h3,
  71. #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,
  72. #activityIntroViewPlaceholder > div.page-header-content > h3 > div > div > button,
  73. .inline-edit-trigger,
  74. .modal.fade.in,
  75. .modal-header h3,
  76. .fade,
  77. :not(.help-icon)) {
  78.     filter: invert(1) hue-rotate(180deg);
  79.     border-color: var(--border);
  80.     background-color: var(--inverted-background2) !important;
  81.     color: var(--primary-text2) !important;
  82. }
  83.  
  84. .photo-carousel {
  85.     background-color: var(--inverted-background2) !important;
  86. }
  87.  
  88. .photo-carousel-modal .close {
  89.     color: var(--primary-text2) !important;
  90. }
  91.  
  92. .photo-carousel-modal .photo {
  93.     filter: unset !important;
  94.     cursor: initial;
  95. }
  96.  
  97. .photo-carousel-modal .slides {
  98.     margin-bottom: 35px;
  99.     background: var(--inverted-background);
  100. }
  101.  
  102. .btn-small {
  103.     z-index: 9999;
  104. }
  105.  
  106. .react-global-modal .Dialog_dialogFooter__W9xGT > a {
  107.     background-color: var(--inverted-background2) !important;
  108.     color: var(--primary-text2);
  109. }
  110.  
  111. /* Scrollbar Styling */
  112. ::-webkit-scrollbar {
  113.     width: 12px;
  114. }
  115.  
  116. ::-webkit-scrollbar-thumb {
  117.     border: 3px solid var(--scrollbar-background);
  118.     border-radius: 6px;
  119.     background-color: var(--scrollbar-thumb);
  120. }
  121.  
  122. body {
  123.     -ms-overflow-style: -ms-autohiding-scrollbar;
  124. }
  125.     `;
  126.     GM_addStyle(css);
  127. })();