Visual tool to design theme?

Support
#1

Hi

Is there a visual tool out there allowing to customize theme easily ? Editing scss files manually makes me feel back decades ago before visual GUI designers :slight_smile:

Rgds
Mike

1 Like
#2

Never tried it before, but probably you can get some help by using official Vaadin Designer: Vaadin Designer – A drag and drop web app builder

But: it’s rather expensive paying 90 bucks/month for the designer, and what you can do is tweak some SCSS properties of the base Valo themes, then it’s your responsibility porting them to Halo…

In the end, not worth it…

#3

Hi,

Simple (unfortunately, not visual) SCSS variables editor for Halo theme is available in Studio:
image

#4

Thanks to both of you.

I thought about Vaadin Designer but I came to the same conclusion :frowning:

Manual editing of scss is so time-consuming : find correct class, try to set a rule, re-assemble project (no hot deploy for scss in Studio sadly), launch application, see that you were wrong, rince, repeat.

For instance this morning I fought with LookupField to change the background color.

For a TextField it’s easy, do that:

.v-textfield-pivot-property {
    background-color: #FFEBCD;
  }

And you get that:
image

While for or LookupField, I’ve done that in different variations:

.v-filterselect-pivot-property {
    background-color: #FFEBCD;
    .v-filterselect-input {
        background-color: #FFEBCD;
    }
  }
}

And no way to have the background color.

I abandoned after 30 mn of rince & repeat. Decade ago, changing a background color was 1 sec.

I once tried havana theme and I’m puzzled why it has been discarded because it was much so more elaborated than halo. Halo is ok, but so plain that it seems unfinished, e.g by default the check on Ok button is not even green.

Call me old-fashioned :slight_smile:

#5

There is a community guide for that: Hot-deploy SCSS theme changes on file save - CUBA.Platform

#6

You can also just in your browser change the css with the dev tools until you are quite fine with the result and then at the end put it into your files…

#7

I feel your pain, as a UX practitioner this is the major pain point in using Vaadin-based solutions.
When I work on custom made web solutions, I’m able to tweak every detail for the greatest user experience.

But I think the base issue here, is that SASS/SCSS themes (not Valo/Halo specific) are written by stretching too much the “language” itself (lot of mixins, conditional logic, and so on).
So, in the end, you need to master SASS to be able to make significant changes to the structure of the final stylesheets. This happens when “designers who develop too” are in charge for writing these giant themes.
Personally, if I introduce these “style” languages in my projects, I try to make them linear and straightforward, so that they can be understood by other “designers who CAN’T develop” :wink:

Paolo

#8

This is a fair point too, and for minor tweaks is the way to go…

But this fails short for style changes that are spread to a huge number of rule-sets, while they could be changed only in a couple of places in SCSS sources.

#9

This might help a little. At least you can see what the colours look like

https://cdn.vaadin.com/vaadin-valo-theme/0.3.1/demo/colors.html

#10

By the way, there is a migration page that show hows to use Halo with the same colors as Havana: Extending an Existing Theme - CUBA Platform. Developer’s Manual

#11

Thanks for all your inputs, this clearly helps.

EDIT : without such visual tools, my respect to the devs out there that are able to produce complete themes.

Michael