JSFiddle - React, Tailwind, and code Playground

HTML

<p>祇園精舎の鐘の声</p>

CSS

@charset "utf-8";
:root {
	  --main-color:#222222;
    --bg-color:#f5f5f5;
}

@media (prefers-color-scheme: light) {
  :root {
	  --main-color:#222222;/*ここで--main-colorという名称で変数を作って*/
    --bg-color:#f5f5f5;
  }
body{background:var(--bg-color);} 
p{color:var(--main-color);}/*var(変数名)で呼び出す*/
}

@media (prefers-color-scheme: dark) {/*こちらも同様に*/
  :root {
	  --main-color:#f5f5f5;
    --bg-color:#222222;
  }
body{background:var(--bg-color);}  
p{color:var(--main-color);}
}