ksucpea / bettercanvas

Dark mode, better todo list, GPA calculator, and more for Canvas
MIT License
86 stars 23 forks source link

Added css for dark mode #46

Open tychobrouwer opened 8 months ago

tychobrouwer commented 8 months ago

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