ksucpea/bettercanvas

Added css for dark mode

Opened this issue · 0 comments

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;
}