Skip to content

Conversation

@Artur-
Copy link
Member

@Artur- Artur- commented Nov 12, 2025

Adds Page.setThemeVariant() and Page.getThemeVariant() methods to enable runtime switching between theme variants without requiring manual JavaScript execution.

Fixes #15354

@vaadin vaadin deleted a comment from github-actions bot Nov 12, 2025
@sonarqubecloud
Copy link

@github-actions
Copy link

Test Results

1 285 files  + 1  1 285 suites  +1   1h 17m 0s ⏱️ -17s
8 912 tests + 8  8 845 ✅ + 8  67 💤 ±0  0 ❌ ±0 
9 368 runs  +27  9 290 ✅ +27  78 💤 ±0  0 ❌ ±0 

Results for commit fa58500. ± Comparison against base commit 8728721.

@jouni
Copy link
Member

jouni commented Nov 12, 2025

Rather than making it work differently with Lumo and Aura, we should align the themes to work the same way. Either both offer a theme="dark|light" attribute or both support the color-scheme property on the html element.

@Artur-
Copy link
Member Author

Artur- commented Nov 12, 2025

Please do

@Artur-
Copy link
Member Author

Artur- commented Nov 12, 2025

ExtendedClientDetails (browser information like screen size, timezone,
etc.) is now automatically fetched during UI initialization and
immediately available, instead of requiring asynchronous callbacks.

Client-side changes (Flow.ts):
- Collect browser details using getBrowserDetailsParameters()
- Send details as JSON in v-r=init request (v-browserDetails parameter)

Server-side changes:
- JavaScriptBootstrapHandler: Extract and parse browser details from
  init request, store in UIInternals before UI constructor runs
- ExtendedClientDetails.fromJson(): New static factory method for
  parsing browser details from JSON (shared by init and refresh)
- Page.getExtendedClientDetails(): Never returns null - creates
  placeholder with default values if not yet available
- Page.retrieveExtendedClientDetails(): Deprecated method maintains
  backward compatibility by returning cached values when available
- ExtendedClientDetails.refresh(): Updated to use shared JSON parsing

Test updates:
- MockUI: Override getPage() to return the mocked Page instance for
  proper test mocking
- PageTest: Removed obsolete tests for old async-only behavior
- Test views updated to use new synchronous API

Benefits:
- Browser details available immediately in UI constructor/onAttach
- Eliminates null checks when accessing ExtendedClientDetails
- Consistent JSON format for init and refresh operations
- Cleaner API with shared parsing logic
- Full backward compatibility with deprecated async API
Adds Page.setThemeVariant() and Page.getThemeVariant() methods
to enable runtime switching between theme variants without requiring
manual JavaScript execution. The theme variant is automatically synced
from the browser on page load if set in index.html.

The implementation supports both Lumo and Aura themes:
- Lumo: Sets/removes the 'theme' attribute on the HTML element
- Aura: Sets/removes the '--aura-color-scheme' CSS custom property

Key changes:
- Page API: setThemeVariant() and getThemeVariant() methods
- UIInternals: cache theme variant for quick access (returns "" not null)
- ExtendedClientDetails: include theme variant from browser
- FlowBootstrap.js: sync theme attribute and Aura color scheme on page load
- Comprehensive unit and integration tests

Fixes #15354
- Add Page.setThemeVariant() and Page.getThemeVariant() for runtime theme switching
- Add ExtendedClientDetails.getThemeName() to detect active theme (lumo/aura)
- Theme variant sent from client via v-r=init request in v-browserDetails parameter
- Theme name auto-detected from CSS properties (--vaadin-lumo-theme, --vaadin-aura-theme)
- Theme variant supports both Lumo (theme attribute) and Aura (--aura-color-scheme)
- Client-side detection in FlowBootstrap.js sends both theme variant and name
- Integrated ThemeVariantView into ExtendedClientDetailsView
- Add package-private setThemeVariant() to ExtendedClientDetails
- Page.setThemeVariant() now updates cached value in ExtendedClientDetails
- Page.getThemeVariant() immediately reflects changes from setThemeVariant()
- Update javadoc to clarify that setThemeVariant changes ARE reflected
- Add test setThemeVariant_updatesGetThemeVariant() to verify behavior
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Java API for changing the variant of the theme (light / dark)

3 participants