Disable background image in widget depends on themeOptions.dark state

1

Hello community,

as I got the syntax to use props in background-image from JustinG (thanks again), I have a additional question

This is the syntax I use

background-image: ='linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url(\/static\/images\/' + props.image + '.jpg)'

Is it possible to depends the background image on the themeOptions.dark state
White = show background image
Dark = hide background image

background-image: "=themeOptions.dark === 'dark' ? 'show not' : 'show'"

Thanks and regards
Arne

2

Sure is! You’re even most of the way there already. Your current background-image value just evaluates to a string. The example ternary expression you’ve put also just evaluates to a string; it simply decides which string to use based on the condition at the beginning. So one option is to just copy your current value into the part of the ternary expression that says 'show' and put a version of the string without the url(...) in the 'show not' portion.

This, however, gets a little long because it duplicates all the linear-gradient stuff. Fortunately, it’s pretty easy to condense this down. You can just keep the linear-gradient stuff as is and just use the ternary expression to decide whether to add the url(...) or not. Taking into account the necessary quote formatting, with some extra () for readability, it would look something like this:

background-image: "='linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8))' + ((themeOptions.dark == 'dark') ? '' : ', url(\/static\/images\/' + props.image + '.jpg)')"
3

Good morning JustinG,
what a cool solution. And again so explained that I can really take a lot.
Thanks a thousand again, works perfectly
Best regards and have a good day
Arne

4

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.