Working with Angular 2.
I had an idea today to give users the ability to well select their style. I would setup my app and then have a, I guess service, set certain values and have my css change on selected values. I just can't think of a way to do this. I got the idea from seeing bootswatch and how you can select a theme.
I want to be able to set up a theme and have users be able to preview and select which theme they like. I am making a portfolio page for myself but I want to make it open source and public to see and maybe for people who don't have any programming skills to make a portfolio page on my web app. Except with a lot more editing they can do themselves.
Why don't you dinamically apply a class element (e.g. style-0, style-1, etc.) on the body and then work on CSS inheritance rules?
Continuing on Ozzie 's answer. When you change the stylesheet link element target CSS file, the page will reload automatically. If I'm not mistaken. This makes the preview quite easy. If you want the preview to be framed, place it inside an object/iframe so it won't affect the main document style. Store the desired CSS choice either client or server-side and reload the page using user preference.
Yes. you can. (to an extent)
look here for class/style switching in angular2: coryrylan.com/blog/introduction-to-angular-2-ngcl…
what you would do is this:
<body [ngclass]=SLECTEDCLASS>
<button class="myclass">press me!</button> </body>
in the CSS (i use less in my project) you would have your "themes" as such:
theme1 {
.myclass {
color:red
}
}
theme2 {
.myclass {
color:blue
}
}
in your JS code, you would have logic to change "SLECTEDCLASS" between theme1, and theme2
The drawback (and perhaps limitation) is that the expectation between the layouts in different themes would need to remain the same. i.e: if one template is:
<div class="a">
<span class="b">
</div>
<span class="3" />
you would run into issues if you have below in the other:
<span ="b>
<div="a">
<span="3">
</div>
Ozzie Neher
Full Stack Dev
I think it depends on what you want out of it. If you just want a user to be able to choose a theme for your site, maybe consider inserting / swapping out a
<link>tag depending on which theme the user has chosen? Then just save the theme they have chosen somewhere (possibly on a backend, or localStorage for client side) and do a check each time they load a page and insert the chosen theme's css file.If you want them to be able to change values (e.g background color, font color) based on their input and have it save specific to them, you might be out of your league a bit based on your question. However, if you're wanting to attempt it, try having a
<style>tag on the page and swap out the values based on user input. Keep in mind, this example is just a super basic option for implementation. There are better ways to do this.