bettercanvas
bettercanvas copied to clipboard
Added css for dark mode
For anyone who wants to use it, here is some extra CSS which you can add with any user CSS extension (or to add to this extension ;)) Just thought I would share it here
It fixes many places where dark mode was not correctly applied. Also, the max-width is removed from the body.
body:not(.full-width):not(.outcomes):not(.body--login-confirmation) .ic-Layout-wrapper {
max-width: unset !important;
}
.ef-main .ef-folder-content {
flex-direction: unset !important;
}
.Grouping-styles__title {
display: inline-table;
}
.ef-item-row.ef-item-selected {
background-color: #333 !important;
}
.ReactModal__Content.ReactModal__Content--canvas .ReactModal__Header,
.ReactModal__Content.ReactModal__Content--canvas .ReactModal__Body,
.ReactModal__Content.ReactModal__Content--canvas .ReactModal__Footer {
background-color: #111 !important;
}
.question .text .question_text {
background-color: #222 !important;
}
.math_equation_latex {
color: #fefefe !important;
}
span {
--ic-brand-font-color-dark: #fefefe !important;
}
.course-list-unpublished-course-row {
background: #222 !important;
}
.course-list-table .course-list-table-row:hover {
background: #222 !important;
}
.FileUpload {
background: transparent !important;
opacity: 0.95;
}
[class*="-view--inlineBlock"],
[class*="-view-billboard"],
[class*="-modalHeader"] {
background: #111 !important;
}
[class*="-toggleDetails__details"],
[class*="-inlineSVG-svgIcon"],
[class*="-view-heading"],
[class*="-view-listItem"],
[class*="-formFieldLabel"] {
color: #fefefe !important;
}
[class*="-mask"] {
background: rgba(12, 12, 12, 0.75) !important;
}
[class*="-modal"] {
background: #111 !important;
border: 0.0625rem solid #222 !important;
}
[class*="-view-alert"],
[class*="-colHeader"],
[class*="-colHeader"],
[class*="-view-cell"],
[class*="-view-rowHeader"],
[class*="-view-row"],
[class*="-view-body"],
[class*="-baseButton__content"],
[class*="-toggleFacade__label"] {
background: #222 !important;
color: #fefefe !important;
}