feat(setting): add dark/light iframe CSS vars

[codewithvk]

• Resolves: #
• Target version: main

Summary

TODO

• ...

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Documentation (manuals or wiki) has been updated or is not required

[juliusknorr]

Can't we just reuse the iexisting css vars? Feels a bit like duplicating quite some logic

[codewithvk]

There are two points to consider:

• Missing Variables: Some variables are not currently being sent, so we need to add them.
• Theme-Based Values: For the settings iframe, we expect the variable values to be set based on the theme. (See the code pointer here: https://github.com/nextcloud/richdocuments/pull/4657/files#diff-087176fb56b5928e33a834558791bd88511f1897d4fd950a38b7334fe9c56c99R78-R82 .)

Since for cool iframe, we're not sending dark mode values(https://github.com/codewithvk/richdocuments/blob/private/codewithvk/pass_ui_theme_to_new/src/helpers/coolParameters.js#L105), I think creating new pair would make sense here... Any thought? @juliusknorr

[elzody]

If I understood you correctly, maybe then we could still use the generateCSSVarTokens() method and pass in some object containing values to override or something, and adjust the logic inside. That way we can use the same method and if you need to explicitly control the CSS variables (for in this case, the settings) then you can explicitly pass them to this method and it would mix them in, overriding preexisting ones.

I also don't want it to be too confusing to reason about, so two methods could probably be suitable, but it might help with re-usability or something.

[elzody]

@codewithvk Have not tested, but seems fine, thanks for that. Just needs the merge conflict resolved. Was going to try helping out with it myself but with the fork, not sure how it would work.

[codewithvk]

Sorry @juliusknorr & @elzody, I was busy with other stuff and couldn’t manage to fix it earlier. Anyway, I’ve modified generateCSSVarTokens and come up with a better approach — setting the iframe from Cool is now expected to use theme-based variables. If the theme is light, the variable values are based on light, and vice versa.

Feel free to let me know if you have any questions :)