But can you make it green?
Theming and styling of an application can be a tedious task. The new Visual Theme Editor low code tool allows you to change the color, font size, etc., in your views – in real time – without code!
When you implement changes, they are reflected in the live preview and your code. Theme Editor is an effective way to test different appearances and to get a head start when creating a new application theme.
Available now in a free preview: Give it a try!
How to use Theme Editor
Run your Vaadin 24+ application and navigate to it in your browser. If you haven’t changed the configuration in the application.properties file, then the application opens automatically at localhost:8080.
No Vaadin 24 app? No problem! Build one for free at https://start.vaadin.com
Click on the Vaadin symbol }> in the bottom right corner of your browser window to open the development tools. Select the “Theme Editor (Preview) tab, click on the + sign, and voila!
You can now choose a component in your view and edit its appearance within the Theme Editor UI. It contains a color picker and element sliders where you can alter values. Most Vaadin Components and common HTML components, i.e. <h1>, are supported. You can style text, color the background, and add a border, padding… and Theme Editor generates the corresponding code for you.
Applying changes
After you’re done editing, Theme Editor saves the CSS rules into a file named theme-editor.css in your application theme folder. You can choose the scope of applied changes to either Global or Local:
- Global affects every instance of your component, i.e., all <button>s.
- Local only affects the chosen instance, i.e., the specific <button> you selected.
Manual changes
You can also make CSS changes directly in code by modifying the theme-editor.css file. Changes are reflected in your application when using the Theme Editor UI.
Read the documentation for more details. Please note that Theme Editor is in preview, and report any bugs you may encounter by creating an issue in the Flow repository. There are still some limitations, i.e., styling Grid is not possible yet.