Created
November 2, 2025 06:32
-
-
Save 1337-server/11be827f095a94e1adf603e4ece95109 to your computer and use it in GitHub Desktop.
Dark mode userscript for MyFitnessPal that adds gradient card styling and consistent layout to all dashboard and goal sections without breaking grids.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name MyFitnessPal Dark Mode + Full Card Styling | |
| // @namespace https://github.com/1337-server | |
| // @version 1.5 | |
| // @description Dark mode with gradient dashboard and extended card styling for all sections on MyFitnessPal | |
| // @author 1337-server | |
| // @match https://www.myfitnesspal.com/ | |
| // @icon https://www.myfitnesspal.com/favicon.ico | |
| // @grant GM_addStyle | |
| // ==/UserScript== | |
| (function () { | |
| 'use strict'; | |
| GM_addStyle(` | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg-dark: #121212; | |
| --bg-card: #1e1e1e; | |
| --bg-gradient-top: #1f1f1f; | |
| --bg-gradient-bottom: #121212; | |
| --text-light: #e0e0e0; | |
| --text-muted: #b0b0b0; | |
| --accent: #00b5e2; | |
| --border-color: #2c2c2c; | |
| } | |
| html, body { | |
| background-color: var(--bg-dark) !important; | |
| color: var(--text-light) !important; | |
| } | |
| /* === Main Dashboard Cards (Calories, Macros, etc.) === */ | |
| .MuiGrid-item[data-testid^="qa-regression-"] { | |
| flex: 1 1 calc(33% - 1.5rem) !important; | |
| min-width: 300px !important; | |
| background: linear-gradient(180deg, var(--bg-gradient-top), var(--bg-gradient-bottom)) !important; | |
| border: 1px solid var(--border-color) !important; | |
| border-radius: 12px !important; | |
| padding: 1rem !important; | |
| box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important; | |
| color: var(--text-light) !important; | |
| transition: transform 0.2s ease, box-shadow 0.3s ease; | |
| margin: 5px; | |
| } | |
| .MuiGrid-item[data-testid^="qa-regression-"]:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.6); | |
| } | |
| /* === Extended "Card" Styling for Daily Goals, Fitness, etc. === */ | |
| .MuiBox-root[data-testid^="qa-regression-daily"], | |
| .MuiBox-root[data-testid^="qa-regression-calories"], | |
| .MuiBox-root[data-testid^="qa-regression-fitness"], | |
| .MuiBox-root[data-testid^="qa-regression-"][class*="css-ik0lhl"], | |
| .MuiBox-root[data-testid^="qa-regression-"][class*="css-im2vw8"] { | |
| background: linear-gradient(180deg, var(--bg-gradient-top), var(--bg-gradient-bottom)) !important; | |
| border: 1px solid var(--border-color) !important; | |
| border-radius: 12px !important; | |
| padding: 1.2rem !important; | |
| margin-top: 1rem !important; | |
| margin-bottom: 1rem !important; | |
| box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important; | |
| color: var(--text-light) !important; | |
| } | |
| /* Add spacing between internal items (nutrition rows, fitness rows, etc.) */ | |
| .MuiGrid-root.css-9k7ul8 { | |
| border-bottom: 1px solid rgba(255,255,255,0.08) !important; | |
| padding: 0.4rem 0 !important; | |
| } | |
| .MuiGrid-root.css-9k7ul8:last-child { | |
| border-bottom: none !important; | |
| } | |
| /* Section titles */ | |
| .MuiTypography-root.MuiTypography-body1 { | |
| color: #fff !important; | |
| font-weight: 600 !important; | |
| margin-bottom: 0.5rem !important; | |
| } | |
| /* Macros section fix - prevent wrapping of circular charts */ | |
| [data-testid="qa-regression-macros-section"] .MuiGrid-container { | |
| display: flex !important; | |
| flex-wrap: nowrap !important; | |
| justify-content: space-around !important; | |
| gap: 1rem !important; | |
| } | |
| [data-testid="qa-regression-macros-section"] .MuiGrid-item { | |
| flex: 1 1 auto !important; | |
| text-align: center !important; | |
| } | |
| /* Typography and input cleanup */ | |
| .MuiTypography-root { color: var(--text-light) !important; } | |
| input, textarea, select { | |
| background-color: #1c1c1c !important; | |
| color: var(--text-light) !important; | |
| border: 1px solid var(--border-color) !important; | |
| } | |
| a, .link, .nav a { | |
| color: var(--accent) !important; | |
| } | |
| button, .btn { | |
| background-color: var(--accent) !important; | |
| color: #fff !important; | |
| border: none !important; | |
| } | |
| table, th, td { | |
| background-color: var(--bg-card) !important; | |
| color: var(--text-light) !important; | |
| } | |
| .MuiStack-root, .MuiBox-root { | |
| background: transparent !important; | |
| color: inherit !important; | |
| } | |
| [id*="ad"], .advertisement, .promo, .adsbygoogle { | |
| display: none !important; | |
| } | |
| img, svg { | |
| filter: brightness(0.85) contrast(1.15); | |
| } | |
| ::placeholder { | |
| color: var(--text-muted); | |
| } | |
| } | |
| `); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment