css guidance

[ReenigneArcher]

I was hoping someone could offer some guidance on how to make these widgets match the furo theme. They look good with the light theme, but not with the dark theme.

Not so good on the dark theme.

This is how I set it on our main website, but that is using bootstrap, and I would prefer to match the theme style of furo for this instead of using bootstrap if possible.

    // change styling of language selector button
    let button = document.getElementsByClassName('cr-picker-button')[0]
    button.classList.add('border-white')
    button.classList.add('btn')
    button.classList.add('btn-outline-light')
    button.classList.add('bg-dark')
    button.classList.add('text-white')
    button.classList.add('rounded-0')

    // change styling of language selector menu
    let menu = document.getElementsByClassName('cr-picker-submenu')[0]
    menu.classList.add('border-white')
    menu.classList.add('bg-dark')
    menu.classList.add('text-white')
    menu.classList.add('rounded-0')

    // change styling of selected language in menu
    let selected = document.getElementsByClassName('cr-selected')[0]
    selected.classList.add('text-white')

I tried to look through the css provided by furo, but couldn't figure out which classes to use.

[ReenigneArcher]

I was able to leverage the theme and css variables to accomplish the changes.

The selector button wasn't too bad and could be done with almost straight css. The iframe widget was a bit more complicated due to it being an iframe, and had to do some hacks in javascript.

https://github.com/LizardByte/.github/pull/261/files