Nutshell Expandables do not have the correct color when DOM changes text color

[FireIsGood]

I was reading over your blog post Welp, I'm 30. (30 tips for my 13-year-old self) (sic) and found that your nutshells didn't have the actual colon icons visible if you have a preferred colorscheme of dark and the page set to light.

Diagnosis

a short narrative as a treat

Upon inspection I found that the specific culprit was that the color of your colons are set as background-color when nutshell loads based on the color of the page. Since I have dark mode as my default but use light mode to read pages (heretic) it would load as dark mode, Nutshell would activate and color it as the color of the text which—at the moment of checking—would be rgb(255,255,255). This would then be copied on to the balls which persist even if the text color is changed via styles later.

The issue here was that the page.js file sets the styles to dark as the DOM loads which causes the page to think it's dark mode when Nutshell loads for some reason. Evil!!!

Fixing it!!

Sadly you cannot fix this through just a basic edit of the page.js dark mode swapper as you need to wait for the DOMContentLoaded event before modifying the body (unless you wanted to put this script at the bottom of your body (oh no)), so you'll have to fix Nutshell itself.

This actually stems from a problem in nutshell that uses window.getComputedStyle to try and match the background to the foreground. To better work with pages that dynamically change light and dark modes, you would want to change the nutshell.js lines 657 and 658 to use the keyword currentcolor and not check the computed style at all. Even better, remove the manual ball coloring and add it in the CSS on nutshell.js line 1974.

Here's what that fix would look like with just the top ball set to currentcolor:

sillycursorwowwaitdopeoplereadthesefilenamesihopenot.mp4

Yeah

I realize it's a bit silly to have such a massive issue explanation but I thought it might be fun to read.

Oh also I'm obligated to mention it because it's my thing, but you may want to consider a formatter for projects with big js files and such. My format-on-save wants to go crazy whenever I save until I tell it to go away.

Thanks for your writing!