Skip to content

Dark Mode CSS Problem #10

Description

@ClancyDamon

I'm trying to implement dark mode styling for the control. I'm running into a major problem. I've figured out how to change most everything with the exception of even month div.row.month elements. This seems to be explicitly due to the following CSS inside of the gantt-element's gantt-element.js file, at line 3696:

.month:nth-of-type(even),
.day:nth-of-type(even) {
	background-color: #ddd;
}

This style is always being applied. Even when I've been able to adjust other style aspects of the elements that have this CSS, I'm incapable of changing this background-color style. Would it be possible to update your gantt-element to utilize a variable instead, so that the component can be easily altered? As an example, I was able to apply my desired dark mode CSS to everything else via just this in totality:

html[theme~="dark"] {
    --timeline-row-background: var(--lumo-shade-70pct); !important;
    --timeline-col-background-color: var(--lumo-shade-70pct); !important;
    --timeline-col-weekend: var(--lumo-shade-40pct); !important;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions