Canvas Sidebar Colorizer UserScript

canvas-colorizer.userscript.js

// ==UserScript==
// @name         Canvas Sidebar Colorizer
// @namespace    http://kevinhill.codes/
// @version      0.2
// @description  Change the sidebar color
// @author       You
// @match        https://sierra.instructure.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    document.querySelector('head').innerHTML += `
    <style type="text/css" rel="stylesheet">
      .ic-app-header__menu-list-link, .menu-item__text, .gnct_inst_menu_icon {
        color: #000 !important;
      }
      .ic-app-header__menu-list-link .ic-icon-svg {
        fill: #000 !important;
      }
    </style>`;

    const CanvasColors = {
        Brick: "#BD3C14",
        Red: "#FF2717",
        Magenta: "#E71F63",
        Purple: "#8F3E97",
        "Deep Purple": "#65499D",
        Indigo: "#4554A4",
        Blue: "#1770AB",
        "Light Blue": "#0B9BE3",
        Cyan: "#06A3B7",
        Teal: "#009688",
        Green: "#009606",
        Olive: "#8D9900",
        Pumpkin: "#D97900",
        Orange: "#FD5D10",
        Pink: "#F06291",
    };

    const classColors = [
        [350169, "#EDC900"],
        [350156, "#0B9BE3"]
    ];

    const h = document.getElementById("header");
    const setBgColor = color => (h.style.backgroundColor = color);
    const addClass = (e, cls) => e.classList.add(cls);
    const urlContains = num => window.location.href.indexOf(num) > -1;

    for (const [crn, color] of classColors) {
        if (urlContains(crn)) {
            setBgColor(color);
        }
    }
})();