Feature/theme designer #18188
Open
Feature/theme designer #18188
+2,892
−185
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
…preferences Implements a theme designer with color customization, accessibility contrast ratios, and text color preference controls (Contrast/Light/Dark) applied across all preview components. Includes responsive mobile layout.
- Add Reset All button and fix isDarkMode prop passing - Fix duplicate isDarkMode key linting error - Restructure tests to comply with Quasar test spec validation - Add missing tests for loadFromStorage and saveToStorage - Fix build system to handle .vue file imports
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
feat(ui): Add QThemeDesigner – full in-app Theme Builder component (official theme-builder as a reusable component)
Recreates the functionality of https://quasar.dev/style/theme-builder directly inside the framework as
<q-theme-designer>. Features live color picking for primary/secondary/etc., real-time WCAG AA/AAA contrast validation, light/dark/contrast preference controls, and instant preview on all Quasar components. Fully responsive (mobile-first) and ready for playground/docs integration.Hey Quasar team! 👋
This was created as an assignment to contribute something meaningful to a major open-source framework—I chose Quasar because I love it and have used it on previous projects. I chose to turn the official online Theme Builder into a real, reusable Quasar component because I thought it could be genuinely useful.
I have no expectation of a merge — I know big features like this need prior discussion and roadmap alignment. My main goal was the learning experience of building and contributing on a large codebase like Quasar.
That said, I followed the guidelines closely and aimed for production quality. Feel free to take anything useful or just close it. Thanks for building such an awesome framework! ❤️
What kind of change does this PR introduce?
Does this PR introduce a breaking change?
The PR fulfills these requirements:
devbranch (orv[X]branch)fix: #xxx[,#xxx], where "xxx" is the issue number)If adding a new feature, the PR's description includes:
Other information: