Nutshell text only displays as black, even on black background

[docpop]

Nutshell only seems to display in a black text. This is problematic when trying to include Nutshell embeds on a dark background.

My site alternates between light and dark sections, so I can only use Nutshell on the sections with light backgrounds.

It would be great if Nutshell could follow the same style as everything else does on my site. So when I post on black backgrounds, it uses the white font.

Alternatively, it would be nice if I could change font colors when needed. Possibly by adding a hex code after the link. ie #link:ffffff

Here is an example of how the expanded text appears on my WordPress site. I've selected some sections of the text to make it clear the text is there.

[bear-jordan]

Do you have access to your website's CSS? If so, type Nutshell.defaultStyle into your browsers developer console to see Nutshell's CSS. Using those classes, you can edit your colors (example below).

/* Site Variables */
:root {
    --your-color: #ffffff;
}

/* Nutshell.js */
/* Text */
.nutshell-expandable .nutshell-expandable-text{
    color: var(--your-color)
}

/* Balls */
.nutshell-ball-up, .nutshell-ball-down{
    background: var(--your-color);
}

[ncase]

Thank you @docpop ! The previous version of Nutshell did try to match the bubbles to the parent page's background & font-color, but it only expected one style per page. @bear-jordan beat me to the custom-CSS solution!

However while testing Nutshell more, I realized that I needed to make Nutshell work for multiple styles per page anyway, because the "embed this nutshell" modal is black-on-white, no matter what the main page is.

After a lot of fiddling, it should work for multiple styles on a page now! See this below .gif of it working with red-on-green, white-on-black, and black-on-white – no custom CSS needed, Nutshell already handles it all:

Try out the new version of Nutshell https://cdn.jsdelivr.net/gh/ncase/nutshell@1.0.2/nutshell.js and let me know if it resolves your problem – thank you!