Ok.. Tem um pouco de CSS envolvido?, mas foi muito mais fácil do que as respostas que encontrei na internet.

O que estou tentando alcançar?
Estou tentando conseguir duas coisas com este método.

1. Preciso permitir que o site carregue da maneira que o usuário preferir (a parte em que ele já escolheu o tema no sistema operacional)
2. Mas também quero permitir que eles alternem entre o modo claro e escuro após o carregamento.

Portanto, teremos um site que carregará o tema esperado pelo usuário e permitirá que ele o altere quando quiser.

Etapa 1: Criar botão para alternar

Estou usando uma imagem como botão que tem uma imagem SVG de uma lua. Você pode adicionar seu botão ou caixa de seleção que lhe pareça adequado para alternar entre duas opções.

Etapa 2: coloque os detalhes de suas cores em CSS como propriedades 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;
}

Ok.. Então, na raiz, você está vendo uma propriedade chamada esquema de cores e isso será nossa virada de jogo.
Como você pode ver, são necessários valores claros ou escuros. Também criei duas classes, .light e .dark, que definem o valor do esquema de cores como escuro ou claro.

Etapa 3: adicione cores a várias partes do seu código

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

Agora, sempre que uma propriedade solicitar uma cor (como plano de fundo, propriedades de cor), você pode usar a função chamada claro-escuro().
Esta função assume dois valores, o primeiro é usado quando o esquema de cores está definido como claro e o segundo é usado quando o esquema de cores está definido como escuro.

Sim... Esta é uma função lançada em maio de 2024. É relativamente nova, mas será adaptada em breve. E está no suporte básico no momento da redação deste artigo. Aqui estão os documentos para isso

light-dark() - CSS: folhas de estilo em cascata | MDN

A função CSS light-dark() permite definir duas cores para uma propriedade - retornando uma das duas opções de cores detectando se o desenvolvedor definiu um esquema de cores claras ou escuras ou se o usuário solicitou um tema de cores claras ou escuras - sem a necessidade de incluir as cores do tema em uma consulta de recurso de mídia com esquema de cores preferenciais. Os usuários podem indicar sua preferência de esquema de cores por meio das configurações do sistema operacional (por exemplo, modo claro ou escuro) ou das configurações do agente do usuário. A função light-dark() permite fornecer dois valores de cores onde qualquer valor é aceito. A função de cor CSS light-dark() retorna o primeiro valor se a preferência do usuário estiver definida como clara ou se nenhuma preferência for definida e o segundo valor se a preferência do usuário estiver definida como escura.

desenvolvedor.mozilla.org

Se você usar isso, o CSS detectará automaticamente a preferência do usuário no sistema operacional e definirá a cor desejada.
Atingimos nosso primeiro objetivo, o site carregará com o modo de cores já desejado pelo usuário em seu sistema operacional.

Etapa 4: use Javascript para alternar entre o modo claro e escuro

// 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";
    }
});

Aqui, document.documentElement.style.colorScheme na verdade se refere ao elemento :root do CSS.
Como já conseguimos abrir o site no modo preferido do usuário na etapa anterior, aqui quando o botão de alternância é clicado ele executa os seguintes trabalhos.

1. Verifica se o esquema de cores tem algum valor, caso contrário, o site está no modo preferido do usuário, precisamos identificar se é escuro ou claro para mudar de modo.
2. Ele usa window.matchMedia("(prefers-color-scheme:dark)").correspondências para descobrir se está no modo escuro, se estiver no modo escuro, mudamos o esquema de cores para claro, se não estiver , mudamos para escuro.
3. Na próxima vez que eles clicarem no botão, já definimos o valor para nosso esquema de cores, então apenas alternamos entre escuro ou claro.

*PS: * Este é meu primeiro post e ainda sou iniciante em desenvolvimento web. Mas quando procurei por esse método, não vi nenhuma postagem relacionada a ele. Se você já sabe disso, sinto muito por clicar em atrair você? Achei que este post me ajudaria a lembrar desse processo toda vez que estiver trabalhando em um novo projeto.
Se você está trabalhando para que seu site funcione em navegadores antigos, esse método definitivamente não é para você. Conte-me nos comentários sobre este post. Obrigado pela leitura.