Color scheme is inverted in dark mode

[altius4444]

Problem description

The colors in the heatmap are the inverse of what I expect them to be. Lighter colors should denote less reviews and darker colors should denote more reviews
I tried enabling light theme and the issue got fixed, so I believe that the addon inverts the color scheme if dark theme in enabled. That must be causing the issue

Checklist

• I've restarted Anki to see if it helps
• I've verified that I use the latest version of the add-on by redownloading it from AnkiWeb
• I've verified that I use the latest version of Anki by checking at https://apps.ankiweb.net#download
• I've tried to disable other add-ons to see if there are any interactions present
• My issue disappears when I hold shift while starting Anki.
• I've checked if anyone else reported this problem before by looking through the issue reports. I also checked to see if there is a section about known issues in the add-on description, documentation, or README.

Information about your Anki set-up

N/A

Error message (if any)

N/A

[medProgAyat]

The current behavior is intentional, as defined in src/web/css/review-heatmap.css.
This is my first review, and I wanted to confirm whether the dark mode contrast (where darker areas indicate less activity) is the intended UX.
Please let me know if any adjustment is needed, or close the issue if it aligns with the design.

[medProgAyat]

I’ve tested the behavior and can confirm that the dark mode heatmap currently inverts the brightness — darker areas represent less activity.
Just wanted to make sure this is intentional before suggesting any changes.

[altius4444]

The current behavior is intentional, as defined in src/web/css/review-heatmap.css.

Just checked that, and yeah, you're right. Not sure why it's set to be so since Anki's default heatmap in the statistics page has the same color scheme for both light and dark mode

[ValiHar]

I can confirm this issue. Are there already any plans to fix this?

[henriquevro]

So, I found it counterintuitive too to have the colors darker when fewer revisions were made. So, with Copilot’s help, I changed the second line of the anki-review-heatmap.js in a way that keeps the same gradient in both light and dark mode.

__vite_style__.innerHTML = '/* Cal-HeatMap CSS */\n\n.cal-heatmap-container {\n display: block;\n}\n\n.cal-heatmap-container .graph\n{\n font-family: "Lucida Grande", Lucida, Verdana, sans-serif;\n}\n\n.cal-heatmap-container .graph-label\n{\n fill: #999;\n font-size: 10px\n}\n\n.cal-heatmap-container .graph, .cal-heatmap-container .graph-legend rect {\n shape-rendering: crispedges\n}\n\n.cal-heatmap-container .graph-rect\n{\n fill: #ededed\n}\n\n.cal-heatmap-container .graph-subdomain-group rect:hover\n{\n stroke: #000;\n stroke-width: 1px\n}\n\n.cal-heatmap-container .subdomain-text {\n font-size: 8px;\n fill: #999;\n pointer-events: none\n}\n\n.cal-heatmap-container .hover_cursor:hover {\n cursor: pointer\n}\n\n.cal-heatmap-container .qi {\n background-color: #999;\n fill: #999\n}\n\n/*\nRemove comment to apply this style to date with value equal to 0\n.q0\n{\n background-color: #fff;\n fill: #fff;\n stroke: #ededed\n}\n*/\n\n.cal-heatmap-container .q1\n{\n background-color: #dae289;\n fill: #dae289\n}\n\n.cal-heatmap-container .q2\n{\n background-color: #cedb9c;\n fill: #9cc069\n}\n\n.cal-heatmap-container .q3\n{\n background-color: #b5cf6b;\n fill: #669d45\n}\n\n.cal-heatmap-container .q4\n{\n background-color: #637939;\n fill: #637939\n}\n\n.cal-heatmap-container .q5\n{\n background-color: #3b6427;\n fill: #3b6427\n}\n\n.cal-heatmap-container rect.highlight\n{\n stroke:#444;\n stroke-width:1\n}\n\n.cal-heatmap-container text.highlight\n{\n fill: #444\n}\n\n.cal-heatmap-container rect.highlight-now\n{\n stroke: red\n}\n\n.cal-heatmap-container text.highlight-now\n{\n fill: red;\n font-weight: 800\n}\n\n.cal-heatmap-container .domain-background {\n fill: none;\n shape-rendering: crispedges\n}\n\n.cal-heatmap-container .day-name-rect {\n fill: transparent;\n}\n\n.cal-heatmap-container .day-name-text {\n font-size: 10px;\n fill: #999;\n}\n\n.ch-tooltip {\n padding: 10px;\n background: #222;\n color: #bbb;\n font-size: 12px;\n line-height: 1.4;\n width: 140px;\n position: absolute;\n z-index: 99999;\n text-align: center;\n border-radius: 2px;\n box-shadow: 2px 2px 2px rgba(0,0,0,0.2);\n display: none;\n box-sizing: border-box;\n}\n\n.ch-tooltip::after{\n position: absolute;\n width: 0;\n height: 0;\n border-color: transparent;\n border-style: solid;\n content: "";\n padding: 0;\n display: block;\n bottom: -6px;\n left: 50%;\n margin-left: -6px;\n border-width: 6px 6px 0;\n border-top-color: #222;\n}\n/* \nThis file is part of the Review Heatmap add-on for Anki\n\nCustom Heatmap CSS\n\nCopyright: (c) 2016-2022 Glutanimate <https://glutanimate.com/>\nLicense: GNU AGPLv3 <https://www.gnu.org/licenses/agpl.html>\n*/\n\n/* Special classes:\n"rh-platform-mac": Set when run on macOS\n"rh-platform-win": Set when run on Windows\n"rh-platform-lin": Set when run on Linux\n"rh-theme-olive", "rh-theme-lime", "rh-theme-ice",\n "rh-theme-magenta", "rh-theme-flame": Set when respective theme active\n"rh-mode-year": Set when calendar set to year mode\n"rh-mode-months": Set when calendar set to months mode\n"rh-view-deckbrowser", "rh-view-overview", "rh-view-stats": Set when drawn\n on respective view\n"rh-disable-stats": Set when streak stats disabled\n"rh-disable-heatmap": Set when heatmap disabled\n"night_mode": Set when night mode active (provided by Night Mode add-on)\n*/\n\n/* General layout */\n/* ################################################################### */\n\n.rh-container {\n margin-top: 1em;\n}\n\n.heatmap {\n display:inline-block;\n}\n.heatmap-controls {\n margin-bottom: 0;\n}\n\n/* Heatmap graph adjustments */\n/* ################################################################### */\n\n.cal-heatmap-container .graph {\n font-family: unset;\n}\n.graph-label {\n fill: #808080;\n}\n\n/* Graph rects */\n.cal-heatmap-container rect.highlight-now {\n stroke: black;\n}\n.cal-heatmap-container rect.highlight {\n stroke: #E9002E;\n}\n.cal-heatmap-container .graph-rect {\n fill: #eaeaea;\n}\n.night_mode .cal-heatmap-container .graph-rect {\n fill: #222222;\n}\n\n/* Heatmap hover tooltip */\n/* ################################################################### */\n\n.ch-tooltip {\n color: rgb(240, 240, 240);\n animation: 0.5s ease 0s normal forwards 1 fadein;\n -webkit-animation: 0.5s ease 0s normal forwards 1 fadein;\n}\n/* Delay tooltip using fadein */\n@keyframes fadein {\n 0% { opacity:0; }\n 66% { opacity:0; }\n 100% { opacity:0.9; }\n}\n@-webkit-keyframes fadein {\n 0% { opacity:0; }\n 66% { opacity:0; }\n 100% { opacity:0.9; }\n}\n\n/* Heatmap button area */\n/* ################################################################### */\n.alignleft {\n float: left;\n width:33.33333%;\n text-align:left;\n}\n.aligncenter {\n float: left;\n width:33.33333%;\n text-align:center;\n}\n.alignright {\n float: left;\n width:33.33333%;\n text-align:right;\n}\n\n/* Heatmap buttons */\n/* ################################################################### */\n\n/* Regular buttons */\n.hm-btn {\n height: 100%;\n display: inline-block;\n cursor: pointer;\n background: #e6e6e6;\n color: #808080;\n padding: 2px 8px;\n border-radius: 3px;\n margin-left: 2px;\n text-decoration: none;\n user-select: none;\n vertical-align: center;\n}\n.hm-btn:hover {\n background: #bfbfbf;\n}\n.hm-btn:active {\n background: #000;\n}\n.night_mode .hm-btn {\n background-color: #313d45;\n}\n.night_mode .hm-btn:hover {\n background-color: #374f5b;\n}\n.night_mode .hm-btn:active {\n background-color: #433376;\n}\n\n\n/* Options button */\n.opts-btn {\n padding: 2px 4px;\n}\n.opts-btn:hover {\n background: #bfbfbf;\n}\n.opts-btn>img {\n position:relative;\n top: calc(50% - 12px);\n height: 10px;\n width: 10px;\n}\n\n/* Heatmap activity type widget */\n/* ################################################################### */\n.hm-sel {\n display: inline-block;\n height: 100%;\n padding: 4px 8px;\n font-size: 80%;\n cursor: pointer;\n color: #808080;\n border-radius: 3px;\n user-select: none;\n border: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: url(qrc:/review_heatmap/icons/down.svg) 96% / 10% no-repeat #e6e6e6;\n}\nselect.hm-sel:hover {\n background: url(qrc:/review_heatmap/icons/down.svg) 96% / 10% no-repeat #bfbfbf;\n}\nselect.hm-sel:active, select.hm-sel:focus {\n background: url(qrc:/review_heatmap/icons/down.svg) 96% / 10% no-repeat #e6e6e6;\n}\n\n/* Heatmap links */\n/* ################################################################### */\n\n/* we use these instead of regular links to prevent bugs with page navigation,\n prevent the link color from changing on click, etc.*/\n\n.linkspan {\n cursor:pointer;\n color:blue;\n text-decoration:underline;\n}\n\n.night_mode .linkspan {\n color: white;\n}\n\n/* Streak stats */\n/* ################################################################### */\n\n/* TODO: investigate why we had two copies of these */\n.streak {margin-top: 0.5em;}\n.streak-info {\n margin-left: 1em;\n}\n.sstats {\n font-weight: bold;\n color: #E6E6E6;\n}\n\n\n\n\n\n/* Color themes */\n/* ################################################################### */\n\n\n/* FORECAST RECT COLORS */\n/*\n- same for every theme \n- reverse order because of negative value workaround \n*/\n.cal-heatmap-container .q1{fill: #525252}\n.cal-heatmap-container .q2{fill: #616161}\n.cal-heatmap-container .q3{fill: #707070}\n.cal-heatmap-container .q4{fill: #7F7F7F}\n.cal-heatmap-container .q5{fill: #8E8E8E}\n.cal-heatmap-container .q6{fill: #9D9D9D}\n.cal-heatmap-container .q7{fill: #ACACAC}\n.cal-heatmap-container .q8{fill: #BBBBBB}\n.cal-heatmap-container .q9{fill: #CACACA}\n.cal-heatmap-container .q10{fill: #D9D9D9}\n\n.night_mode .cal-heatmap-container .q1{fill: #5d5f5f}\n.night_mode .cal-heatmap-container .q2{fill: #585a5a}\n.night_mode .cal-heatmap-container .q3{fill: #535555}\n.night_mode .cal-heatmap-container .q4{fill: #4e5050}\n.night_mode .cal-heatmap-container .q5{fill: #494b4b}\n.night_mode .cal-heatmap-container .q6{fill: #444646}\n.night_mode .cal-heatmap-container .q7{fill: #3f4141}\n.night_mode .cal-heatmap-container .q8{fill: #3a3c3c}\n.night_mode .cal-heatmap-container .q9{fill: #353737}\n.night_mode .cal-heatmap-container .q10{fill: #313232}\n\n/* REVIEW HISTORY COLORS */\n/*\n- different between each theme\n*/\n\n/* olive */\n.rh-theme-olive .cal-heatmap-container .q11{fill: #dae289}\n.rh-theme-olive .cal-heatmap-container .q12{fill: #bbd179}\n.rh-theme-olive .cal-heatmap-container .q13{fill: #9cc069}\n.rh-theme-olive .cal-heatmap-container .q14{fill: #8ab45d}\n.rh-theme-olive .cal-heatmap-container .q15{fill: #78a851}\n.rh-theme-olive .cal-heatmap-container .q16{fill: #669d45}\n.rh-theme-olive .cal-heatmap-container .q17{fill: #648b3f}\n.rh-theme-olive .cal-heatmap-container .q18{fill: #637939}\n.rh-theme-olive .cal-heatmap-container .q19{fill: #4f6e30}\n.rh-theme-olive .cal-heatmap-container .q20{fill: #3b6427}\n\n.rh-theme-olive .rh-col11{color: #dae289}\n.rh-theme-olive .rh-col12{color: #bbd179}\n.rh-theme-olive .rh-col13{color: #9cc069}\n.rh-theme-olive .rh-col14{color: #8ab45d}\n.rh-theme-olive .rh-col15{color: #78a851}\n.rh-theme-olive .rh-col16{color: #669d45}\n.rh-theme-olive .rh-col17{color: #648b3f}\n.rh-theme-olive .rh-col18{color: #637939}\n.rh-theme-olive .rh-col19{color: #4f6e30}\n.rh-theme-olive .rh-col20{color: #3b6427}\n\n.night_mode .rh-theme-olive .cal-heatmap-container .q11{fill: #dae289}\n.night_mode .rh-theme-olive .cal-heatmap-container .q12{fill: #bbd179}\n.night_mode .rh-theme-olive .cal-heatmap-container .q13{fill: #9cc069}\n.night_mode .rh-theme-olive .cal-heatmap-container .q14{fill: #8ab45d}\n.night_mode .rh-theme-olive .cal-heatmap-container .q15{fill: #78a851}\n.night_mode .rh-theme-olive .cal-heatmap-container .q16{fill: #669d45}\n.night_mode .rh-theme-olive .cal-heatmap-container .q17{fill: #648b3f}\n.night_mode .rh-theme-olive .cal-heatmap-container .q18{fill: #637939}\n.night_mode .rh-theme-olive .cal-heatmap-container .q19{fill: #4f6e30}\n.night_mode .rh-theme-olive .cal-heatmap-container .q20{fill: #3b6427}\n\n.night_mode .rh-theme-olive .rh-col11{color: #dae289}\n.night_mode .rh-theme-olive .rh-col12{color: #bbd179}\n.night_mode .rh-theme-olive .rh-col13{color: #9cc069}\n.night_mode .rh-theme-olive .rh-col14{color: #8ab45d}\n.night_mode .rh-theme-olive .rh-col15{color: #78a851}\n.night_mode .rh-theme-olive .rh-col16{color: #669d45}\n.night_mode .rh-theme-olive .rh-col17{color: #648b3f}\n.night_mode .rh-theme-olive .rh-col18{color: #637939}\n.night_mode .rh-theme-olive .rh-col19{color: #4f6e30}\n.night_mode .rh-theme-olive .rh-col20{color: #3b6427}\n\n/* lime */\n.rh-theme-lime .cal-heatmap-container .q11{fill: #d6e685}\n.rh-theme-lime .cal-heatmap-container .q12{fill: #bddb7a}\n.rh-theme-lime .cal-heatmap-container .q13{fill: #a4d06f}\n.rh-theme-lime .cal-heatmap-container .q14{fill: #8cc665}\n.rh-theme-lime .cal-heatmap-container .q15{fill: #74ba58}\n.rh-theme-lime .cal-heatmap-container .q16{fill: #5cae4c}\n.rh-theme-lime .cal-heatmap-container .q17{fill: #44a340}\n.rh-theme-lime .cal-heatmap-container .q18{fill: #378f36}\n.rh-theme-lime .cal-heatmap-container .q19{fill: #2a7b2c}\n.rh-theme-lime .cal-heatmap-container .q20{fill: #1e6823}\n\n.rh-theme-lime .rh-col11{color: #d6e685}\n.rh-theme-lime .rh-col12{color: #bddb7a}\n.rh-theme-lime .rh-col13{color: #a4d06f}\n.rh-theme-lime .rh-col14{color: #8cc665}\n.rh-theme-lime .rh-col15{color: #74ba58}\n.rh-theme-lime .rh-col16{color: #5cae4c}\n.rh-theme-lime .rh-col17{color: #44a340}\n.rh-theme-lime .rh-col18{color: #378f36}\n.rh-theme-lime .rh-col19{color: #2a7b2c}\n.rh-theme-lime .rh-col20{color: #1e6823}\n\n.night_mode .rh-theme-lime .cal-heatmap-container .q11{fill: #d6e685}\n.night_mode .rh-theme-lime .cal-heatmap-container .q12{fill: #bddb7a}\n.night_mode .rh-theme-lime .cal-heatmap-container .q13{fill: #a4d06f}\n.night_mode .rh-theme-lime .cal-heatmap-container .q14{fill: #8cc665}\n.night_mode .rh-theme-lime .cal-heatmap-container .q15{fill: #74ba58}\n.night_mode .rh-theme-lime .cal-heatmap-container .q16{fill: #5cae4c}\n.night_mode .rh-theme-lime .cal-heatmap-container .q17{fill: #44a340}\n.night_mode .rh-theme-lime .cal-heatmap-container .q18{fill: #378f36}\n.night_mode .rh-theme-lime .cal-heatmap-container .q19{fill: #2a7b2c}\n.night_mode .rh-theme-lime .cal-heatmap-container .q20{fill: #1e6823}\n\n.night_mode .rh-theme-lime .rh-col11{color: #d6e685}\n.night_mode .rh-theme-lime .rh-col12{color: #bddb7a}\n.night_mode .rh-theme-lime .rh-col13{color: #a4d06f}\n.night_mode .rh-theme-lime .rh-col14{color: #8cc665}\n.night_mode .rh-theme-lime .rh-col15{color: #74ba58}\n.night_mode .rh-theme-lime .rh-col16{color: #5cae4c}\n.night_mode .rh-theme-lime .rh-col17{color: #44a340}\n.night_mode .rh-theme-lime .rh-col18{color: #378f36}\n.night_mode .rh-theme-lime .rh-col19{color: #2a7b2c}\n.night_mode .rh-theme-lime .rh-col20{color: #1e6823}\n\n/* ice */\n.rh-theme-ice .cal-heatmap-container .q11{fill: #a8d5f6}\n.rh-theme-ice .cal-heatmap-container .q12{fill: #95c8f3}\n.rh-theme-ice .cal-heatmap-container .q13{fill: #82bbf0}\n.rh-theme-ice .cal-heatmap-container .q14{fill: #70afee}\n.rh-theme-ice .cal-heatmap-container .q15{fill: #5da2eb}\n.rh-theme-ice .cal-heatmap-container .q16{fill: #4a95e8}\n.rh-theme-ice .cal-heatmap-container .q17{fill: #3889e6}\n.rh-theme-ice .cal-heatmap-container .q18{fill: #257ce3}\n.rh-theme-ice .cal-heatmap-container .q19{fill: #126fe0}\n.rh-theme-ice .cal-heatmap-container .q20{fill: #0063de}\n\n.rh-theme-ice .rh-col11{color: #a8d5f6}\n.rh-theme-ice .rh-col12{color: #95c8f3}\n.rh-theme-ice .rh-col13{color: #82bbf0}\n.rh-theme-ice .rh-col14{color: #70afee}\n.rh-theme-ice .rh-col15{color: #5da2eb}\n.rh-theme-ice .rh-col16{color: #4a95e8}\n.rh-theme-ice .rh-col17{color: #3889e6}\n.rh-theme-ice .rh-col18{color: #257ce3}\n.rh-theme-ice .rh-col19{color: #126fe0}\n.rh-theme-ice .rh-col20{color: #0063de}\n\n.night_mode .rh-theme-ice .cal-heatmap-container .q11{fill: #a8d5f6}\n.night_mode .rh-theme-ice .cal-heatmap-container .q12{fill: #95c8f3}\n.night_mode .rh-theme-ice .cal-heatmap-container .q13{fill: #82bbf0}\n.night_mode .rh-theme-ice .cal-heatmap-container .q14{fill: #70afee}\n.night_mode .rh-theme-ice .cal-heatmap-container .q15{fill: #5da2eb}\n.night_mode .rh-theme-ice .cal-heatmap-container .q16{fill: #4a95e8}\n.night_mode .rh-theme-ice .cal-heatmap-container .q17{fill: #3889e6}\n.night_mode .rh-theme-ice .cal-heatmap-container .q18{fill: #257ce3}\n.night_mode .rh-theme-ice .cal-heatmap-container .q19{fill: #126fe0}\n.night_mode .rh-theme-ice .cal-heatmap-container .q20{fill: #0063de}\n\n.night_mode .rh-theme-ice .rh-col11{color: #a8d5f6}\n.night_mode .rh-theme-ice .rh-col12{color: #95c8f3}\n.night_mode .rh-theme-ice .rh-col13{color: #82bbf0}\n.night_mode .rh-theme-ice .rh-col14{color: #70afee}\n.night_mode .rh-theme-ice .rh-col15{color: #5da2eb}\n.night_mode .rh-theme-ice .rh-col16{color: #4a95e8}\n.night_mode .rh-theme-ice .rh-col17{color: #3889e6}\n.night_mode .rh-theme-ice .rh-col18{color: #257ce3}\n.night_mode .rh-theme-ice .rh-col19{color: #126fe0}\n.night_mode .rh-theme-ice .rh-col20{color: #0063de}\n\n/* magenta */\n.rh-theme-magenta .cal-heatmap-container .q11{fill: #fde0dd}\n.rh-theme-magenta .cal-heatmap-container .q12{fill: #fcc5c0}\n.rh-theme-magenta .cal-heatmap-container .q13{fill: #fa9fb5}\n.rh-theme-magenta .cal-heatmap-container .q14{fill: #f768a1}\n.rh-theme-magenta .cal-heatmap-container .q15{fill: #ea4e9c}\n.rh-theme-magenta .cal-heatmap-container .q16{fill: #dd3497}\n.rh-theme-magenta .cal-heatmap-container .q17{fill: #ae017e}\n.rh-theme-magenta .cal-heatmap-container .q18{fill: #7a0177}\n.rh-theme-magenta .cal-heatmap-container .q19{fill: #610070}\n.rh-theme-magenta .cal-heatmap-container .q20{fill: #49006a}\n\n.rh-theme-magenta .rh-col11{color: #fde0dd}\n.rh-theme-magenta .rh-col12{color: #fcc5c0}\n.rh-theme-magenta .rh-col13{color: #fa9fb5}\n.rh-theme-magenta .rh-col14{color: #f768a1}\n.rh-theme-magenta .rh-col15{color: #ea4e9c}\n.rh-theme-magenta .rh-col16{color: #dd3497}\n.rh-theme-magenta .rh-col17{color: #ae017e}\n.rh-theme-magenta .rh-col18{color: #7a0177}\n.rh-theme-magenta .rh-col19{color: #610070}\n.rh-theme-magenta .rh-col20{color: #49006a}\n\n.night_mode .rh-theme-magenta .cal-heatmap-container .q11{fill: #fde0dd}\n.night_mode .rh-theme-magenta .cal-heatmap-container .q12{fill: #fcc5c0}\n.night_mode .rh-theme-magenta .cal-heatmap-container .q13{fill: #fa9fb5}\n.night_mode .rh-theme-magenta .cal-heatmap-container .q14{fill: #f768a1}\n.night_mode .rh-theme-magenta .cal-heatmap-container .q15{fill: #ea4e9c}\n.night_mode .rh-theme-magenta .cal-heatmap-container .q16{fill: #dd3497}\n.night_mode .rh-theme-magenta .cal-heatmap-container .q17{fill: #ae017e}\n.night_mode .rh-theme-magenta .cal-heatmap-container .q18{fill: #7a0177}\n.night_mode .rh-theme-magenta .cal-heatmap-container .q19{fill: #610070}\n.night_mode .rh-theme-magenta .cal-heatmap-container .q20{fill: #49006a}\n\n.night_mode .rh-theme-magenta .rh-col11{color: #fde0dd}\n.night_mode .rh-theme-magenta .rh-col12{color: #fcc5c0}\n.night_mode .rh-theme-magenta .rh-col13{color: #fa9fb5}\n.night_mode .rh-theme-magenta .rh-col14{color: #f768a1}\n.night_mode .rh-theme-magenta .rh-col15{color: #ea4e9c}\n.night_mode .rh-theme-magenta .rh-col16{color: #dd3497}\n.night_mode .rh-theme-magenta .rh-col17{color: #ae017e}\n.night_mode .rh-theme-magenta .rh-col18{color: #7a0177}\n.night_mode .rh-theme-magenta .rh-col19{color: #610070}\n.night_mode .rh-theme-magenta .rh-col20{color: #49006a}\n\n\n/* flame */\n.rh-theme-flame .cal-heatmap-container .q11{fill: #ffeda0}\n.rh-theme-flame .cal-heatmap-container .q12{fill: #fed976}\n.rh-theme-flame .cal-heatmap-container .q13{fill: #feb24c}\n.rh-theme-flame .cal-heatmap-container .q14{fill: #fd8d3c}\n.rh-theme-flame .cal-heatmap-container .q15{fill: #fc6d33}\n.rh-theme-flame .cal-heatmap-container .q16{fill: #fc4e2a}\n.rh-theme-flame .cal-heatmap-container .q17{fill: #e31a1c}\n.rh-theme-flame .cal-heatmap-container .q18{fill: #d00d21}\n.rh-theme-flame .cal-heatmap-container .q19{fill: #bd0026}\n.rh-theme-flame .cal-heatmap-container .q20{fill: #800026}\n\n.rh-theme-flame .rh-col11{color: #ffeda0}\n.rh-theme-flame .rh-col12{color: #fed976}\n.rh-theme-flame .rh-col13{color: #feb24c}\n.rh-theme-flame .rh-col14{color: #fd8d3c}\n.rh-theme-flame .rh-col15{color: #fc6d33}\n.rh-theme-flame .rh-col16{color: #fc4e2a}\n.rh-theme-flame .rh-col17{color: #e31a1c}\n.rh-theme-flame .rh-col18{color: #d00d21}\n.rh-theme-flame .rh-col19{color: #bd0026}\n.rh-theme-flame .rh-col20{color: #800026}\n\n.night_mode .rh-theme-flame .cal-heatmap-container .q11{fill: #ffeda0}\n.night_mode .rh-theme-flame .cal-heatmap-container .q12{fill: #fed976}\n.night_mode .rh-theme-flame .cal-heatmap-container .q13{fill: #feb24c}\n.night_mode .rh-theme-flame .cal-heatmap-container .q14{fill: #fd8d3c}\n.night_mode .rh-theme-flame .cal-heatmap-container .q15{fill: #fc6d33}\n.night_mode .rh-theme-flame .cal-heatmap-container .q16{fill: #fc4e2a}\n.night_mode .rh-theme-flame .cal-heatmap-container .q17{fill: #e31a1c}\n.night_mode .rh-theme-flame .cal-heatmap-container .q18{fill: #d00d21}\n.night_mode .rh-theme-flame .cal-heatmap-container .q19{fill: #bd0026}\n.night_mode .rh-theme-flame .cal-heatmap-container .q20{fill: #800026}\n\n.night_mode .rh-theme-flame .rh-col11{color: #ffeda0}\n.night_mode .rh-theme-flame .rh-col12{color: #fed976}\n.night_mode .rh-theme-flame .rh-col13{color: #feb24c}\n.night_mode .rh-theme-flame .rh-col14{color: #fd8d3c}\n.night_mode .rh-theme-flame .rh-col15{color: #fc6d33}\n.night_mode .rh-theme-flame .rh-col16{color: #fc4e2a}\n.night_mode .rh-theme-flame .rh-col17{color: #e31a1c}\n.night_mode .rh-theme-flame .rh-col18{color: #d00d21}\n.night_mode .rh-theme-flame .rh-col19{color: #bd0026}\n.night_mode .rh-theme-flame .rh-col20{color: #800026}\n\n\n/* Platform-specific adjustments / workarounds */\n/* ################################################################### */\n';

Probably not the best solution, but it is the one that works for me while saving the most time. Maybe in a future update, this could be a toggle in the add-on configuration to choose whether the colors should be inverted depending on the light/dark mode or not.