pitfriedrich/chart-app
1
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[FEATURE] Dark Theme

Browse Source
This commit is contained in:
Pit Friedrich
2026-07-11 22:31:08 +02:00
parent aa8fbb4838
commit 9df764d065
7 changed files with 140 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/java/com/example/views/MainLayout.java
+20 -1
View File
@@ -1,7 +1,10 @@
package com.example.views;
import com.example.js.CommonJS;
import com.vaadin.flow.component.applayout.AppLayout;
import com.vaadin.flow.component.applayout.DrawerToggle;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.sidenav.SideNav;
@@ -11,13 +14,25 @@ import com.vaadin.flow.router.Layout;
@Layout
public class MainLayout extends AppLayout {
private final Button themeToggle = new Button(VaadinIcon.MOON.create());
public MainLayout() {
DrawerToggle toggle = new DrawerToggle();
Span title = new Span("Chart App");
title.addClassName("dialect-title");
addToNavbar(toggle, title);
Span spacer = new Span();
spacer.getStyle().set("flex-grow", "1");
themeToggle.addThemeVariants(ButtonVariant.TERTIARY, ButtonVariant.LUMO_ICON);
themeToggle.setAriaLabel("Farbschema wechseln");
themeToggle.addClickListener(e ->
getElement().executeJs(CommonJS.TOGGLE_THEME_JS).then(String.class, this::applyIconFor));
addToNavbar(toggle, title, spacer, themeToggle);
getElement().executeJs(CommonJS.INIT_THEME_JS).then(String.class, this::applyIconFor);
SideNav nav = new SideNav();
nav.addItem(new SideNavItem("Dashboard", DashboardView.class,
@@ -27,4 +42,8 @@ public class MainLayout extends AppLayout {
addToDrawer(nav);
}
private void applyIconFor(String theme) {
themeToggle.setIcon("dark".equals(theme) ? VaadinIcon.SUN_O.create() : VaadinIcon.MOON.create());
}
}