Cómo hacer funcionales los colores de manera más universal con CSS

Amigos, estoy mejorando mi blog pero como sabemos, aparecen comportamientos inesperados. Pueden ver, mi website abierta al tiempo en Chrome y en Chrome Developer, en Developer se ve bien en modo oscuro pero en Chrome se ve del asco, y me parece que se ve mal en la mayoría de navegadores.

No domino la configuración de colores universal, creo que tiene que ver con el root.

Alguien me indica como cambiar el esquema de color para que sea dinámico, permita modo oscuro a voluntad (si falta el script) y lo demás para que el esquema de colores de mi website deje de desanimar a los vivitantes. Gracias!

:root {
--white: #ffffff;
--black: #000000;
--very-light-pink: #c7c7c7;
--text-input-field: #f7f7f7;
--hospital-green: #acd9b2;
--sm: 14px;
--md: 16px;
--lg: 18px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

Sería útil si compartieras la URL de tu sitio web para que podamos ver los comportamientos inesperados que mencionas. Sin embargo, en cuanto a la configuración de colores universal, una forma de hacerlo es usando las funciones de CSS `prefers-color-scheme` y `@media`. Por ejemplo, puedes establecer dos juegos diferentes de variables CSS (uno para el modo claro y otro para el modo oscuro) y luego aplicarlos de acuerdo con la preferencia del usuario:

```
/* Variables para modo claro */
:root {
--bg-color: #ffffff;
--text-color: #000000;
}

/* Variables para modo oscuro */
@Media (prefers-color-scheme: dark) {
:root {
--bg-color: #000000;
--text-color: #ffffff;
}
}

/* Aplicar variables a elementos */
body {
background-color: var(--bg-color);
color: var(--text-color);
}
```

Este ejemplo establece dos juegos diferentes de variables CSS (una para el modo claro y otra para el modo oscuro), y usa la función `@media (prefers-color-scheme: dark)` para aplicar las variables apropiadas a los elementos correspondientes. De esta manera, el esquema de color de tu sitio web se adaptará automáticamente al modo preferido por el usuario. ¡Espero que esto te ayude!