gebeer Posted June 12 Share Posted June 12 So here I am, fighting with UIKit (again). Offcanvas feature is great and works a charm out of the box. Only thing, those offcanvas bars are dark background by default. You could change that through variable overrides, sure. But what if you have 2 bars, one for nav (mobile) and one for an AJAX search thingy and you want the former to have dark and the latter to have light background? Easy right? Just add sth like uk-background-default and uk-dark to the uk-offcanvas-bar container. Done. Right? No. Shoot. what is happening here? White text, White icon, white input with white placeholder text. So not much to see here. Bonkers. 7 mins traveling through perplexity search later reveals an old closed (but seemingly not solved) GH issue. It suggests that back in 2021 offcanvas did not support the inverse component. Too bad, especially since it still does not seem to support it. Why the heck would it be such a hassle for a seemingly easy task? Is this such an exotic use case? Enough of the rambling. On to the obvious question: how do people solve this (other than suggested solution involving writing tons of CSS)? Is there a generic way of doing this with uk-classes in 2024? Your input would be much appreciated so I can move on to more exciting tasks ? Link to comment Share on other sites More sharing options...
bernhard Posted June 12 Share Posted June 12 2 hours ago, gebeer said: Enough of the rambling. On to the obvious question: how do people solve this (other than suggested solution involving writing tons of CSS)? Is there a generic way of doing this with uk-classes in 2024? I'd make the offcanvas white bg + black text and for the second offcanvas i'd use tailwind bg-black + text-white. 1 Link to comment Share on other sites More sharing options...
gebeer Posted June 12 Author Share Posted June 12 1 minute ago, bernhard said: I'd make the offcanvas white bg + black text and for the second offcanvas i'd use tailwind bg-black + text-white. Given that you are using your UIKit+Tailwind combination, this sounds like a viable solution. Not sure though if text-white on the container will override input text and placeholder colors as welll as icon colors. So it would be still kind of a mess. I'd prefer to do this with uk classes if possible since I'm on a pure UIKit project. But given that you work way more with UIKit than me, there doesn't seem to be an easy solution. I'll wait what the client ays to the dark search bar before I get my hands dirty. Hopefully they like it ? Link to comment Share on other sites More sharing options...
bernhard Posted June 12 Share Posted June 12 I'm not sure if my solution would really work. Maybe there'd be some surprises with that approach as well ? But I know that working with the offcanvas component can be a pain: https://github.com/baumrock/RockFrontend/blob/main/uikit/offcanvas.less Good luck ? 1 Link to comment Share on other sites More sharing options...
Recommended Posts