search

ksucpea / bettercanvas

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

Dark mode stylesheet precedence + input element styling changes #45

Closed fudgeu closed 8 months ago

fudgeu commented 8 months ago

Hi! Opening this PR to help fix a few things that made BetterCanvas' dark mode mostly unusable at my institution (UCF).

The big one, as already mentioned in issue #15, is that the course navigation sidebar remains white with dark mode enabled. This happens because UCF has a custom stylesheet applied on top of Canvas that modifies the navigation pane with it's own background color, and on top of that they also use the !important modifier. This custom stylesheet is taking precedence over BetterCanvas.

Changing the darkcss stylesheet to get inserted after <head> (rather than before) seems to fix this, and should also help make sure that BetterCanvas' stylesheet gets precedence over any custom stylesheets other institutions may be using (or otherwise).

(Also largely related and on top of this, the dark theme CSS had a typo for the navigation pane classname. Changed #leftside to #left-side lol)

SidebarComp Course Navigation - Before and After

The other change mostly includes changes to some input elements, such as the ones found in any course's 'Grades' page and some search bars around Canvas. They were only getting partly dark-mode themed, as seen in the screenshots below. The dropdown itself found on any 'Grades' page also was not themed at all. I've added the corresponding classnames and ids to the darkmode stylesheet, which seems to have covered most of the missing styling that I've found at least.

GradesDropdownComp Dropdown - Before and After

SearchBarComp Searchbar - Before and After

If you have any other questions/requests for changes, lmk! Thanks!

ksucpea commented 8 months ago

Looks good, thank you for your contributions 👍

fudgeu commented 8 months ago

Awesome, thank you for developing the extension!