Theme url with background lightness of 0 causes js error
- Dominant language
- JavaScript
- Stars
- 2.1k
- Forks
- 130
- PR merge metrics
- No merged PRs in 30d
Description
## Description
If lightness value is set to 0, the theme URL causes the following js error:
```
Uncaught Error: unknown hex color: undefined
at hex2rgb$1 (chroma.js:804:1)
at new Color (chroma.js:183:1)
at chroma$k (chroma.js:204:1)
at Theme._findContrastColors (theme.js:218:1)
at Theme.set lightness [as lightness] (theme.js:67:1)
at paramSetup (params.js:99:5)
at Object.parcelRequire.m3VC.@spectrum-css/vars/dist/spectrum-global.css (theme.js:219:1)
at newRequire (index.js:1:404)
at index.js:1:637
at index.js:1:1413
chroma.js:804 Uncaught (in promise) Error: unknown hex color: undefined
at hex2rgb$1 (chroma.js:804:1)
at new Color (chroma.js:183:1)
at chroma$k (chroma.js:204:1)
at Theme._findContrastColors (theme.js:218:1)
at Theme.set output [as output] (theme.js:170:1)
at createOutputParameters.js:37:5
colorWheel.js:246 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getContext')
at createColorWheel (colorWheel.js:246:19)
at colorWheel.js:352:5
```
## Steps to reproduce
1. Go to https://leonardocolor.io/theme.html
2. Open "Theme Settings" dialog and change lightness slider to 0%
3. Open "Share" dialog and copy theme url
4. Paste theme url in a new tab
## Environment
All browsers on Macos 12.3.1
Contributor guide
Research direction
Reproduce the issue from theme.html by setting lightness to 0%, sharing the theme URL, and opening it in a new tab. Read the lightness and output handling in theme.js, then trace parameter setup in params.js and color-wheel initialization in colorWheel.js; done means the shared URL loads without the reported JavaScript errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100