Skip to content

Fixed Better Canvas Dark Mode | Northwestern Univ by neatPO25

Screenshot of Fixed Better Canvas Dark Mode | Northwestern Univ

Details

AuthorneatPO25

LicenseNo License

Categoryhttps://canvas.northwestern.edu/

Created

Updated

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Requires Better Canvas browser extension!! Better Canvas has a good dark mode but doesn’t work fully. I had patch it myself :/ I'll update this when I can

Notes

Requires Better Canvas browser extension!! And turn on Dark Mode

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Fixed Better Canvas Dark Mode | Northwestern Univ
@namespace      https://userstyles.world/user/neatPO25
@version        1.0.8
==/UserStyle== */
@-moz-document url-prefix("https://canvas.northwestern.edu/") {

    /* You can change these colors :D just replace these hex color values */
    :root {
        --user-style-accent-color: #ab83ec;/* You can change this color! */
        --user-style-link-color: #ab83ec;/* You can change this color! */
        --user-style-darkened-accent-color: #5d4e74;/* You can change this color! */
        --user-style-score-color: #ab83ec;/* You can change this color! */
        --user-style-button-color: #3d3744;/* You can change this color! */
        --user-style-button-text-color: #fff;/* You can change this color! */
        --user-style-dot-color: #ab83ec;/* You can change this color! */
        --user-style-inbox-color: #bdaeca;/* You can change this color! */
        
        
        
        --dEBmf-color: var(--user-style-accent-color) !important;
        --ic-brand-primary: var(--user-style-dot-color) !important;
        --bctextlink: var(--user-style-dot-color) !important;
        --ic-brand-font-color-dark: #fff !important;
        --ic-brand-primary-darkened-5: var(--user-style-darkened-accent-color) !important;
        --ic-brand-primary-darkened-10: var(--user-style-darkened-accent-color) !important;
        --ic-brand-primary-darkened-15: var(--user-style-darkened-accent-color) !important;
        --ic-brand-primary-lightened-5: var(--user-style-accent-color) !important;
        --ic-brand-primary-lightened-10: var(--user-style-accent-color) !important;
        --ic-brand-primary-lightened-15: var(--user-style-accent-color) !important;
        --ic-brand-button--primary-bgd-darkened-5: var(--user-style-darkened-accent-color) !important;
        --ic-brand-button--primary-bgd-darkened-15: var(--user-style-darkened-accent-color) !important;
        --ic-brand-button--secondary-bgd-darkened-5: var(--user-style-darkened-accent-color) !important;
        --ic-brand-button--secondary-bgd-darkened-15: var(--user-style-darkened-accent-color) !important;
        --ic-brand-font-color-dark-lightened-15: #ddd !important;
        --ic-brand-font-color-dark-lightened-28: #ddd !important;
        --ic-link-color-darkened-10: var(--user-style-darkened-accent-color) !important;
        --ic-link-color-lightened-10: var(--user-style-link-color) !important;
        --ic-link-color: var(--user-style-link-color) !important;
    }

    
    

    /* Don't touch this stuff. Everything below is the CSS to fix the site :P */
    
    
    /* Background content that is white but can't be changed, so I'm making the text black */
    p:nth-child(1) {
        background-color: #222;
    }
    .show-content > div:nth-child(2) {
        background-color: #222 !important;
    }
    .fOyUs_ImeN > div > span {
        background-color: #222 !important;
    }
    details > summary {
        color: #000;
    }
    

    /* Background content that can be changed */
    #mobile-header {
        background-color: #111 !important;
    }
    .course-list-table-row:hover {
        background-color: #222 !important;
    }
    #GradeSummarySelectMenuGroup > div > span > span > span > label > span > span > span > span > div {
        background-color: #222 !important;
    }
    .css-vxe90h-view--inlineBlock {
        background-color: #111 !important;
    }
    .UpdateItemTray-styles__root {
        background-color: #111 !important;
    }
    .student-group-header {
        background-color: #222 !important;
    }
    .react-rubric > table > tbody > tr > th {
        background-color: #000 !important;
        color: #fff;
    }
    .react-rubric > table > tbody > tr > td {
        background-color: #000 !important;
        color: #fff;
    }
    #planner-today-btn > span {
        color: #fff !important;
        background-color: #222 !important;
    }
    .transition--fade-entered {
        color: #fff !important;
        background-color: #222 !important;
    }
    .flashalert-message > div > div:nth-child(2) {
        color: #fff !important;
        background-color: #222 !important;
    }
    .selected-assignment {
        background-color: #323 !important;
    }
    .details > a {
        background-color: #111 !important;
    }
    span:has(> span > .Opportunities-styles__root) {
        background-color: #000 !important;
    }
    .Opportunities-styles__root > div {
        background-color: #111 !important;
    }
    .Opportunities-styles__root > div > div > div > div {
        color: #fff !important;
    }
    .transition--slide-right-entered {
        background-color: #111 !important;
    }
    .transition--slide-left-entered {
        background-color: #161616 !important;
    }
    span:has(> span > ul) {
        background-color: #161616 !important;
    }
    ul {
        background-color: #161616 !important;
    }
    ul > li > span {
        background-color: #161616 !important;
    }
    ul > li > span > span > span {
        background-color: #161616 !important;
        color: #fff !important;
    }
    .PlannerItem-styles__type > span {
        color: #eee !important;
    }
    .BadgeList-styles__item > span > span {
        background-color: #161616 !important;
    }
    .BadgeList-styles__item > span > span > span {
        color: #eee !important;
    }
    label:has(> span > span > span > span > div > span > span > svg) > span > span > span > span > div {
        color: #fff !important;
    }
    label:has(> span > span > span > span > div > span > span > svg) > span > span > span > span {
        background-color: #111 !important;
    }
    label:has(> span > span > span > span > div > span > span > svg) > span > span > span > span > div > span > span > svg {
        margin-left: -5px !important;
        margin-right: 5px !important;
    }
    label:has(> span > span > span > span > div > span > span > span > span > span > svg) > span > span > span > span {
        background-color: #111 !important;
    }
    label:has(> span > span > span > span > div > span > span > span > span > span > svg) > span > span > span > span > div > span {
        color: #fff !important;
    }
    label:has(> span > span > span > span > div > span > span > span > span > span > svg) > span > span > span > span > div > span > span > span > span > span > svg {
        margin-left: 5px !important;
        margin-right: -5px !important;
    }/* This is absolute hell, having to reference tags because the classes and ids change for tags on refresh. This CSS is so ugly and it's Instructure's fault >:( */
    
    
    /* User selected colors */
    .mobile-header-title > div {
        color: var(--user-style-accent-color) !important;
    }
    .icon-solid {
        color: var(--user-style-accent-color) !important;
    }
    .icon-arrow-open-down {
        color: var(--user-style-accent-color) !important;
    }
    .score_value {
        color: var(--user-style-score-color) !important;
    }
    button:has(> span > span > span > span > svg) > span {
        background-color: var(--user-style-button-color) !important;
        color: var(--user-style-button-text-color) !important;
    }
    #flashalert_message_holder > div > div {
        border-color: var(--user-style-button-color) !important;
    }
    #flashalert_message_holder > div > div > div:nth-child(1) {
        background-color: var(--user-style-button-color) !important;
        border-right: var(--user-style-button-color) !important;
        color: var(--user-style-button-text-color) !important;
    }
    .unread_dot {
        background-color: var(--user-style-dot-color) !important;
    }
    .Opportunities-styles__root > div > div > div > div:after {
        background-color: var(--user-style-score-color) !important;
    }
    a:has(> span > span > svg) > span {
        background-color: var(--user-style-accent-color) !important;
        border-color: var(--user-style-accent-color) !important;
    }
    #inbox-conversation-holder > div > div > div > span > div {
        background-color: var(--user-style-inbox-color);
        color: #000;
    }
    li:has(> a > span > span > svg) > a > span {
        background-color: var(--user-style-button-color) !important;
        border-color: var(--user-style-button-color) !important;
        border-width: 10px;
        border-style: solid;
    }
    li:has(> div > button > span > span > span > span > svg) > div > button > span > span > span > span > svg {
        color: var(--user-style-accent-color) !important;
    }
    li:has(> div > button > span > span > span > span > svg) > div > button > span > span > span > span > span {
        color: var(--user-style-accent-color) !important;
    }
    li:has(> div > button > span > span > span > span > span > img) > div > button > span > span > span > span > span {
        color: var(--user-style-accent-color) !important;
    }
    li:has(> div > button > span > span > span > span > span > img) > div > button > span {
        background-color: var(--user-style-button-color) !important;
    }
    #immersive_reader_mobile_mount_point {
        background-color: var(--user-style-button-color) !important;
    }
    #immersive_reader_mobile_mount_point * {
        fill: var(--user-style-accent-color) !important;
    }
    #immersive_reader_mount_point {
        background-color: var(--user-style-button-color) !important;
    }
    #immersive_reader_mount_point * {
        fill: var(--user-style-accent-color) !important;
    }
    span:has(> h2 > a > span) > h2 > a {
        background-image: var(--ic-brand-mobile-global-nav-logo) !important;
        background-color: var(--user-style-accent-color) !important;
        -webkit-mask-image: var(--ic-brand-mobile-global-nav-logo) !important;
        -webkit-mask-repeat: no-repeat !important;
        background-position-x: -1000px !important;
    }
    #submit-button > span {
        background...

Reviews

No reviews yet.