# Betterer Canvas
name idea: even better canvas or Actually Better Canvas (ABC)
I don't like the direction bettercanvas (bettercampus) is heading so I forked it
They tried to change license but forgot to wipe the codebase for thier MIT licensed version, so this is a fully legal fork.
Enhancements to Canvas AND bettercanvas like dark mode, better todo list, GPA calculator, and more!
## Inquiries
To contact me, please email sandlerguy5@gmail.com, or you can open an issue within the "Issues" tab on GitHub.
If you are ksucpea and want to take this down, you can't, and I have [proof of legality](#proof-of-legality)
## Table of Contents
- [Features](#features)
- [Dev Installation](#dev-installation)
- [Usage](#usage)
- [Version Notes](#version-notes)
- [Color Reference](#color-reference)
- [Contributing](#contributing)
- [Authors](#authors)
## Features
Better Canvas introduces improvements to the Canvas user interface:
- Fully customizable dark mode (choose from premade options or manually edit dark mode)
- Automatic scheduling for dark mode
- Dashboard card color palletes
- Themes created by users (broken due to fork)
- Assignments due list
- Dashboard notes
- Custom fonts
- Condensed cards
- Dashboard grades
- Remove sidebar logo
- Customizable card links
- Gradient dashboard cards
- Advanced card customization
- GPA calculator (college and highschool)
- Browser wide popup assignment reminder
- Preview assignments and announcements from the dashboard
## Newly added features
- GPA presets
- Scheduled Reminder Popups (broken)
- backend stuff:
- Searching themes (the original didn't actually impliment that)
- made the dark mode into a css file instead of a reallllllly long string
- Card Styles (image size, card roundness, card spacing, width, height, theme compatible)
- Custom Background (by URL, theme compatible)
- Popup UI revamp
- NEW Better todo list (todo: hover preview, cutoff)
## Planned Features (by priority)
- widgets (music, timer)
- better sidebar
- better notes
- auto rotate theme + theme history + fix theme submissions
- mail assistent + ui revamp
- better calender (+ calender sync)
- better what if grade
- global search
- fix darkmode fixer
## Extra features that might be added:
- card grade position, card outline
- theme copy button
- revamp cards page UI
- streaks
- caching pages for faster loading
- liquid glass theme?
- animated backgrounds, rotating background, time/weather reactive backgrounds, maybe chache if it becomes an issue
- custom side logo
- transcribe lecture (if there is demand for it)
- flashcards
- goals
## Community suggestions (maybe will be done at some point)
- when opening assignments it will show you "if you get a 0 on this your grade will be _"
- quick modules button on cards
- module sorting (newest, oldest) (maybe grid view)
- grade leaderboard per class (opt in)
## Dev Installation
To install, run, and build with this repository locally,
- Clone the repository locally with
```bash
git clone https://github.com/GuySandler/betterercanvas
```
- Visit `chrome://extensions` in your browser. (replace chrome with your version of chromium)
- Enable developer mode by toggling the switch in the upper right corner of the viewport.
- Click the "Load upacked" button in the header.
- When prompted to open a file, select the root directory of this repository.
## Usage
To use Better Canvas, select your browser below to install the extension from a store.
[Chrome](https://chrome.google.com/webstore/detail/better-canvas/cndibmoanboadcifjkjbdpjgfedanolh)
[Firefox](https://addons.mozilla.org/addon/better-canvas/)
### How to use
- Once the extension is installed, navigate to your institution's Canvas homepage.
- To edit the available options, click on the "Extensions" button in the upper right corner of the viewport.
- When the menu opens, click on the Better Canvas extension.
- A menu will appear with configuration options for your Canvas homepage.
## Version Notes
#### Update 5.10
- Fixed dark mode bug in discussion text boxes
- Added new themes + fonts
- Card colors now change instantly
- Dark mode fixer feature
- Card customization now shows preview of image
- New sidebar options
- Dark mode buttons preview their appearance
- "Remove sidebar logo" feature
- "Hide recent feedback" feature
- Menu redesign
- Fixed card assignment bug
- Card assignment efficiency improvements
- Dark mode rework
- Dark mode now syncs
- Option to use device dark mode settings
- Improved todo list
- "Color coded tab icons" feature
- "Use card colors" option for todo list
## Color Reference
| Color | Hex |
| ---------- | ---------------------------------------------------------------- |
| Background |  #161616 |
| Text |  #ffffff |
| Accent 01 |  #ff002e |
| Accent 02 |  #ff5200 |
| Accent 03 |  #ff47ad |
## Contributing
### Add a new feature
To add a new feature, please follow these guidelines.
#### Identifier
- Should be a unqiue one/two word storage identifier to indicate its status. (ie "dark_mode" or "dashboard_grades")
- If it has sub options (options that are specific to the main feature) these will also each need a unique identifier.
- All options are synced and have a 8kb storage limit, so if your feature needs more than this please contact me.
#### Changes to html/popup.html
- Add the appropriate HTML into this file. The corresponding id and name (see below) should be the identifier.
- If it has no sub options, it should be put in the same container as the other options with no sub options:
```
```
- If it does have sub options it becomes it's own container:
```
```
#### Changes to js/popup.js
- Add the main identifier into the `syncedSwitches` array.
- If you have sub-options:
- Add these identifiers to the array found under the comment that says `//checkboxes`.
#### Changes to js/background.js
- Add all identifiers into the `syncedOptions` array.
- Add a default value for your option to the `default_options` array.
- Preferably this value should be `false` for booleans or ` ""` for strings (`null` can also be used if Canvas has a default for this option already)
#### Changes to js/content.js
- There should be a function(s) included in the this file that does the work. The name should clearly indicate it's purpose.
- Under `applyOptionsChanges()`, add a switch case to call this function when the menu toggle is changed.
- Depending on what your feature does, it needs to be told when to fire.
- If the function changes any aspect of the dashboard, it should be put inside `checkDashboardReady()`.
- If the function only adds css, it should be added to `applyAestheticChanges()`, and in this case should not be a separate function, instead add the css to the existing styles found in this function.
- Anything else should be put under `startExtension()` and should be placed no higher than the `checkDashboardReady` function found here.
### Add a new theme
To add a new theme, please follow these guidelines.
You can export a theme using the export tool in the menu and sending an email to me, or you can merge it here after doing the following:
#### Exporting
- Go to the Themes tab and export dark mode, card images, card colors, and custom font. - The only on/off toggles that need be included are `disable_color_overlay` and `gradient_cards`.
Any other toggles aren't necessary, so you should manually add these keys and the appropriate values in with the export code.
- Pick a unique id for the theme, doesn't matter how long this is.
#### Changes to js/popup.js
- Add the export code under `getTheme()`.
- Make sure it follows this format: `"theme-: { "exports": {"..."}, "preview": "..." }`
- For the preivew, try to pick the smallest image size from the card images (under ~50kb is perfect), or you can find a smaller display image that isn't included in the card images.
#### Changes to html/popup.html
- Add the following under all the other theme buttons:
```
```
- The theme name should be one/two words so it doesn't take up too much space.
## File structure
```
.
├── README.md
├── \_locales
│ ├── en
│ │ └── messages.json
│ └── es
│ └── messages.json
├── css
│ ├── content.css
│ ├── options.css
│ └── popup.css
├── html
│ ├── options.html
│ └── popup.html
├── icon
│ ├── icon-128.png
│ ├── icon-16.png
│ ├── icon-19.png
│ ├── icon-32.png
│ ├── icon-38.png
│ ├── icon-48.png
│ ├── icon-wide.png
│ ├── iconwpadding.png
│ └── oldicon-128.png
├── js
│ ├── background.js
│ ├── content.js
│ └── popup.js
└── manifest.json
```
### Update the file structure
#### Use the tree command
- Linux/Unix
- Install [tree command line tool](https://www.geeksforgeeks.org/tree-command-unixlinux/)
- Use the tree command to generate file structure:
```
tree
```
Learn more about tree commands for Linux/Unix [here](https://www.geeksforgeeks.org/tree-command-unixlinux/).
- Windows
- Use the tree command to generate file structure:
```
tree /
```
Learn more about tree commands for Windows [here](https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/tree).
## proof of legality
This is the version right before the monetization of bettercanvas, original license and all.
here is some proof the lisence was changed and this is based on the reverted MIT version 5.12.6
## Authors
#### Fork Owner
- [Guy](https://github.com/guysandler)
#### Original Owner
- [ksucpea](https://github.com/ksucpea)
#### Original Contributors
- [fudgeu](https://github.com/fudgeu)
- [Tibo Geeraerts](https://github.com/tibogeeraerts)
- [Jacob Mungle](https://github.com/Jelgnum)
- [FireIsGood](https://github.com/FireIsGood)
## License
[](https://opensource.org/licenses/MIT)
[](https://creativecommons.org/licenses/by-nc-sa/4.0/)
You can fork, modify, and use this code however you like with attributes, but no commercial use.
Copyright (c) 2026 Guy Sandler