search

ksucpea / bettercanvas

Dark mode, better todo list, GPA calculator, and more for Canvas
MIT License
86 stars 23 forks source link

Rubrics are not dark in dark mode #42

Open NintwnDude879 opened 8 months ago

NintwnDude879 commented 8 months ago

Screenshot 2023-10-26 182208

ksucpea commented 6 months ago

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 4 months ago

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 4 months ago

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 4 months ago

Something like this? image

ds196 commented 2 months ago

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 2 months ago

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