Hi everyone, I'm currently working on an Umbraco 12 project. My client wants the ability to manage a significant portion of the website's CSS directly from the Backoffice. They envision this functioning akin to Site Builders like Igloo Theme and uSkinned. However, they've emphasized that they want a custom solution without incorporating any packages. The CSS settings they want to configure from the backoffice include theme colors, spacing, fonts, dimensions, and more. Up to now, I've created custom property editors to store these values in the backoffice. However, I'm struggling to understand how Site Builders achieve dynamic CSS updates. From what I've gathered, there's a template CSS file containing CSS properties/variables. These variables in the template CSS file have default or placeholder values. When the user updates the "Theme" node (where all theme/CSS settings are configured), a copy of the CSS template file is generated with the updated values provided by the user in the "Theme" node. Subsequently, the master template links the generated CSS file. I have a (rather large) question: How would you approach dynamically changing the CSS variables? How would you go about programmatically generating a new CSS file and ensuring that the values stored in my custom property editors are correctly integrated into the newly generated CSS file?

If you're able to convert everything the editors enter into CSS variables, you could render those values via a partial, where the partial only contains a :root{} declaration with all the variable definitions. So long as the rest of the CSS only uses those variables, it should be entirely dynamic. No new CSS file, just new variable declarations.

That sounds promising, I'll definitely give it a try! Would I need to insert the partial into my Master template? Thanks in advance for this, I'll keep you updated! Upon further exploration of the Igloo Theme, they for sure generate a new CSS file for the user's chosen theme. The solution you're suggesting seems much simpler. Why do you think they opted to generate a new CSS file?

I'd render the partial in the head, above where ever the rest of your CSS is inserted. No idea on Igloo, but it has been around quite a while, possibly pre-dating CSS vars... If you're doing anything that can't be managed in variables, you'll need to regenerate the CSS, but I'd be very hesitant to give users that much control, and would question how often they'd actually be making major styling changes

100% agree with @nathanwoulfe CSS Custom properties are ideal for this use case. I have examples of theming blocks, areas and components even with transparency and saturation controls (fixed to brand colours) in umbootstrap.com

Just wanted to say a special thank you to @nathanwoulfe for this. Works exactly like I expected it to! This has been doing my head in for so long, so I'm glad I was finally able to solve it. Cheers guys 🙂

@User May I suggest “people” instead of "guys"? We use gender inclusive language in this Discord. 😀

All good my friend, happy to help. Sometimes fresh eyes make all the difference.

I have a follow-up question regarding this issue. In broad strokes, what would be the most effective approach to retrieve the value from the custom property editors on the Theme Node and pass it all the way to my Partial where I define the CSS variables? Given that my custom property editors return JSON objects, I presume that implementing a Property Value Converter would be appropriate. Additionally, I believe it would be beneficial to create a class responsible for handling the logic of mapping the JSON object values to variables. What are your thoughts on the best approach in this scenario? I apologize if I'm asking too many questions now. I greatly appreciate your help.