ksucpea/bettercanvas

Rubrics are not dark in dark mode

Opened this issue · 6 comments

ksucpea commented

Any chance you know how to get the css selector for this (or any of the other issues you've brang up)? None of my professors use this rubric feature so I can't fix it until I figure that out.

ds196 commented

Hello,

I have this same issue. The new automatic dark mode fixer fixes this issue nicely, but it would still be nice to have this fixed in the extension instead of running the fixer every time we open an assignment with a rubric. Here is the output of the dark mode fixer: CanvasRubricDarkModeInspector.txt

I attempted to look for some CSS selectors, and maybe found a few: .react-rubric, .css-1myyqst-view-table .css-uysa3a-view-row, .css-71iz6n-view-rowHeader

Please let me know if I can provide any more information.

Thanks,
David

ksucpea commented

I reread your comment and originally I assumed you were using the dark mode inspector in the report an issue tab so ignore my previous comment. Could you send a screenshot of the rubric page with the selector highlighted in the inspect element tab?

ds196 commented

Something like this?
image

ds196 commented

I was playing around with CSS and figured out how to fix the rubric
No variables because they weren't working...
And I can't figure out for the life of me how to fix the border color, but other than that it works perfect

The code:

[class*="-colHeader"] {
    color: #e8e8e8;
}

[class*="-view-row"] {
    background: #1f1f1f;
    color: #e8e8e8;
}

[class*="-view-cell"] {
    background: #1f1f1f;
    color: #e8e8e8;
}

Preview:
image

ds196 commented

Ok, fixed it
Now border colors work
Also cleaned up code
Please pardon my lack of knowledge of CSS

Code:

/* "Select Grader" */
[class*="-formFieldLayout"] [class*="-formFieldLabel"] {
    color: #c4c4c4;
}

.react-rubric table th,
.react-rubric table td {
    background: #1f1f1f;
    color: #e8e8e8;
    border: 2px solid #363535;
}

.react-rubric table td div.rating-tier {
    border-left: 3px solid #5a5a5a;
}

Preview:
image