Just playing with the accordion package and cannot see how i set a different colour for the accordion, sure I am missing something obvious .... 🤔@Jacob Kofoed
Lucas G
1 year ago
I don't think you could last I looked so I made a similar one (made using his video on contexts)
Lucas G
1 year ago
I have to update my package for better theme support but it sort allowed for some color tweaks 😅 I would recommend cloning it if you really need customization
DarrenBignall
1 year ago
Thanks @Lucas G I was about to clone it when i noticed that he has changed an instance of the accordion to the purple colour in the image, so thought there must actually be a way to do it, but i cannot see what is setting that purple colour when i am in the package project
Yes, but I am not getting how these are set on an instance of the accordion, they do not appear to be set on the component, or the parent container, but there must be way ...
Lucas G
1 year ago
If you add those styles to your theme settings, it'll update the colors
DarrenBignall
1 year ago
Ok, that makes sense, but would mean that all accordions in my project would take on those colours / need to be the same colour, correct?
DarrenBignall
1 year ago
but in the package there are some black accordions and some purple and no styles in the package theme settings
think that is what is throwing me off, when i say those variables i went to the package theme, but that have any colours set for accordions.
You can override them by manually typing the variables in the CSS box
You can wrap the component in a div and add the variables to the div's css and that should override them
Lucas G
1 year ago
Yup that's what he did
DarrenBignall
1 year ago
beat me
makes sense, thanks for the assistance
Lucas G
1 year ago
Yeah I sometimes do that but with a <style> div where I throw in custom CSS for the component
Adds extra flexibility when you want to combine selectors and such
DarrenBignall
1 year ago
yes, makes a lot more sense now 👌
Jacob Kofoed
1 year ago
Sorry for late response. You can also use toddles CSS variables to bind the color to a formula. Just make sure the name matches. I think we should expose CSS variables on components to make it more obvious in the future 👍 I don’t think the accordion is too flexible, it could use some work when I get the time 😅
Lucas G
1 year ago
I think it's great lol. Maybe add padding/radius variables in case people want to change those but it's great and accessible out of the box 👌
DarrenBignall
1 year ago
It's working for me 🙂, more so now after @Lucas G assistance
Lucas G
1 year ago
(a11y friendly I mean)
DarrenBignall
1 year ago
but yes, exposing the css variables on components would have made it much clearer 👍
.jpeg/public)