To be used with BetterCanvas (https://github.com/ksucpea/bettercanvas). Install by pressing the "Raw" button.

canvas-catppuccin.user.css

/* ==UserStyle==
@name           Canvas Catppuccin
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    To be used with BetterCanvas (https://github.com/ksucpea/bettercanvas)
@author         watatomo
@updateURL      https://gist.github.com/watatomo/e3ca157cca0cff01e8756179f094ff46/raw/fc4571cd65b2e7f40b138997a25c6b2513324e5b/canvas-catppuccin.user.css
@preprocessor   stylus

@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
@var select accent "Accent" ["Rosewater", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue*", "Sapphire", "Sky", "Lavender", "Gray"]
==/UserStyle== */
@-moz-document domain("instructure.com") {
    if (theme == "Latte") {
        $rosewater = #dc8a78;
        $flamingo = #dd7878;
        $pink = #ea76cb;
        $mauve = #8839ef;
        $red = #d20f39;
        $maroon = #e64553;
        $peach = #fe640b;
        $yellow = #df8e1d;
        $green = #40a02b;
        $teal = #179299;
        $sky = #04a5e5;
        $sapphire = #209fb5;
        $blue = #1e66f5;
        $lavender = #7287fd;
        $text = #4c4f69;
        $subtext1 = #5c5f77;
        $subtext0 = #6c6f85;
        $overlay2 = #7c7f93;
        $overlay1 = #8c8fa1;
        $overlay0 = #9ca0b0;
        $surface2 = #acb0be;
        $surface1 = #bcc0cc;
        $surface0 = #ccd0da;
        $base = #eff1f5;
        $mantle = #e6e9ef;
        $crust = #dce0e8;
    } else if (theme=="Frappe") {
        $rosewater = #f2d5cf;
        $flamingo = #eebebe;
        $pink = #f4b8e4;
        $mauve = #ca9ee6;
        $red = #e78284;
        $maroon = #ea999c;
        $peach = #ef9f76;
        $yellow = #e5c890;
        $green = #a6d189;
        $teal = #81c8be;
        $sky = #99d1db;
        $sapphire = #85c1dc;
        $blue = #8caaee;
        $lavender = #babbf1;
        $text = #c6d0f5;
        $subtext1 = #b5bfe2;
        $subtext0 = #a5adce;
        $overlay2 = #949cbb;
        $overlay1 = #838ba7;
        $overlay0 = #737994;
        $surface2 = #626880;
        $surface1 = #51576d;
        $surface0 = #414559;
        $base = #303446;
        $mantle = #292c3c;
        $crust = #232634;
    } else if (theme=="Macchiato") {
        $rosewater = #f4dbd6;
        $flamingo = #f0c6c6;
        $pink = #f5bde6;
        $mauve = #c6a0f6;
        $red = #ed8796;
        $maroon = #ee99a0;
        $peach = #f5a97f;
        $yellow = #eed49f;
        $green = #a6da95;
        $teal = #8bd5ca;
        $sky = #91d7e3;
        $sapphire = #7dc4e4;
        $blue = #8aadf4;
        $lavender = #b7bdf8;
        $text = #cad3f5;
        $subtext1 = #b8c0e0;
        $subtext0 = #a5adcb;
        $overlay2 = #939ab7;
        $overlay1 = #8087a2;
        $overlay0 = #6e738d;
        $surface2 = #5b6078;
        $surface1 = #494d64;
        $surface0 = #363a4f;
        $base = #24273a;
        $mantle = #1e2030;
        $crust = #181926;
    } else if (theme=="Mocha") {
        $rosewater = #f5e0dc;
        $flamingo = #f2cdcd;
        $pink = #f5c2e7;
        $mauve = #cba6f7;
        $red = #f38ba8;
        $maroon = #eba0ac;
        $peach = #fab387;
        $yellow = #f9e2af;
        $green = #a6e3a1;
        $teal = #94e2d5;
        $sky = #89dceb;
        $sapphire = #74c7ec;
        $lavender = #b4befe;
        $blue = #89b4fa;
        $text = #cdd6f4;
        $subtext1 = #bac2de;
        $subtext0 = #a6adc8;
        $overlay2 = #9399b2;
        $overlay1 = #7f849c;
        $overlay0 = #6c7086;
        $surface2 = #585b70;
        $surface1 = #45475a;
        $surface0 = #313244;
        $base = #1e1e2e;
        $mantle = #181825;
        $crust = #11111b;
    }
    
    if (accent == "Rosewater") {
        $accent = $rosewater;
    } else if (accent == "Flamingo") {
        $accent = $flamingo;
    } else if (accent == "Pink") {
        $accent = $pink;
    } else if (accent == "Mauve") {
        $accent = $mauve;
    } else if (accent == "Red") {
        $accent = $red;
    } else if (accent == "Maroon") {
        $accent = $maroon;
    } else if (accent == "Peach") {
        $accent = $peach;
    } else if (accent == "Yellow") {
        $accent = $yellow;
    } else if (accent == "Green") {
        $accent = $green;
    } else if (accent == "Teal") {
        $accent = $teal;
    } else if (accent == "Blue") {
        $accent = $blue;
    } else if (accent == "Sapphire") {
        $accent = $sapphire;
    } else if (accent == "Sky") {
        $accent = $sky;
    } else if (accent == "Lavender") {
        $accent = $lavender;
    } else if (accent == "Gray") {
        $accent = $subtext0;
    }
    
    :root {
        --ic-brand-header-image: url("");
        --ic-brand-font-color-dark: $accent;
        --ic-brand-global-nav-bgd: $crust;
        --ic-brand-global-nav-menu-item__text-color: $text;
        
        --fOyUs-focusColorInfo: $sapphire;
        --fOyUs-borderColorBrand: $accent;
        --fOyUs-backgroundBrand: $accent;
        --fOyUs-colorPrimaryInverse: $crust;
        
        --eMdva-successBorderColor: $green;
        --eMdva-successIconBackground: $green;
        --eMdva-infoBorderColor: $sapphire;
        --eMdva-infoIconBackground: $sapphire;
        --eMdva-warningBorderColor: $peach;
        --eMdva-warningIconBackground: $peach;
        --eMdva-dangerBorderColor: $red;
        --eMdva-dangerIconBackground: $red;
        
        --wIZqC-color: $text;
        --wIZqC-colorInverse: $crust;
        --wIZqC-trackColor: $surface1;
        --wIZqC-trackBorderColor:  $overlay2;
        --wIZqC-trackBorderColorInverse: $surface1;
        --wIZqC-meterColorBrand: $accent;
        --wIZqC-meterColorBrandInverse: $accent;
        --wIZqC-meterColorInfo: $sapphire;
        --wIZqC-meterColorInfoInverse: $sapphire;
        --wIZqC-meterColorSuccess: $green;
        --wIZqC-meterColorSuccessInverse: $green;
        --wIZqC-meterColorDanger: $red;
        --wIZqC-meterColorDangerInverse: $red;
        --wIZqC-meterColorAlert: $pink;
        --wIZqC-meterColorAlertInverse: $pink;
        --wIZqC-meterColorWarning: $peach;
        --wIZqC-meterColorWarningInverse: $peach;
        
        --dEBmf-color: $subtext0;
        
        --dUOHu-brandColor: $accent;
        
        --emSEn-borderColor: $surface1;
    }
    
    body {
        --tfc-dark-mode-text-primary: $text !important;
        --tfc-dark-mode-text-secondary: $overlay1 !important;
        --tfc-dark-mode-bg-primary: $mantle !important;
        --tfc-dark-mode-bg-primary-2: $accent !important;
        --tfc-dark-mode-bg-secondary: $surface0 !important;
    }
    
    .nav-badge
    #new_activity_button span,
    #dashboard-planner-header > div > span > span > span,
    #submit-button,
    .fQfxa_dqAF.fQfxa_eCSh,
    [data-testid="online_upload"] * {
        color: $crust !important;
    }
    
    [data-testid="attempt-tab"] > [style^="background-color"][style*="rgb(245"] {
        border-top-color: $surface0 !important;
        background: $base !important;
    }
    
    #immersive_reader_mount_point {
        svg {
            path[fill="#000000"] {
                fill: $subtext0 !important;
            }
            
            path[fill="#0197F2"] {
                fill: $sapphire !important;
            }
        }
    }
    
    #planner-today-btn > span {
        background: $surface0;
        border-color: $surface2;
        color: $text;
    }
    
    #right-side-wrapper {
        svg {
            &.tasks-extension-settings {
                fill: $overlay1 !important;
            }
            
            > path[fill*="62"] {
                fill: $overlay1 !important;
            }
        }
    }
    
    .react-rubric td, .react-rubric th {
        border-color: $surface1;
    }
    
    .bhdLno,
    .bloNZV,
    .gHUUHu {
        border-bottom-color: $surface1;
    }
    
    .eUfGYW,
    .khGBIg {
        color: $subtext0;
    }
    
    .kCQmsc {
        color: $overlay1;
    }
    
    .ic-app-header__logomark-container {
        display: none;
    }
    
    .menu-item__badge {
        --bctextlight0: $crust;
    }
    
    .dFhLxo {
        background-color: $red;
        
        svg {
            fill: $crust !important;
        }
    }
    
    [fill="#000000"] {
        fill: $subtext0 !important;
    }
    
    [fill="#0197F2"] {
        fill: $sapphire !important;
    }
    
    [color="#ec412d"] {
        color: $red !important;
    }
    
    [stroke="#ec412d"] {
        stroke: $red !important;
    }
    
    [style*="background-color:"][style*="rgb(245"][style*="245"][style*="245"] {
        background-color: $base !important;
    }
    
    [style*="background-color:"][style*="rgb(107"][style*="119"][style*="128"] {
        background-color: $surface1 !important;
    }
    
    span[style*="color:"][style*="#000000;"] {
        color: $text !important;
    }
    
    span[style*="color:"][style*="#34495e;"] {
        color: $subtext0 !important;
    }
    
    span[style*="color:"][style*="#0000ff;"] {
        color: $blue !important;
    }
    
    span[style*="color:"][style*="#008000;"],
    [color="success"],
    span[style*="color:"][style*="#169179;"] {
        color: $green !important;
    }
    
    span[style*="color:"][style*="#800000;"],
    span[style*="color:"][style*="#ba372a;"] {
        color: $maroon !important;
    }
    
    span[style*="color:"][style*="#ff0000;"] {
        color: $red !important;
    }
    
    span[style*="color:"][style*="#11826e;"],
    span[style*="color:"][style*="#12866e;"],
    [style*="color:"][style*="#0f8670;"] {
        color: $teal !important;
    }
}