Switching between dark and light themes programatically

[jugglingcats]

Hi, we have a need to switch between the light and dark theme at runtime, based of user light/dark mode selection.

We're using styled-components and I've managed to make it work by copying the vars from dark.css and adding them conditionally to the styled div, like so:

const StyledGlowbuzzerApp = styled.div<{ darkMode: boolean }>`
    .flexlayout__layout {
        ${props =>
            props.darkMode &&
            css`
                --color-text: #eeeeee;
                --color-background: black;
                --color-base: black;
                ...
            `}
    }
`

This seems to work fine for our purposes, just wondering if there is a cleaner way that avoids copying from the flexlayout css?

Thanks