I’m reaching out to the community because I’m currently employed as a front-end developer and I’ve run into a challenge at my job that I’m hoping you can help me solve.
I’ve been tasked with creating a customizable web template, but I’ve been having some difficulty getting it to work the way I want it to. I’ve noticed that the functionality on this website is exactly what I’ve been aiming to achieve in my project.
To give you a bit more context, It is a laravel web application and is running on version 10 framework for my styling I am using bootstrap 5. I have setting for dark or light mode theme but I need it to allow the user to choose a specific color theme, font style and size.
If anyone has experience with creating customizable web templates, could you share some guidance or point me towards any resources that might help me understand better? I would really appreciate any advice you can provide.
Notice that your root html tag has the attribute data-bs-theme="dark" set on it when you switch to dark mode. Your styles have the appropriate selectors set to become active when that happens. You are setting CSS custom properties whose values are going to vary depending on the light/dark mode you end up choosing.
Do you have access to modifying the JavaScript and the CSS for your template?
Yes. I gave you a general approach for how you can do this. What you need is a series of CSS style selectors that are designed for the various color options that you want. You can trigger them based on an attribute change in the HTML. You have light and dark already implemented. This would be a copy/paste and rename to avoid naming collisions
For the actual dialog that allows you to change the themes, if you want to reuse the one that I have, feel free to borrow it by viewing source / inspecting the CSS.
