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

@RealGitHubAdmin I probably should have still answered this for the last guy that asked, but...

Use a user-stylesheet chrome extension, like Stylus.

From what I remember (typing this on mobile), I think all you do is click on the extension icon and click "write a style", then paste this. I don't remember for sure though, I'll get back to you soon(tm)

Glad to be of assistance, it's nice to see this getting used by other people.

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 fasteroid@hotmail.com or @fasteroid if interested.

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