Designed for Canvas RU
Canvas Dark Mode by ymirthor
Details
Authorymirthor
LicenseNo License
Categoryreykjavik.instructure.com
Created
Updated
Size27 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 Dark Mode
@namespace dark-mode
@author Ymir
@version 1.0.0
==/UserStyle== */
@-moz-document domain("instructure.com") {
:root {
--dark-grey: #1d1e21 !important;
--grey: 35, 39, 42 !important;
--light-grey: #2C2F33 !important;
--white-grey: #e9e9e9;
--text: #e9e9e9;
--sub-text: #e9e9e9;
--ic-brand-header-image: url('http://www.ru.is/media/HR_logo_hringur_transparent.png');
--jpyTq-color: #e9e9e9;
--ctrLD-color: #e9e9e9;
--bIrId-color: #e9e9e9;
--eAJaG-background: rgba(0, 0, 0, 0);
--dCppM-defaultBackground: rgba(0, 0, 0, 0);
--ofhgV-defaultColor: #e9e9e9;
--dpCPB-color: #e9e9e9;
--faJyW-labelColor: #e9e9e9;
--MlJlv-textColor: #e9e9e9;
--qBMHb-color: #e9e9e9;
--fbyHH-color: #e9e9e9;
--yyQPt-background: #e9e9e9;
--enRcg-secondaryColor: #e9e9e9;
}
body:not(.full-width):not(.outcomes):not(.body--login-confirmation) .ic-Layout-wrapper {
max-width: 100%;
}
/*DASHBOARD=====================================================*/
/*=======SITE BACKGROUND COLOR=======*/
body {
background: rgb(var(--grey)) !important;
color: var(--text) !important;
}
/*All Courses Non Published Table*/
.course-list-unpublished-course-row {
background: rgb(var(--grey)) !important;
}
code,
pre {
background-color: #012239;
border: 1px solid #4373c2;
color: #d6deeb;
}
/*myLearning Logo*/
.ic-sidebar-logo__image {
max-height: 0px !important;
}
/* School Logo (top left)*/
.ic-app-header__logomark-container {
background-color: inherit;
}
/*
.ic-app-header__logomark {
height: 0px!important;
}
*/
/*myLearning Water Mark*/
.ic-Layout-watermark {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
width: 0 !important;
height: 100%;
opacity: var(--ic-brand-watermark-opacity);
background-image: var(--ic-brand-watermark);
background-repeat: no-repeat;
background-position: left bottom;
}
/* Close X*/
.ui-icon-closethick {
filter: brightness(0) invert(1);
}
/*Error Message*/
.cvphu_bgqc {
background: var(--dark-grey) !important;
color: var(--text) !important;
}
/*Announcement*/
.ic-notification__content {
background: rgb(var(--grey)) !important;
}
/*TTS Button*/
.rspopup {
background: var(--light-grey) !important;
box-shadow: 0 0 5px #000 !important;
color: var(--text) !important;
}
.eoNrR_blJt {
background: rgb(var(--grey)) !important;
color: var(--text) !important;
}
/*Dashboard View Selection Options*/
.sJGfW_blJt {
background: var(--light-grey) !important;
color: var(--text) !important;
}
/*Recent Feedback 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 {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(var(--grey, 0))) !important;
}
#right-side .right-side-list li em,
#right-side .right-side-list li p {
color: var(--text) !important;
background: rgb(var(--grey));
}
/*Card 3 Dots Menu | Footer*/
[dir="ltr"] .fOyUs_EMjX {
background: rgb(var(--grey)) !important;
}
/*Card 3 Dots Menu | Unselected Tab Header Background*/
.XBLto_bXVH {
background: rgb(var(--grey)) !important;
color: var(--text) !important;
}
/*Card 3 Dots Menu | Unselected Tab Header Text*/
[dir="ltr"] .bdYPe_eLeB {
margin-right: 0.2em;
color: var(--text) !important;
}
/*Move Tab Header*/
.bdYPe_eLeB:not([aria-selected]):not([aria-disabled]):hover,
.bdYPe_eLeB[aria-selected] {
background: var(--light-grey) !important;
}
/*Move Tab Background (top and bottom sliver)*/
.cAqHo_eAjd {
background: var(--light-grey) !important;
}
/*Move Tab | Move Button*/
.sJGfW_bGBk {
background: var(--light-grey) !important;
}
/*Move Tab | Move Button Icon*/
.esvoZ_drOs {
color: var(--text) !important;
}
/*Card 3 Dots Menu | Color Tab Header*/
[dir="ltr"] .bdYPe_eLeB:first-of-type {
background: var(--light-grey) !important;
color: var(--text) !important;
}
/*Color Picker Sides*/
.DashboardCardMenu__ColorPicker {
background: rgb(var(--grey)) !important;
}
/*Color Picker Body*/
.ColorPicker__Container {
background: rgb(var(--grey)) !important;
}
/*Check Mark Background*/
.eHiXd_bPzo.eHiXd_ycrn,
a.eHiXd_bPzo.eHiXd_ycrn,
button.eHiXd_bPzo.eHiXd_ycrn,
button.eHiXd_bPzo[type="button"].eHiXd_ycrn,
button.eHiXd_bPzo[type="reset"].eHiXd_ycrn,
button.eHiXd_bPzo[type="submit"].eHiXd_ycrn {
height: var(--eHiXd-mediumHeight);
width: var(--eHiXd-mediumHeight);
color: var(--text) !important;
}
/*List View | Class Name Background*/
.Grouping-styles__title {
background-color: rgb(var(--grey)) !important;
color: var(--text) !important;
}
/*Dashboard Side Panel Selected Item Color
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-icon-svg {
fill: var(--dark-grey) !important;
}
*/
/*List View Background*/
.Day-styles__root {
color: var(--text) !important;
background: rgb(var(--grey)) !important;
}
/*List View Top Bar Icons (right)*/
.PlannerHeader-styles__root {
color: var(--text) !important;
background: rgb(var(--grey)) !important;
}
/*List View Ellipses*/
element.style {
background: rgb(var(--grey)) !important;
color: var(--text) !important;
}
/*List View | Today Button*/
.eHiXd_eYmo,
a.eHiXd_eYmo,
button.eHiXd_eYmo,
button.eHiXd_eYmo[type="button"],
button.eHiXd_eYmo[type="reset"],
button.eHiXd_eYmo[type="submit"] {
background: var(--light-grey) !important;
border-color: var(--text) !important;
color: var(--text) !important;
}
/*List View | Nothing Planned Yet Background*/
.EmptyDays-styles__root {
color: var(--text) !important;
background: rgb(var(--grey)) !important;
margin-top: var(--text) !important;
}
/*List View | Gradient*/
.Grouping-styles__title::after {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(var(--grey), 0)) !important;
}
/*=======DASHBOARD TEXT BACKGROUND=======*/
.ic-Dashboard-header__layout {
border-bottom: 1px solid var(--text) !important;
}
/*=========================================== FROSTED GLASS ===============================================*/
[dir="ltr"] .fLzZc_bxia,
.ic-Dashboard-header__layout {
background: rgba(var(--grey), 0.7) !important;
backdrop-filter: blur(5px);
}
/* Title*/
.blnAQ_drOs,
a.fbyHH_bGBk.fbyHH_bSMN,
.enRcg_bGBk.enRcg_eQnG,
.faJyW_doqw + .faJyW_blJt,
.ic-Dashboard-header__title {
font-weight: bolder;
}
/*=======SIDE BOARD PANEL=======*/
/*Side Board Panel Background*/
.ic-app-header {
background-color: var(--dark-grey) !important;
}
/*Selected Side Board Panel Background*/
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
background: var(--light-grey) !important;
}
/*Courses Sub Tab Background*/
.MYpOQ_bGBk {
background: rgb(var(--grey)) !important;
}
/*=======CLASS CARD BACKGROUNDS=======*/
/*Card Text Background*/
.ic-DashboardCard__header_content {
background: var(--light-grey) !important;
}
/*Bottom Card Tray*/
.ic-DashboardCard {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
background: var(--light-grey) !important;
}
/*=======ACCOUNT MENU BACKGROUND=======*/
Style Attribute {
--fLzZc-smallWidth: 28em;
background: var(--light-grey) !important;
}
element.style {
--fLzZc-smallWidth: 28em;
background: var(--light-grey) !important;
}
/*Recent Feedback Sub Text*/
#right-side .right-side-list li em,
#right-side .right-side-list li p {
color: var(--text) !important;
background: rgb(var(--grey)) !important;
}
/*Recent Feeback Background Top*/
#right-side .right-side-list .recent_feedback_title {
background: rgb(var(--grey)) !important;
}
/*COURSES=======================================================*/
/*Most Text*/
a {
color: var(--text) !important;
/*text-decoration: none !important;*/
}
/*Course Name Background*/
#breadcrumbs > ul > li {
background: rgb(var(--grey)) !important;
}
/*Header Bar Background*/
.header-bar {
border-bottom: 1px solid #99AAB5 !important;
background-color: rgb(var(--grey)) !important;
}
/*=======HOME=======*/
/*Home Page | Course Name Color*/
.pages.show .course-title {
color: var(--text) !important;
}
/*Home Page | To Do List Icon & Subtext Colors*/
.dxCCp_bGBk {
color: var(--text) !important;
}
/*=======MODULES=======*/
/*Modules Page | Expand/Collaps Button*/
.btn,
.Button,
.ui-button {
background: #FFFFFF00 !important;
color: var(--text) !important;
border-color: #99AAB5 !important;
}
/*Modules Page | Modules Background*/
#context_module...