Skip to content

Canvas Material Dark (Patched) by tjreigh

Details

Authortjreigh

LicenseNo License

Categorycanvas, instructure

Created

Updated

Size23 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Canvas LMS Material Dark (Beta)
@namespace      USO Archive
@author         David Bradley
@description    `Changes the look of Canvas LMS to a dark theme that follows the Material Design guidelines for dark themes.Add your school's Canvas URL to the style to activate it.`
@version        20200422.2.35
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@-moz-document regexp("https:\/\/(?!(www|canvadocs)\.).+\.instructure\.com.*"), regexp("https:\\/\\/canvas\\.tccd\\.edu.*") {
    :root {
        /* Text */
        --custom-white: #ffffff;
        /* Extra High Emps */
        --custom-text-emp-high-transparent: rgba(255, 255, 255, 0.87);
        /* High Emps */
        --custom-text-emp-med-transparent: rgba(255, 255, 255, 0.60);
        /* Med Emps */
        /* DPs */
        --custom-00-dp: #121212;
        --custom-01-dp: #1e1e1e;
        --custom-01-dp-transparent: rgba(255, 255, 255, 0.05);
        --custom-02-dp: #222222;
        --custom-02-dp-transparent: rgba(255, 255, 255, 0.07);
        --custom-04-dp: #272727;
        --custom-04-dp-transparent: rgba(255, 255, 255, 0.09);
        --custom-08-dp: #2e2e2e;
        --custom-08-dp-transparent: rgba(255, 255, 255, 0.12);
        --custom-24-dp: #383838;
        /* Buttons */
        --custom-button-container: rgba(255, 255, 255, 0);
        --custom-button-container-hover: rgba(255, 255, 255, 0.04);
        --custom-button-container-focus: rgba(255, 255, 255, 0.12);
        --custom-botton-border: rgba(255, 255, 255, 0.29);
        --custom-botton-border-focus: rgba(255, 255, 255, 1);
        --custom-primary: #f19590;
        --custom-primary-container-faded-transparent: rgba(241, 146, 142, 0.24);

        /* Nav */
        --ic-brand-global-nav-bgd: var(--custom-04-dp);
        /* Nav Background */
        --ic-brand-global-nav-logo-bgd: var(--custom-08-dp-transparent);
        /* Nav Logo Background */
        --nav-background: var(--custom-02-dp);
        /* Nav Popout Background */
        /* Nav Icons */
        --ic-brand-global-nav-ic-icon-svg-fill: var(--custom-text-emp-med-transparent);
        --ic-brand-global-nav-avatar-border: var(--custom-text-emp-med-transparent);

        /* Icons */
        --eHiXd-iconColor: var(--custom-text-emp-med-transparent);
        --eHiXd-iconHoverColor: var(--custom-text-emp-high-transparent);
        --eHiXd-iconActiveColor: var(--custom-white);

        --ic-brand-font-color-dark: var(--custom-text-emp-high-transparent);
        /* A bunch of section titles */
        --ic-brand-primary: var(--custom-primary);
        --ic-brand-global-nav-menu-item__text-color: var(--custom-text-emp-med-transparent);
        --cjUyb-secondaryColor: var(--custom-text-emp-med-transparent);
        --dxCCp-inlineColor: var(--custom-text-emp-med-transparent);
        --dxCCp-color: var(--custom-text-emp-med-transparent);
        --ic-brand-font-color-dark-lightened-15: var(--custom-text-emp-med-transparent);
        --ic-brand-font-color-dark-lightened-30: var(--custom-text-emp-med-transparent);

        /* Links */
        --eHiXd-linkColor: var(--custom-primary);
        --eHiXd-linkHoverColor: var(--custom-primary);
        --ic-link-color: var(--custom-primary);
        --ic-link-color-darkened-10: var(--custom-primary);
        --ic-brand-button--primary-bgd: var(--custom-primary);

        /* Error */
        --custom-error-color: #000000;
        --custom-error-surface: #cf6679;
        --custom-aleart-color: #000000;
        --custom-aleart-surface: #cf6679;
    }
    
    /* New Assignment view */
    
    .ic-Layout-contentMain,
    .ic-Layout-contentMain > * {
        color: var(--custom-white);
    }
    
    .assignment-student-header {
        background-color: var(--custom-00-dp);
    }
    
    .a2-toggle-details-container, 
    .a2-toggle-details-container > * {
        color: var(--custom-white);
    }
    
    div.user_content {
        color: var(--custom-white);
    }
    
    /* New Quizzes */
    
    .mce-content-body, .mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset, i.mce-i-resize, code, pre, .quiz_score .score_value, #quiz-submission-version-table .submission-pending-review, .alert, .ig-header .name, .pages.show .course-title {
        color: var(--eRBXN-contentColor) !important;
    }
    
    #ui-id-1 {
        background-color: var(--custom-08-dp);
    }

    input.question_input {
        color: white;
        background-color: var(--custom-08-dp);
    }
    
    /* Calendar  */
    .fc-day-grid {
        background-color: var(--custom-02-dp);
    }

    #calendar-app .fc-content {
        background-color: var(--custom-24-dp);
    }

    #calendar-app .fc-event {
        background-color: var(--custom-24-dp);
    }

    #calendar-app .fc-month-view .fc-today {
        background-color: var(--custom-primary);
    }

    .event-details {
        background-color: var(--custom-02-dp)
    }

    #context-list-holder {
        background-color: var(--custom-00-dp);
    }

    #minical {
        background-color: var(--custom-02-dp);
    }
    
    #minical .fc-view-container table {
        color: white;
    }

    div.discussions-v2__wrapper div[class*="discussion"] {
        background-color: var(--custom-02-dp);
        color: white;
    }
    
    div.ui-tabs .ui-tabs-panel {
        background: var(--custom-08-dp);
    }

    .canvas-rce__skins--root {
        background: var(--custom-01-dp)
    }
    
    .tox-editor-container {
        background: green
    }
    
    /* Nav Selected */
    .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
        background: var(--custom-primary-container-faded-transparent);
    }
    .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-avatar {
        border-color: var(--ic-brand-global-nav-ic-icon-svg-fill--active)
    }
    /* Nav Tooltips */
    .menu-item__text {
        background-color: var(--custom-24-dp);
    }
    .menu-item__text::after {
        border-right-color: var(--custom-24-dp);
    }
    /* Nav */
    .ic-app-header__menu-list-link {
        border: 1px solid transparent;
    }
    .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link:focus {
        border: 1px solid var(--custom-primary);
        box-shadow: none;
    }
    .global-nav-custom-tray,
    .fLzZc_bGBk {
        background: var(--nav-background);
    }

    /* Subnav */
    .list-view > ul > li > a,
    .list-view > nav > ul > li > a {
        border: 1px solid rgba(0, 0, 0, 0);
    }
    .list-view > ul > li > a:hover,
    .list-view > nav > ul > li > a:hover {
        background-color: var(--custom-button-container-hover);
        border: 1px solid var(--custom-botton-border);
    }
    .list-view > ul > li > a:focus,
    .list-view > nav > ul > li > a:focus {
        background-color: var(--custom-button-container-focus);
        border: 1px solid var(--custom-botton-border-focus);
        outline: none;
        /* Remove Browser Icon */
    }
    .list-view a.active,
    .list-view a.active:hover,
    .list-view a.active:focus {
        color: var(--custom-primary);
        background-color: var(--custom-primary-container-faded-transparent);
        border: 1px solid transparent;
        border-radius: 3px;
        padding: 8px 0 8px 6px;
    }

    /* Remove background */
    .item-group-container {
        background: none;
    }

    /* Page background */
    body,
    .ic-Dashboard-header__layout,
    #breadcrumbs,
    .header-bar,
    .module-sequence-footer .module-sequence-footer-content,
    #questions.assessing,
    .quiz-submission,
    .question_editing,
    table.summary td,
    table.summary tbody th {
        background: var(--custom-00-dp);
    }

    /* Card background */
    .ic-DashboardCard,
    .ic-DashboardCard__header_content,
    .ic-notification__content,
    div.mce-edit-area,
    .item-group-condensed .ig-row,
    .context_module_item.context_module_item_hover,
    .ui-widget-content,
    .discussion-entries .entry,
    .discussion_entry {
        background: var(--custom-01-dp);
    }

    .ui-dialog .ui-dialog-titlebar.ui-widget-header,
    .ui-dialog .ui-datepicker .ui-widget-header.ui-datepicker-header,
    .ui-datepicker .ui-dialog .ui-widget-header.ui-datepicker-header {
        background: var(--custom-04-dp);
    }

    .ui-widget-overlay {
        background: rgba(0, 0, 0, 0.75);
    }

    .question,
    code,
    pre {
        background: var(--custom-01-dp-transparent);
    }

    .react-rubric th.rubric-title,
    .toolbarView .headerBar {
        background: transparent;
    }

    /* Table Head */
    .question .header,
    #questions.assessment_results .question .header,
    .rubric_container .rubric_title,
    .rubric_container thead th,
    .item-group-condensed .ig-header,
    .react-rubric thead,
    .table > thead,
    .table-bordered th,
    .table-bordered td,
    .toolbarView {
        background: var(--custom-02-dp-transparent);
    }

    /* Line color */
    .ic-Dashboard-header__layout,
    #right-side h2,
    #right-side .h2,
    .ic-app-footer,
    .ic-app-nav-toggle-and-crumbs,
    hr,
    .recent-activity-header,
    .course_details td,
    .recent_activity > li,
    .stream-details tr,
    .ic-item-row,
    .ic-Table th,
    #grades_summary th.title,
    .ic-Table td,
    #grades_summary tr.final_grade,
    .module-sequence-footer .module-sequence-footer-content,
    #quiz_show ul#quiz_student_details,
    .quiz-header,
    .question,
    .question .header,
    .question.multiple_choice_question .answer,
    .question.multiple_answers_question .answer,
    .question.matching_question .answer,
    .question.true_false_question .answer,
    .mce-edit-area,
    .question textarea,
    code,
    pre,
    table.summary td,
    table.summary tbody th,
    #right-side > div > div,
    #assignment_show .student-assignment-overv...

Reviews

No reviews yet.