Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-01-23 02:36:05 +00:00
Code Issues Projects Releases Wiki Activity

fix(heatmap): use app theme class instead of prefers-color-scheme

Browse source 
Replace @media (prefers-color-scheme: dark) with :host-context(.isDarkTheme)
so heatmap labels adapt to app-level theme switching, not just OS preference.

- Use var(--text-color-muted) for label text colors (auto-adapts to theme)
- Use CSS variables for backgrounds, scrollbars, and outlines
- Remove hardcoded rgba() colors in favor of theme-aware variables

Fixes #5883
This commit is contained in:
Johannes Millan 2026-01-05 12:20:18 +01:00
parent 7838d34fb0
commit 159b28948f
1 changed files with 21 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/app/features/metric/activity-heatmap/activity-heatmap.component.scss
View file

@ -41,7 +41,7 @@
flex-direction: column;
gap: 8px;
padding: 16px;
background: rgba(0, 0, 0, 0.02);
background: var(--c-dark-10);
border-radius: 4px;
}
@ -67,16 +67,16 @@
}
&::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
background: var(--c-dark-10);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
background: var(--c-dark-20);
border-radius: 4px;
&:hover {
background: rgba(0, 0, 0, 0.3);
background: var(--c-dark-30);
}
}
}
@ -87,7 +87,7 @@
font-size: 12px;
line-height: 12px;
height: 12px;
color: rgba(0, 0, 0, 0.6);
color: var(--text-color-muted);
flex-shrink: 0;
.month-label {
@ -101,7 +101,7 @@
flex-direction: column;
gap: 2px;
font-size: 10px;
color: rgba(0, 0, 0, 0.6);
color: var(--text-color-muted);
padding-right: 4px;
width: 40px;
text-align: right;
@ -147,7 +147,7 @@
}
&.level-0 {
background: rgba(0, 0, 0, 0.05);
background: var(--c-dark-10);
}
&.level-1 {
@ -168,7 +168,7 @@
&:not(.empty):hover {
transform: scale(1.3);
outline: 1px solid rgba(0, 0, 0, 0.2);
outline: 1px solid var(--c-dark-20);
z-index: 1;
}
}
@ -179,7 +179,7 @@
justify-content: flex-end;
gap: 4px;
font-size: 11px;
color: rgba(0, 0, 0, 0.6);
color: var(--text-color-muted);
padding-right: 4px;
span {
@ -192,7 +192,7 @@
border-radius: 2px;
&.level-0 {
background: rgba(0, 0, 0, 0.05);
background: var(--c-dark-10);
}
&.level-1 {
@ -214,38 +214,36 @@
}
// Dark theme support
@media (prefers-color-scheme: dark) {
:host-context(.isDarkTheme) {
.heatmap-container {
background: rgba(255, 255, 255, 0.02);
}
.heatmap-months,
.day-labels,
.heatmap-legend {
color: rgba(255, 255, 255, 0.6);
background: var(--c-light-05);
}
.scrollable-content {
&::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
background: var(--c-light-05);
}
&::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
background: var(--c-light-10);
&:hover {
background: rgba(255, 255, 255, 0.3);
background: var(--c-light-33);
}
}
}
.day {
&.level-0 {
background: rgba(255, 255, 255, 0.05);
background: var(--c-light-05);
}
&:not(.empty):hover {
outline-color: rgba(255, 255, 255, 0.2);
outline-color: var(--c-light-10);
}
}
.heatmap-legend .legend-item.level-0 {
background: var(--c-light-05);
}
}