Skip to content

Canvas/Instructure Enhanced Dark Mode (TIP PH) by mavgician

Screenshot of Canvas/Instructure Enhanced Dark Mode (TIP PH)

Details

Authormavgician

LicenseNo License

CategoryCanvas, Instructure

Created

Updated

Size56 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Adds background instead of a blank white.
Standardized design on course pages.
Rounded Corners.
Moving card background in the dashboard (list view).
DARK MODE.

and much more!

Notes

Based on the stylish user style from Pyro1g (BCPS).

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/Instructure Enhanced Dark Mode (TIP PH)
@version      20211029.07.00
@namespace    userstyles.world/user/mavgician
@description  Adds background instead of a blank white.
Standardized design on course pages.
Rounded Corners.
Moving card background in the dashboard (list view). 
DARK MODE.

and much more!
@author       mavgician
@license      No License
==/UserStyle== */

@-moz-document domain("instructure.com"), domain("tip.instructure.com") {
#breadcrumbs {
    background-color: transparent;
}
#breadcrumbs> ul {
    margin: 0;
    padding: 4px 15px;
    list-style: none
}
#breadcrumbs>ul>li+li:last-of-type a {
    color: #eee;
}
.btn, .Button {
    background: #575d94 !important;
    color: white !important;
    border-radius: 100px !important;
}
.header-bar {
    border-bottom: 0px solid #242424;
    min-height: 33px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.header-bar:before, .header-bar:after {
    display: table;
    content:"";
    line-height: 0
}
.header-bar:after {
    clear: both
}
.header-bar.pinned {
    position: fixed;
    top: 0;
    width: 1071px;
    background-color: white;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
    margin-left: -12px;
    padding: 15px;
    z-index: 100
}
.react-select-box-label {
    color: #2D3B45
}
.react-select-box-click-outside-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2
}
.react-select-box-clear {
    position: absolute;
    top: 15px;
    right: 0;
    width: 35px;
    height: 20px;
    background-color: #fff;
    text-indent: -9999em;
    z-index: 3;
    border: none
}
.react-select-box-clear:before {
    content:'×';
    position: absolute;
    top: 2px;
    left: 10px;
    z-index: 1;
    background-color: #73818C;
    border-radius: 100%;
    font-size: 13px;
    font-size: .8125rem;
    color: #fff;
    line-height: 1;
    width: 15px;
    height: 15px;
    text-indent: 0;
    text-align: center
}
.react-select-box-clear:hover:before, .react-select-box-clear:focus:before {
    background-color: var(--ic-brand-primary)
}
.react-select-box-hidden {
    display: none
}
.react-select-box-options {
    margin: 2px 0 0;
    position: absolute;
    padding: 10px 0;
    width: 240px;
    top: 100%;
    left: 0;
    z-index: 4;
    background-color: #fff;
    border-radius: 4px
}
.ic-badge.ic-badge--neutral {
    background: #EBEDEE;
    color: #2D3B45
}
.ic-badge.ic-badge--success {
    background: #00AC18
}
.ic-badge.ic-badge--alert {
    background: #FC5E13
}
.ic-badge.ic-badge--danger {
    background: #EE0612
}
body {
    min-height: 100vh;
    background: #161616;
}
body:not(.is-inside-submission-frame):not(.embedded) {
    min-width: 768px
}
body.no-headers #header, body.no-headers #topbar, body.no-headers #left-side, body.no-headers #breadcrumbs, body.embedded #header, body.embedded #topbar, body.embedded #left-side, body.embedded #breadcrumbs {
    display: none !important
}
.ic-app-footer {
    box-sizing: border-box;
    padding: 12px 0;
    margin: 0 24px;
    border-top: 1px solid #242424;
}
#right-side .events_list .todo-details, #right-side .to-do-list .todo-details {
    padding-right: 30px;
}
#right-side .events_list .todo-details:after, #right-side .to-do-list .todo-details:after {
    width: 0px;
    background: linear-gradient();
}
#right-side .events_list .event-details:after, #right-side .events_list .todo-details:after, #right-side .to-do-list .event-details:after, #right-side .to-do-list .todo-details:after {
    /* content:""; */
    position: absolute;
    top: 0;
    right: 0;
    height: 0%;
    width: 0px;
    background: linear-gradient();
}
.ic-DashboardCard {
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    overflow: hidden;
    width: 262px;
    display: inline-block;
    vertical-align: top;
    margin: 0 36px 36px 0;
}
.ic-Dashboard-header__layout {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: 0 0 9px;
    border-bottom: 1px solid #242424;
    background: #262626;
}
.ic-Dashboard-Activity {
    padding: 12px
}
.ic-Dashboard-header__title {
    margin-top: 0;
    margin-bottom: 0;
    -webkit-flex: 1;
    flex: 1;
    padding-right: 12px;
    box-sizing: border-box
}
.ic-Dashboard-header__actions {
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}
#right-side .placeholder {
    height: 200px
}
.recent-activity-header {
    margin: 0;
    border-bottom: 1px solid #C7CDD1;
    line-height: 1.2;
    padding-bottom: 12px;
    font-size: 1.5em
}
.recent_activity>li {
    position: relative;
    border-bottom: 1px solid #242424
}
.recent_activity>li .title {
    font-weight: normal
}
.recent_activity>li .links {
    font-size: 11px;
    font-size: .6875rem
}
.recent_activity>li .unread-count {
    display: block;
    background: var(--ic-brand-primary);
    border-radius: 15px;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 3px;
    top: 22px;
    padding: 0
}
.recent_activity>li .accessibly-hidden {
    position: absolute;
    left: -9999px
}
.recent_activity>li .unread {
    width: 10px;
    height: 10px;
    margin-left: -15px;
    background-color: var(--ic-brand-primary);
    border-radius: 5px
}
.stream_header {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: -webkit-flex;
    display: flex;
    padding: 12px
}
.stream_header .image-block {
    -webkit-flex: 1;
    flex: 1;
    -webkit-align-items: center;
    align-items: center
}
.stream_header .toggle-details {
    text-transform: uppercase;
    font-size: 11px;
    font-size: .6875rem
}
.stream_header:hover {
	background: rgba(90,90,90,0.6);
	transition: 0.1s;
}
.stream_header {
	background: transparent;
	transition: 0.1s;
}
.stream_header:hover .toggle-details {
    text-indent: 0;
    text-align: right
}
.stream-details tr {
    border-top: 1px solid #242424;
}
.stream-details tr:hover {
    background: #333;
}
.header-right-side {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end
}
.profile_table .data_description {
    font-size: 0.8em;
    color: #aaa
}
h1, h2, h3, h4, h5, h6 {
    margin: 6px 0;
    font-family:"LatoWeb", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 1.5;
    text-rendering: optimizelegibility;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-weight: normal;
    line-height: 3;
    color: #4b6373
}
h1 {
    font-size: 38px;
}
h2 {
    font-size: 32px
}
h3 {
    font-size: 24px
}
h4 {
    font-size: 18px
}
h5 {
    font-size: 16px
}
h6 {
    font-size: 12px
}
h1 small {
    font-size: 24px
}
h2 small {
    font-size: 18px
}
h3 small {
    font-size: 16px
}
h4 small {
    font-size: 16px
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: normal;
}
h1, h2, .h1, .h2 {
    font-size: 1.8em;
    line-height: 1.5;
    color: #b1b1b1;
}
h3, .h3 {
    font-size: 1.5em
}
.page-header {
    padding-bottom: 6px;
    margin: 20px 0 30px;
    border-bottom: 1px solid #C7CDD1
}
a {
    color: #007ec5;
    text-decoration: none;
}
a:focus {
    color: #aaa;
}
a:hover {
    color: #eee;
}
a:focus, a:hover {
    text-decoration: none;
}
body {
    font-size: 16px;
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    line-height: 1.5;
    color: #aaa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.list-view>ul>li>a, .list-view>nav>ul>li>a {
    color: #aaa;
    border-radius: 0px;
}
.pages.show .course-title {
    color: #eee;
}
.submission-details-header {
    margin-bottom: 30px;
}
.submission-details-comments .comments {
    background-color: #161616;
    border-left: 0px solid #242424;
}
#questions.assessment_results .question .answers .answer.wrong_answer {
    border-radius: 0px;
}
.module-sequence-footer .module-sequence-footer-content {
    background: #161616;
}
.conversations .panel {
    background: #161616;
    border-bottom: 1px solid #242424;
}
.message-list-scroller {
    border-right: 1px solid #242424;
}
.item-group-container {
    background: #101010;
    border: 0px solid #242424;
}
.ig-header .name {
    color: #eee;
    text-shadow: 0px 0px 0 rgba(0, 0, 0, 0)
}
body.primary-nav-expanded .ReactTray__Content {
    background: #161616 !important;
}
.feature-flags {
    color: #aaa;
    border: 1px solid #242424;
}
.feature-flag {
    border-bottom: 1px solid #242424;
}
thead th, table.summary, table.summary tbody th, table.summary tbody td {
    background: transparent !important;
    color: var(--fdyuz-textColor);
}
.table th, .table td {
    border-top: 1px solid #242424;
}
.table-bordered th, .table-bordered td {
    border-left: 1px solid #242424;
}
.table-bordered {
    border: 1px solid #242424;
}
.table-bordered:last-of-type {
    border-bottom: 1px solid #242424;
}
.ic-app-nav-toggle-and-crumbs {
    border-bottom: 1px solid #242424;
}
.ic-NavMenu__header {
    border-bottom: 1px solid #242424;
}
.Underline-All-Links__enabled a:not(.Button):not(.ui-button):not(.btn):not(.ui-button) {
    text-decoration: none;
}
.Underline-All-Links__enabled a:not(.Button):not(.ui-button):not(.btn):not(.ui-button):not(.ui-tabs-anchor) {
    text-decoration: none;
}
.Underline-All-Links__enabled a:not(.Button):not(.ui-button):not(.btn):not(.ui-button):focus {
    outline-color: transparent;
}
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
    background: #333;
}
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-icon-svg {
    fill: var(-...

Reviews

No reviews yet.