:root {
  color-scheme: light dark; 
  --light: #FFFFFF;
  --dark: #000000;
}
body
{
  color: light-dark(var(--dark),var(--light));
  background-color: light-dark(var(--light), var(--dark));
}
.div
{
  width: 130px;
  height: 130px;
  border: 1px solid;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px;
  text-align: center;
}
.box-container
{
  display: flex;
  gap: 10px;
}
#div1 {
  color: light-dark(var(--dark),var(--light));
  background-color: light-dark(var(--light), var(--dark));
}
#div2
{
  background-color: red;
}
#div3
{
  background-color: purple;
  color: white;
}
.toggle-group {
  border: 2px solid #CCC;
  border-radius: 25px;
  inline-size: fit-content;
  padding: 3px;
}
.toggle-group label {
  border-radius: 25px;
  cursor: pointer;
  display: inline-flex;
  padding: 0.5em 1em;
  text-align: center;
  user-select: none;
}
.toggle-group label:has(input:checked) {
  background-color: #CCC;
  color: #333;
}
input.colorthemegrp {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}