-
Notifications
You must be signed in to change notification settings - Fork 188
feat: add API for switching between light and dark theme variants #22718
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draft
Artur-
wants to merge
4
commits into
main
Choose a base branch
from
flow-change-dark
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Member
|
Rather than making it work differently with Lumo and Aura, we should align the themes to work the same way. Either both offer a |
Member
Author
|
Please do |
Member
Author
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
fa58500 to
4b6d9a3
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.



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