Dark theme for Cengage WebAssign

webassign-dark-theme.css

/*
    WebAssign Dark Theme by Fasteroid
    Revision 11
*/
@-moz-document url-prefix("https://www.webassign.net/web/Student") {
.mainContainerLayout {
    display: grid;
    min-height: 100%;
    grid-template-rows: auto 1fr auto;
    background: #222;
}

.waQBox > .qUtility > .standard {
    background: #333;
}

.waQBox > .qUtility > .standard,
.waQBox > .qUtility > .crop {
    margin: 0;
    border: 0px solid #000;
    font: normal 13px/20px verdana, helvetica, sans-serif;
    -moz-border-radius: 0 0 4px 0;
    -webkit-border-radius: 0 0 4px 0;
}

.tex2jax_ignore, .qContent .wa1par,
.qContent .sublabel,
.qContent .wa1ans {
    color: #ddd;
}

.previousAnswersContainer .container.popupWrap .middle .qResponse {
    background: #333;
    border: 1px solid #555;
    border-radius: 2px;
    padding: 15px 0;
    margin-bottom: 20px;
}

.previousAnswersContainer .container.popupWrap, .previousAnswersContainer .container.popupWrap .popupContent, .previousAnswersContainer .container.popupWrap .middle, .allResponses .previousAnswersContainer, .dj_webkit .dj_chrome .dj_contentbox {
    background: #222 !important;
    border-radius: 0px;
}

.previousAnswersContainer .container.popupWrap .middle {
    background: #222;
    border: 20px solid #222;
    border-radius: 0px;
}

.previousAnswersContainer .container.popupWrap .waQBox .top .title {
    align-items: baseline;
    background: #333;
    border-right: 0;
    border-left: 0;
    color: #eee;
    display: flex;
    font: normal 1rem 'Open Sans', sans-serif;
}

.css-jsfayd {
    background: #222;
    border-radius: 10px;
}

.static, .qTextField > input {
    color: #ccc !important;
    display: inline;
    margin: 0.1em;
    padding: 0.1em;
    background: #2a2a2a;
    border: 1px solid #555;
}

font, span[style*="color: #dd0000"]  {
    color: #f22 !important;
    font-weight: bold;
}

article > *, .css-l1j587, .css-1nohyfr, .css-61mckp, .css-1xtak44, .css-tk5eh5, .css-ydjurp {
    background-color: #333 !important;
    border: 0px solid #000 !important;
    color: #ddd !important;
}

.css-2ckidu, .css-lal50k, .css-ksgbli {
    border-color: #222;
}

.css-113dhmn, .css-lal50k, .manualGrading > * > p, .css-ivbv8a  {
    color: #ddd;
}

.waQBox, .waQBox>.qUtility>.qButtons {
    background: #333;
    border: 0px solid #eee;
}

.css-5ijub1 > *, .css-6xh4hr, .css-1d5sdls > div {
    color: #ccc !important;
}
.css-mzz8f4-BaseStyledButton, .css-nvle0d-BaseStyledButton {
    background: rgb(0, 98, 152);
    border: 0px rgb(0, 98, 152);
    color: #ddd;
    text-transform: none;
}

.css-mrxdza-StyledCard.css-mrxdza-StyledCard {
    background: rgb(0, 98, 152);
    border-radius: 0px;
    font-family: "Open Sans", sans-serif;
    border: 3px solid rgb(0, 98, 152);
}

.section_content {
    background-color: rgb(26, 67, 89) !important;
}

.css-1ro0y4x, .css-14spuex, .css-gaa69a{
    background: #2a2a2a;
    border-width: 2px;
    border-color: #222

}

.css-3nzxcx, .css-1elzpo0, .css-16r17sf {
    background: #333;
    border-width: 2px;
    border-color: #222
}

.css-a121ts, .css-11flc95, .css-19dp8pl {
    padding: 0.5rem 0.4rem 1.875rem;
    margin: 0px 0.2rem;
}

a, a:link, a:active, a:visited {
    color: #88f;
    cursor: pointer;
    font-weight: normal;
    text-decoration: none;
}

.waQBox>.qAlert {
    background: #333;
    border-left: 1px solid #ff0;
    border-bottom: 1px solid #ff0;
    border-right: 1px solid #ff0;
}

.css-a121ts {
    background: #333
}

.css-3nzxcx:hover, .css-3nzxcx:focus, .css-3nzxcx:active, .css-1ro0y4x:hover, .css-1ro0y4x:focus, .css-1ro0y4x:active, .css-gaa69a:hover, .css-gaa69a:focus, .css-gaa69a:active, .css-14spuex:hover, .css-14spuex:focus, .css-14spuex:active  {
    background-color: #666;
}

/* Correct/Partial/Incorrect Colors */
.css-19dp8pl, .css-1i1pfxt {
    background: #2c3925;
}

.css-11flc95 {
    background-color: #483e20;
}

.css-1qv5qzw {
    background-color: #402626
}
    
/* Everything below inverts math */
.watexparenimage > img,
.watexsqrtradicalcontent > img,
nobr > img {
    filter: invert(1)
}

.cap-btm-rit > img {
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 2px #ffffff)
}

.watexfraction .watexdenominator, .watexsqrtradicandcontent {
    border-top: 1px solid;
}
}

I figured out how to get it working but thanks for pointing me in the right direction. One thing I'd like to add, more of a "hey i noticed this" than criticism.

In the image above theres a video included in my webassign that has a white area around it. Also theres text in the baby blue bar that can't be seen. Again, it's not a hassle to me but I just wanted to point it out.

@RealGitHubAdmin Glad to see you got it working!

This stylesheet is by no means comprehensive—it only covers the meager amount of content I observed in my Physics 282 course. There is no doubt stuff missing that I just never encountered.

I do have an idea though—if you're not up for trying to fix it yourself with Inspect Element, I might be able to fix the missing styles if you send me a copy of the page. Just ctrl+s it and save it as a single-file webpage, like this:

I would not upload it here though, as I'm not sure of the security implications (bad actors might be able to extract stuff out of that file). Google Drive or Discord are preferred—share it with me at [email protected] or @fasteroid if interested.

Thanks friend, and I hope your Calculus 1 adventures are going well.

good code. life-saving code... you should be proud -someone who doesnt code

Glad to see it's still finding use!