I love the idea of this, however it would be awesome to actually retrieve a list of all of the CSS variables from the relevant selected theme and dynamically show them on the View with a flex repeater/table.
I don’t know if it’s possible to do it smarter, but I would simply “walk” through the selected theme CSS and look for imports for other CSS to walk through, and look for variable definitions to add into the display dataset. I’d group them by the file that I found it in and/or the comment section it is under in the file.
1 Like
Edit: this works on Windows. No idea what the Linux theme directory is
I just created something super quick, super ugly at the moment but it works 
CSS Variable Extractor.zip (50.4 KB)
The function behind the Refresh button will walk through all referenced css files looking for files with the name “variables.css”. Then it pulls out each variable their values. It works recursively as well, so if you have a theme that references other files or other themes, it will walk through them all. The foundation is there… just need to make it display nicer. The text changes colour based on the background colour too, using a CSS filter. It’s a bit dodge for some particular greys… but works for most colours
7 Likes
I completely agree @nminchin but I wasn’t sure how to accomplish that live list of the variables until you jumped in here! Great work, I like the direction. “Ugly but works” is the way forward :).
It’d be nice to detect the users OS, then serve up the default install filepath to the theme directory. Then, in the session the user can set an alternative filepath.
For the color change against the background, I did a little digging and there may be some promise in this simple method: Foreground Github. I was getting an error ValueError: Too many values to unpack. Seems like a simple fix, maybe you could implement that on the variable view’s custom invertedColour prop?
2 Likes
Let’s make this resource more useful and I can update it on the Exchange!
1 Like