PREVIEW: New Wappler UI Theming

Welcome to the future!

Enjoy full theming of the UI in the latest Wappler 4 Beta 11.

Choose your favorite theme from the available 19 gorgeous themes.
You no longer have to wait for MacOS Monterey or Windows 11 - the future is here!

All Wappler elements are styled automatically according the selected theme. Even the code editor, if you choose to, and the terminal are themed.

We have also implemented a nice theme selector dropdown in the right upper corner so you can easily switch themes.

Furthermore all menus and and modal dialogs have an amazing modern glass look! So you Wappler really comes to live!

Available themes

Default

Dark

Light

Tomorrow Dark

Tomorrow Light

Eighties

Pastel

Mocha

Ocean

Materia

Equilibrium Dark

Equilibrium Light

Nord

One Dark

One light

Wood

Monokai

Night Sky

Morning Sky

The Glass Look

Elements and Blocks Panel

Dark

Light

Main Menu

Dark

Light

Project Manager

Dark

Light

17 Likes

Really nice!!! thnks!!! :grin:

2 Likes

This looks absolutely amazing I’m a big fan of glass styles can’t wait to check it out later :slight_smile:

1 Like

Holy moly, this is cool!

1 Like

Gorgeous.

How about some customisations? Or some instructions on how to create a custom theme?

Could the large Wappler logo be replaceable? Would be neat to have our own logo there instead when working in an open studio.

Light Themes!!! Yay!!! Thanks so much for this! Can’t wait to try it out.

3 Likes

This is a great improvement. The difficulty will be deciding which them to choose - depending on the time of day and weather conditions, and mood…

1 Like

Agreed. For now I’ve gone through them all and ended up staying with ‘Default’ but that’s just because I’m so used to it.

‘Equilibrium Light’ is lovely, though, and not too bright.

2 Likes

Love the new looks! I can see myself changing it up quite frequently before I settle down with one.

Nicely done! :beers:

1 Like

Well done…! They look great, can’t wait to try them out for real. I’m really liking the glass theme…

I like ‘Equilibrium Light’ too, the menus seem drawn with a pencil very much in the eco-future friend style.
For the night I prefer ‘Tomorrow Dark’.

A post was split to a new topic: Beta 11: minor stifling issues

I didn’t have an issue with the dark, really. But this is a really nice touch. Nice job guys!

This is AWESOME! Tomorrow Light is absolutely perfect for me! Thank you, Thank you, Thank you!

Thank you for the wonderful user interface improvements! Although I was completely suits with the Dark theme, I must say that the Eighties theme became a real delight for my eyes (incredibly comfortable, especially at night, when my eyes are already tired of the strong contrast). Also, the child inside me is very happy when you can optionally paint the interface in new colors in just a couple of clicks.

Special thanks for the html tags in the design view:

At first I thought it was an interface bug (when the Wappler just started and the panel was empty), but when I started working with it, I appreciated the improvement. This allows you to move to the desired element much faster. Very cool!

P.S. The funny thing is that I just now found out that the tags were still in version 3 of the Wappler. But I didn’t notice them… In Wappler 4, they are much better visible and that’s why I noticed them. :slightly_smiling_face:

5 Likes

I’m normally a fan of ‘light’ workspaces, however, I’m very drawn to the new ‘Ocean’ theme - this, combined with the glass effect, have totally transformed my workspace. I’m amazed at the difference it makes considering its not too many shades away from the default ‘dark’ theme.

It’s great we now have the option to change our themes easily - thank you Team Wappler…!!

I hadn’t had a chance to download and try this until this afternoon but have to say… WOW!
It looks great.

One little thing that would be brilliant would be being able to pair Monaco code editor themes with the UI theme so you can quickly switch without having to change the UI and code editor separately. I’ll create a FR

Seems we didn’t mentioned that well but if you want to pair the code editor with the main theme - you just have to choose the “Wappler” code theme as code editor theme - then it will switch automatically.

This is also the new default - just if you had any previous code editor settings then it will be kept.

4 Likes

Wappler whopping with these themes. See what I did there! Congrats again Wappler team, it’s another one!

3 Likes

Very nice!