Está bien... ¿Hay un poco de CSS involucrado?, pero fue mucho más fácil que las respuestas que encontré en Internet.

¿Qué estoy intentando lograr?
Estoy tratando de lograr dos cosas con este método.

1. Necesito permitir que el sitio web se cargue de la manera que el usuario prefiere (la parte donde ya eligieron su tema en el sistema operativo)
2. Pero también quiero permitirles alternar entre el modo oscuro y claro después de la carga.

Así que tendremos un sitio web que se cargará con el tema esperado por el usuario y luego les permitirá cambiarlo cuando lo deseen.

Paso 1: Crear botón para alternar

Estoy usando una imagen como botón que tiene una imagen svg de una luna. Puede agregar el botón o casilla de verificación que le parezca adecuado para alternar entre dos opciones.

Paso 2: coloca los detalles de tu color en CSS como propiedades personalizadas

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

Está bien... Entonces, en la raíz estás viendo una propiedad llamada combinación de colores y este será nuestro punto de inflexión.
Como puedes ver, toma valores claros u oscuros. También he creado dos clases, .light y .dark, que establecen el valor del esquema de color en oscuro o claro.

Paso 3: Añade colores a varias partes de tu código

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

Ahora, cada vez que una propiedad solicita un color (como fondo, propiedades de color), puedes usar la función llamada claro-oscuro().
Esta función toma dos valores, el primero se usa cuando el esquema de color está configurado en claro y el segundo se usa cuando el esquema de color está configurado en oscuro.

Sí... Esta es una función que se lanzará en mayo de 2024. Es bastante nueva, pero se adaptará pronto. Y se encuentra en soporte básico al momento de escribir este artículo. Aquí están los documentos correspondientes

claro-oscuro() - CSS: Hojas de estilo en cascada | MDN

La función CSS light-dark() permite establecer dos colores para una propiedad, devolviendo una de las dos opciones de colores al detectar si el desarrollador ha establecido un esquema de color claro u oscuro o si el usuario ha solicitado un tema de color claro u oscuro. sin necesidad de encerrar los colores del tema dentro de una consulta de función de medios de esquema de color preferido. Los usuarios pueden indicar su preferencia de combinación de colores a través de la configuración de su sistema operativo (por ejemplo, modo claro u oscuro) o la configuración de su agente de usuario. La función claro-oscuro() permite proporcionar dos valores de color donde se acepta cualquier valor . La función de color CSS claro-oscuro() devuelve el primer valor si la preferencia del usuario está configurada en clara o si no se establece ninguna preferencia y el segundo valor si la preferencia del usuario está configurada en oscura.

desarrollador.mozilla.org

Si usa esto, el CSS detectará automáticamente la preferencia del usuario del sistema operativo y la establecerá en el color que desee.
Logramos nuestro primer objetivo: el sitio web se cargará con el modo de color que el usuario ya desea en su sistema operativo.

Paso 4: Usa Javascript para alternar entre el modo oscuro y claro

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

Aquí, document.documentElement.style.colorScheme en realidad se refiere al elemento :root de CSS.
Como ya logramos abrir el sitio web en el modo preferido del usuario en el paso anterior, aquí, cuando se hace clic en el botón de alternancia, se realizan las siguientes tareas.

1. Comprueba si el esquema de color tiene algún valor; de lo contrario, el sitio web está en el modo preferido del usuario, necesitamos identificar si está oscuro o claro para cambiar de modo.
2. Utiliza window.matchMedia("(prefers-color-scheme:dark)").matches para encontrar si está en modo oscuro, si está en modo oscuro, cambiamos el esquema de color a claro, si no , lo cambiamos a oscuro.
3. La próxima vez que hagan clic en el botón, ya hemos establecido el valor para nuestra combinación de colores, por lo que simplemente alternamos entre oscuro o claro.

*PD: * Esta es mi primera publicación y todavía soy un principiante en el desarrollo web. Pero cuando busqué este método, no vi ninguna publicación relacionada al respecto. Si ya sabes esto, lamento haberte molestado con los clics. Pensé que esta publicación me ayudará a recordar este proceso cada vez que trabaje en un nuevo proyecto.
Si está trabajando para que su sitio web funcione en navegadores antiguos, este método definitivamente no es para usted. Cuéntamelo en los comentarios sobre este post. Gracias por leer.