Theme Manager icons + mutiple themes

Q1: I did a search to find out the difference between the two icons below and found a post or two but the question went unanswered, so… could someone tell me the difference between these two icons and when one would use one over the other?

image
image

Q2: While I’m here, is there a way to save themes so you can switch between them to let the client decide? I guess this may have something to do with the Bootstrap custom settings? Thanks

The rocket icon builds the design theme and runs the autoprefixer so you need this at the end, before publishing your site to production - in order to support more browsers.

During development the auto generation on change or the quick generation button is just enough.

2 Likes

This is good to know. I didn’t know this. Guess I have to go back into all my projects that use theme manager and do this. Although I haven’t noticed any issues yet. Thanks Teodor.

Nice. Thanks Teodor, the hover text makes sense to me now.

What about Q2? If someone wanted to have two or three theme variations to show a client, how would they go about it? How would they save ‘style1.css’ and ‘style2.css’ and switch between them? Is that built into Wappler… perhaps in the BS custom settings… or would I have to work out a way to do it manually?

There is no such an option built in. The theme manager replaces the default Bootstrap css file.

1 Like

@cy2 Add a feature request, I would certainly vote to be able to create multiple themes that user could choose from!

1 Like

Not sure how do you expect this to work (multiple themes to choose from) but the theme manager, when creating a theme, replaces the bootstrap css file in the bootstrap folder in your project:

Screenshot 2021-10-14 at 9.39.27

This file is included on your pages like:

<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />

So i don’t get your idea about changing multiple themes? You generate a theme and the css file is generated. The page just reads it from the same location.

1 Like

I’d like the user to default to the bootstrap css but be able to set a local data item with the value of a different theme which could then update which css file to use.

e.g.
User chooses theme A and the style adjusts (possibly with a dmx-bind) such as

<link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" dmx-bind:href="/bootstrap/5/css/{{local1.stylechoice.default('bootstrap')}}.min.css" />

Alternatively, for NodeJS (I’m not sure it would work for others) the style choice could be a server-bound data value from the DB and inserted as the href

The ‘issue’ is that we can only set 1 theme because it overwrites when it changes - having the option of saving themes with different names would be useful (I think, anyway).

I’d like to offer something like you have in the Wappler UI that offers a selection of themes for the user…

OK, so Wappler recompiles SASS and overwrites the default BS CSS file.

I haven’t thought this out in detail because I normally write my own SASS and insert the compiled style sheet(s) after the default BS CSS file – like Wappler does with custom stylesheets.

To show the client a different theme, I simply comment the linked stylesheet out or temporarily change the css file name so the webpages can’t find it and it defaults to the main stylesheet.

Anyway, it’s not a big deal, I just thought I’d ask in case I was missing a way to do this in Wappler but…. if I were to imagine how this might be done, I’d imagine:

  1. you create one theme via Wappler’s BS Theme Manager (bootstrap.min.css)

  2. you’d attach a custom style sheet and apply a different BS Theme to it.

  3. You’d build a toggle switch/button on your webpage that comments-out the second css file link (and turns it back on again). If you had more than 2 themes, it would toggle through each theme in a loop.

I see it working in a similar way to websites that give you the option to view the website in ‘day’ or ‘night’ mode.

Having said that, I’m not sure if this would be used enough to warrant putting it in as a feature request, I was simply checking out if there was an automatic way of doing what I normally do manually.

Thanks @Teodor and @bpj