Observable inputs in dark mode

[ijlyttle]

I know I'm getting picky, here :)

I suspect part of the problem here is that Observable itself has stepped back from supporting dark mode.

When I invoke dark-mode, some inputs stay partially in light-mode:

Again, I suspect this comes down to competing styles...

[cscheid]

We won't be able to generally handle all of the possible styling combinations. But you can add your own CSS. You have to be a little sneaky to find a selector that has higher specificity than the ones provided by observablehq's runtime, but this general kind of trick works:

<style>
    div.observablehq table {
        background-color: red;
    }
</style>

And you get: (:scream:)

In case you need to get higher CSS specificity, here's the general DOM you can rely on to get selectors. Every OJS output we generate is inside a nested sequence of divs like so:

div.cell div.cell-output-display div.observablehq $your-element-selector-here {
   ...
}

[ijlyttle]

Thanks! I'll wrestle with it some...

[ijlyttle]

FWIW, here's what I added:

div.observablehq table thead tr th {
    background-color: var(--bs-body-bg);
}

input, button, select, optgroup, textarea {
    background-color: var(--bs-body-bg);
}

It seemed to do the trick: https://ijlyttle.github.io/reactivity-three-ways-quarto/observable.html#showcase

Thanks!