waymondrang / canvastyle

The ultimate stylization tool for Canvas LMS

 ,--.-,,-,--,    ,----.                        _,.---._      .=-.-. 
/==/  /|=|  | ,-.--` , \   _.-.      _.-.    ,-.' , -  `.   /==/_ / 
|==|_ ||=|, ||==|-  _.-` .-,.'|    .-,.'|   /==/_,  ,  - \ |==|, |  
|==| ,|/=| _||==|   `.-.|==|, |   |==|, |  |==|   .=.     ||==|  |  
|==|- `-' _ /==/_ ,    /|==|- |   |==|- |  |==|_ : ;=:  - |/==/. /  
|==|  _     |==|    .-' |==|, |   |==|, |  |==| , '='     |`--`-`   
|==|   .-. ,\==|_  ,`-._|==|- `-._|==|- `-._\==\ -    ,_ /  .=.     
/==/, //=/  /==/ ,     //==/ - , ,/==/ - , ,/'.='. -   .'  :=; :    
`--`-' `-`--`--`-----`` `--`-----'`--`-----'   `--`--''     `=`     

canvastyle's Issues

Default Style Persists in Inbox Page

Picture of Issue

Steps to Replicate

Prerequisites

• Have a valid Canvas Account

Steps

1. Log into a valid Canvas session
2. Select Inbox from the main navigation menu

Description

Entering the Canvas Inbox yields elements that still have the default "light-mode" styling.

They appear to all be under the over-arching div with the class conversations. It looks like the pertinent child elements onto which the background-color attribute should be changed would be as follows:

• The top "main" header
  • the header element with the panel class
• Each Email element on the left
  • all child elements of the ul element with the classes messages unstyled collectionViewItems
• the search box in the main header
  • the div element with the classes ac-input-box focused

Default Style Persists in Unpublished Courses

Picture of Issue

Steps to Replicate

Prerequisites

• Have a valid Canvas Account
• Be Enrolled in a Course that isn't Published

Steps

• Enter a valid Canvas session
• Click on Courses in the main navigation panel
• Click on the All Courses option in the Courses navigation

Description

All course-list-table-row elements that represent a class not yet published default to the standard "light mode" background color, unless hovered. I believe this can be remedied by overwriting the default background-color style declaration of the course-list-unpublished-course-row class.

Information

Computer Specifications

• ASUS ROG Zephyrus G15 (GA503QR)
• Processor: AMD Ryzen 9 5900HS with Radeon Graphics
• Ram: 40.0 GB (39.4 GB usable)
• 64-bit operating system, x64-based processor
• Pen and touch: Pen support
• OS: Windows 11 Home version 21H2
  • Installed On: 10/10/2021
  • OS build: 22000.376
• Laptop is on top of a collapsible plastic table
• The screen is angled about 105 degrees from closed

Connected Devices
I endeavored to include as much pertinent information as I could. Hopefully this is of use.

• Stock ASUS ROG barrel charger
  • Charger is placed face up on a wooden floor
• Anker USB-C Hub & connected Devices (Anker USB C Hub, Aluminum USB C Adapter with 4 USB 3.0 Ports, for MacBook Pro 2018/2017, ChromeBook, XPS, Galaxy S9/S8, and More)
  • Raleno 1080p Webcam, style: C30 (1080P Webcam, Desktop Camera with Dual Microphones, for PC/Mac Book/Laptop. Suitable for Windows, MacOS, NetWare, Linux)
  • Nektar GX61 (Nektar, 61-Key Impact GX61 Controller Keyboard)
  • 2 Connected Keyboards Below
• beyerdynamic SOUL BYRD (In-ear headset with balanced sound and good resolution)
• Logitech PRO X SUPERLIGHT (Logitech PRO X SUPERLIGHT Wireless Gaming Mouse - mouse - LIGHTSPEED - white)

Keyboard
Connected to the USB-C hub

• Primrose Lilac prime_e
  • Case: Primrose prime_e Stacked Acryllic Gasket Mount Case by Idyllic Keyboards
  • Mount: O-ring Burger Mount (Polypropylene plate)
  • Switches: POM Durocks
    • Lubed with 205g2105 7:3 mix
    • Previously filmed with Deskeys Gasket 3mm Switch Films, removed
    • POM housing
    • P3 (Proprietary UHMWPE blend) stem
    • 5 pin PCB mount
    • Spring: 63.5g SPRiT Complex Spring
  • Stabilizers: Two 2u Durock v2 Stabilizers (clear housings)
    • Holee Modded with BAND-AID® Brand Flexible Fabric Bandages XL, 10 Count
  • Keycaps: EnjoyPBT Milky Purple Doubleshot ABS
• cu7
  • Capsunlocked cu7 6-key macropad with rotary encoder
  • Aluminum CNC'd case
  • Switches
    • 2x JWK x qwertyqop Quartz linear
      • Lubed with 205g2105 7:3 mix
      • Top Housing: Polycarbonate / Nylon blend
      • Bottom Housing: Special Polyamide Blend
      • P3 (Proprietary UHMWPE blend) stem
      • 5 pin PCB mount
      • Spring: 63.5 stock spring
    • 1x Kailh Box Navy
      • SMD compatible
      • IP56 waterproof/dustproof
      • Clicky 90g Peak Switch
    • 3x "Lilyos" (Sakurios/Lilac Linear Frankenswitch)
      • Lubed with 205g2+105 7:3 mix
      • Top Housing: Sakurios Housing
      • Bottom Housing: Sakurios Housing
      • Stem: POM Jwk Lilac Stem
      • Spring: Stock 62g Sakurios Stem

Default Style Persists in Group Discussions Page

Picture of Issue

Steps to Replicate

Prerequisites

• Have a valid Canvas account
• Be a member of a Canvas Group

Steps

1. Enter a valid Canvas Session
2. Select Groups on the main navigation bar and click on a valid Canvas Group
3. In the Group Navigation menu pick on Discussions

Description

The main content window of the Group Discussions page keeps the default "white theme".

While I have not identified all elements that require changing, I believe a good place to start is the child elements of the main content div which doesn't seem to have super unique identifiers. The two div elements have the classes unpinned-discussions-v2__wrapper and closed-for-comments-discussions-v2__wrapper.

Default Style Persists in the Calendar

Entering the calendar mode on Canvas yields the above results. It appears the dark mode styling isn't being applied to these elements, even if it looks like the text color/font and such is.

From what I can tell, the calendars all have primary child tbody elements with the class fc-body for their content. In my testing, changing the background-color attribute of these elements changed the background properly, though in your own testing and application you may find different / more proper ways, given there is still a lot more styling to be done.

Default Style Persists in Group File Upload Button

Picture of Issue

Steps to Replicate

In a valid Canvas session, select a Group one is a participant in and go to the Files select in the navigation.

Description

As pictured, the file upload button has the default "white-mode" styling. Furthermore, the text color needs to be changed as well.

From what I can tell, you may change the background-color attribute of a div element with the classes fOyUs_bGBk ftPBL_bGBk ftPBL_doqw, although I cannot quite comprehend these classes. This is much more your area of expertise.

I did notice however in the css, that the style applied to it pertaining to background-color was as follows:

.ftPBL_bGBk:not(.ftPBL_bGiS) {
    background-color: var(--ftPBL-backgroundColor);
}

I believe changing the --ftPBL-backgroundColor could work; Otherwise simply reassigning the background-color attribute works as well.

Finally, the text color and color of the icon must be changed, for the icon perhaps simply inverting the colors could work.