Is there a simple way in Next 13 to create a color them toggle? my current global.css files is set up likes this

/* Light Mode */
:root {
  --primary-color: #8B6BC2;
  --on-pramary-color: #FFFFFF;
  --surface-color: #F5F8FA;
  --on-surface-color: #000000;
  --secondary-color: #EBEEF1;
  --on-secondary-color: #414552;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #EEEEEE;
  --surface-container: #DDDDDD;
  --surface-container-high: #CCCCCC;
  --surface-container-highest: #BBBBBB;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #8B6BC2;
    --on-pramary-color: #FFFFFF;
    --surface-color: #282828;
    --on-surface-color: #E8EAED;
    --secondary-color: #3F3F3F;
    --on-secondary-color: #E8EAED;
    --surface-container-lowest: #3F3F3F;
    --surface-container-low: #575757;
    --surface-container: #717171;
    --surface-container-high: #4b4a4a;
    --surface-container-highest: #242424;
  }
}

and uses the default device theme setting but I want to introduce a toggle switch that changes the color theme