[Bug Report][3.0.0-beta.13] Cannot create themes with custom color names and variations
See original GitHub issueEnvironment
Vuetify Version: 3.0.0-beta.13 Vue Version: 3.2.40 Browsers: Chrome 106.0.0.0 OS: Mac OS 10.15.7
Steps to reproduce
Define a theme, including non-standard color names. E.g. theme.colors.color2 = '#abcdef'
.
In the call to createVuetify, pass a variation definition including one of these new colors. E.g. options.theme.variations = { colors: ['color2'], lighten: 4, darken: 0 }
.
Start the development server, and open it in a web browser.
Expected Behavior
the app should start, and the defined variations should be available.
Actual Behavior
The page does not load in the browser, instead a fullscreen type error is displayed: Colors can only be numbers or strings, recieved undefined instead.
This is because the variations are calculated on the light and dark themes as well as the provided theme, where these colors are not available.
Reproduction Link
https://codesandbox.io/s/recursing-spence-3kxwnr?file=/src/vuetify.js
Other comments
It should be possible to prevent the default themes from being provided
Issue Analytics
- State:
- Created a year ago
- Comments:13 (5 by maintainers)
Top GitHub Comments
fixed by #15872
@KaelWD I don’t understand your answer at all. The idea of using a custom theme is exactly because you don’t want to use a default one. What is the point of a custom theme otherwise? Let’s say I have a specific brand palette, and I want to generate a theme using this palette, and this specific palette has a primary, a secondary and an accent color. So I cannot use the “variations” tool to automatically generate my lighten and darken variations for every custom color name (in my case accent), but I can use it to generate these variations for the colors that I named primary and secondary (exactly as you do in the code)?
Would be probably super cool if instead we could use also custom names inside the tool