Cannot use non-hex values in theme.global.colors.background

[Tbhesswebber]

Expected Behavior

I should be able to use CSS custom properties as values in theme.global.colors.background, without dark-mode being broken.

Actual Behavior

Setting theme.global.colors.background to anything besides a HEX value causes colorIsDark to return undefined, which then causes backgroundIsDark to return undefined. If you explicitly pass "dark" to the themeMode prop of the Grommet component, theme.dark is undefined.

URL, screen shot, or Codepen exhibiting the issue

N/A

Steps to Reproduce

1. Set theme.global.colors.background to var(--colors-black, blue)
2. Pass "dark" to the themeMode prop of the Grommet component
3. Open React dev-tools and find the first ContextProvider below the Grommet component, expanding the theme value and scrolling down to the dark property. It should be undefined

Your Environment

• Grommet version: 2.35.0
• Browser Name and version: Chrome 122.0.6261.69
• Operating System and version (desktop or mobile): Ubuntu 23 (desktop)