:root {
  --dark-main-color: #0d1117;
  --light-main-color: #fefefa;

  // defaulting to dark theme 
  --main-color: var(--dark-main-color);
}

I am defining css variables and then consuming those variables both in :root.

Can this cause problems?

I am trying to solve this problem:

makeStyles does not respond to dynamic CSS variables

It might be related.