themeMode with custom theme

Hi!

I’m trying to use a different color for the arrow icon when the themeMode is set. When the themeMode is set to dark, I want to have a white icon; when it is set to light, I want to have black icon.

Here is the code I have but it doesn’t seem to be working correctly; the background changes nicely between white and black but the arrow icon always remains white.

Any help is appreciated since I’m struggling a bit to understand how this works.

Bram

Here is the piece of code I’m using:

//This is the theme where I make a distinction between dark and light in the control. 
const theme = deepMerge(grommet, 
  {
    global: { 
      colors: {
        brand: '#26547C',
        focus: 'transparent', // added focus color,
        control: {
          dark: "#ffffff",
          light: "#000000"
        }
      }
    },
    formField: {
      label: {
        size: 'small'
      }
    }
  });

//Here is where I embed the menu inside of a Grommet component
   <Grommet full={true} theme={theme} themeMode="dark">
      <Menu label={title.pageTitle || 'Page Title Placeholder'} items={[{ label: 'logout' }]} />
    </Grommet>

[brampurnot]

Thanks all for this amazing framework!

[brampurnot]

Woow awesome information and thank you for the quick reply. Now it makes more sense.

Bram