question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report][3.0.0-beta.13] Cannot create themes with custom color names and variations

See original GitHub issue

Environment

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:closed
  • Created a year ago
  • Comments:13 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
johnleidercommented, Oct 13, 2022

fixed by #15872

1reaction
Dinuzcommented, Oct 7, 2022

@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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom theme color bug Powerpoint - Microsoft Community
Custom theme color bug Powerpoint. I am making a custom theme on the slide master which I have saved and added to a...
Read more >
Angular 13: Angular Material 13 custom theme throwing error
It seems that material needs at least hue: 100, hue 500 and hue 700 (probably for functions like lighter etc).
Read more >
Colors and styling | Visualize and present data - Mode Support
Create and Manage custom themes and color palettes. ... Navigate to the Mode home page, click on your name in the upper left...
Read more >
Dark theme - Android Developers
?android:attr/textColorPrimary This is a general purpose text color. It is near-black in Light theme and near-white in Dark themes.
Read more >
Discover how to override theme colors in Bootstrap 5 using Sass
2 Bootstrap 5 changes the $theme-colors definition ... you can add as many 'custom' colors as you like twitter: #55acee, linkedin: #007bb5, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found