Added css for dark mode
Opened this issue · 0 comments
tychobrouwer commented
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;
}