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

Revision 8 – Add dark formatting for "Previous Answers" section:

Revision 9 – Fix yellow "partial credit" shading on main progress bar:

Revision 10 – Give images strong white drop shadows to make certain images more readable:

Revision 11 – Fix red "oof" shading on main progress bar:

You were a valuable contribution to science, 8.  I'm sorry I had to get you wrong.  :trollface:

New to Git/GitHub, sorry for general level of inexperience as I know that can be irritating. However, I am a visually impaired college student looking to utilize your code for my Cengage textbook, since there is no web version of the book in dark mode.

How do I go about executing your code on my device (Windows)? If you're not interested in explaining yourself, that is totally fine; I would appreciate being sent to a guide that can explain how to me, though.

Thank you for your time.

ETA:
Never mind, ~17 minutes later and I've done it!! And it looks great! Thank you; sorry for any wasted time!!

New to Git/GitHub, sorry for general level of inexperience as I know that can be irritating. However, I am a visually impaired college student looking to utilize your code for my Cengage textbook, since there is no web version of the book in dark mode.

This stylesheet unfortunately does nothing to Cengage's textbooks—it only has formatting rules for WebAssign.

Fear not however, as Dark Reader exists! It's a browser extension for Chrome/Firefox/Whatever that provides a procedurally-generated dark theme for all websites—and it works on Cengage textbooks.

This stylesheet simply exists because Dark Reader doesn't play nicely with WebAssign's dated interface.

Thanks for showing interest in my tiny userstyle sheet—I'm still surprised this relatively hidden gist got picked up by whatever search engine you found it on.

New to github, got tired of looking at the white screen and searched for something like this. Only problem is I don't know how to implement this into the website. Could you help?

@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.