Introduction
At our company, we manage a large client website in Optimizely (ASP.NET MVC) that hosts multiple smaller sites for different regions and important customers.
Currently, our frontend team creates various themes using SASS to CSS conversion, with a dropdown menu in Optimizely allowing us to select the theme for each site. This selection is then reflected in the master layout, loading the corresponding style sheet for the page.
However, due to the time-consuming process of developing full themes for all sites, the client has requested the ability to set basic colors (primary, secondary, and tertiary) for newer sites individually within Optimizely.
For clients seeking a fully branded experience, they can opt for a custom theme with unique colors and structure, while others will utilize a generic theme with colors defined in Optimizely.
The Issue
The main query revolves around incorporating server-defined colors into transpiled CSS seamlessly. While injecting colors directly into the page is feasible if needed, integrating these colors into the CSS proves challenging (initial attempts with SASS variables in the master layout were unsuccessful).
Potential Solutions
One approach involves rendering specific CSS classes on the page with color properties explicitly set and marked as !important to supersede existing color definitions in SASS. However, leveraging SASS variables eliminates the need to define or override colors across numerous instances.
An alternative method entails dynamically modifying the CSS during runtime based on color changes from the CMS (despite CDN deployment). Alternatively, utilizing JavaScript to adjust colors post-page load introduces a delay before new colors take effect, potentially displaying original hues initially. Although viable, both these methods may appear cumbersome.
This seemingly straightforward task lacks clear online solutions, prompting an inquiry about novel approaches or experience-based insights from those who have encountered similar challenges. Thank you