JSFiddle - React, Tailwind, and code Playground

HTML

<head>

</head>
<body>

test
<button onclick="toggletheme()">
Toggle Theme
</button>


</body>

CSS

/* les constantes */
:root{
      --color-black: #000;
      --color-black-primary: #101010;
      --color-black-secondary: #1e1e1e;
      --color-white: #fff;
      --color-white-primary: #cbcbcb;
      --color-white-secondary: #eee;
}

/* ceux qui utilise le theme dark par défaut */
@media (prefers-color-scheme: dark) {
  :root , :root.dark {
      --border: 5px solid var(--color-white-secondary);
      --body-background-color: var(--color-black-secondary);
      --body-color: var(--color-white-primary);
  }
  /* petit ajout pour gerer le toggle aussi en javascript */
  :root.light {
      --border: 5px solid var(--color-black-secondary);
      --body-background-color: var(--color-white-secondary);
      --body-color: var(--color-black-primary);
  }
  
}

/* ceux qui utilise le theme light par défaut */
@media (prefers-color-scheme: light) {
  :root,:root.light {
      --border: 5px solid var(--color-black-secondary);
      --body-background-color: var(--color-white-secondary);
      --body-color: var(--color-black-primary);
  }
  /* petit ajout pour gerer le toggle aussi en javascript */
  :root.dark {
      --border: 5px solid var(--color-white-secondary);
      --body-background-color: var(--color-black-secondary);
      --body-color: var(--color-white-primary);
  }
}

body {
    background-color: var(--body-background-color);
    color: var(--body-color);
}
button{
  border: var(--border)
}

JavaScript

function toggletheme(){
	
  if(document.querySelector(':root').classList.contains("light"))
  {
 		document.querySelector(':root').classList.add("dark"); 
    document.querySelector(':root').classList.remove("light"); 
  }
  else if(document.querySelector(':root').classList.contains("dark"))
  {
 		document.querySelector(':root').classList.add("light"); 
    document.querySelector(':root').classList.remove("dark"); 
  }else if (window.matchMedia('(prefers-color-scheme: dark)'))
  {
  	document.querySelector(':root').classList.add("dark"); 
  }
  else{
  	document.querySelector(':root').classList.add("dark"); 
  }
}