Tryb jasny oraz ciemny strony.

pytanie zadane 11 sierpnia 2020 w HTML i CSS przez PrOs Nowicjusz (150 p.)
zmienione kategorie 11 sierpnia 2020 przez Arkadiusz Waluk

Witam, jak można zrobić przycisk który będzie zmieniał styl strony? np styl1.css i styl2.css chcę uzyskać efekt jasnej i ciemnej wersji strony.

4 odpowiedzi

odpowiedź 11 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)
edycja 14 sierpnia 2020 przez ScriptyChris

Można pokombinować z alternatywnymi CSS-ami lub warunkowo (JS-em) blokować/odblokowywać określone arkusze stylów.

1	komentarz 14 sierpnia 2020 przez Patrycjerz Mędrzec (192,320 p.) Arkusze stylów, nie "styli"

1	komentarz 14 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.) Pardon, edytowałem.

odpowiedź 11 sierpnia 2020 przez wnuczek Nowicjusz (220 p.)
edycja 12 sierpnia 2020 przez wnuczek

A nie lepiej zostawić wszystkie style w jednym pliku i zrobić button, który doda do body odpowiednią klasę (.dark)?

<button onclick="toggleDarkMode()">Switch modes</button>

function toggleDarkMode() {
  document.body.classList.toggle("dark");
}

Dodatkowo przeglądarka może wykryć jaki tryb interfejsu ma ustawiony użytkownik i z automatu ustawić ten właściwy z wykorzystaniem samego CSS.

// domyślny styl

@media (prefers-color-scheme: dark) {
  // modyfikacje stylu trybu ciemnego
}

@media (prefers-color-scheme: light) {
  // modyfikacje stylu trybu jasnego
}

komentarz 11 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Ciekawa propozycja z użyciem prefers-colors-scheme. Nie zgodzę się z pomysłem żeby umieścić wszystkie style w jednym pliku CSS, bo jeśli użytkownik nigdy nie skorzysta z ciemnego motywu lub (z tego co jest napisane w specyfikacji - opcji w przyszłości może przybyć) po prostu innego motywu, to kod CSS dla niego nie będzie nigdy użyty, co sprawia że będzie na marne przesyłany do przeglądarki.

komentarz 11 sierpnia 2020 przez wnuczek Nowicjusz (220 p.)

Zasadniczo zgodzę się co do unikania ładowania niepotrzebnych zależności jednak wszystko zależy od danego przypadku. Jeśli mówimy o prostym rozróżnieniu kolorów tła i fontów to dodatkowe kilkanaście linii kodu nas nie zbawi, a zyskujemy proste, czytelne i w pełni kompatybilne rozwiązanie.

1	komentarz 12 sierpnia 2020 przez radek024 Szeryf (77,160 p.) A jeżeli użyje się CSS Variables to będzie to naprawdę wygodny temat. Dobre rozwiązanie :D

odpowiedź 12 sierpnia 2020 przez VBService Ekspert (256,320 p.)
edycja 14 sierpnia 2020 przez VBService

Przykład z php z użyciem dwóch plików css (light.css, dark.css):

<?php
  $css_file_name = (! isset($_GET['color-scheme'])) ? 'light':$_GET['color-scheme'];
  $css_scheme_name = ($css_file_name == 'light') ? 'dark':'light';
  $css_pl_scheme_name = ($css_scheme_name == 'light') ? 'jasny':'ciemny';
?>
<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
   
    <link rel="stylesheet" href="<?php echo $css_file_name; ?>.css">
  </head>
  <body>
    <div>Zmień na: <?php echo "<a href='index.php?color-scheme=$css_scheme_name' class='color-scheme'>$css_pl_scheme_name"; ?></a></div> 
  </body>
</html>

odpowiedź 14 sierpnia 2020 przez VBService Ekspert (256,320 p.)
edycja 14 sierpnia 2020 przez VBService

Przykład z javascript z użyciem dwóch plików css (light.css, dark.css):

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">

        <link href="light.css" type="text/css" rel="stylesheet" id="color-scheme-link">
    </head>
    <body>
        <div>Zmień na: <button id="color-scheme-button">ciemny</button></div>
    </body>
    <script>
        const l_color_scheme = document.getElementById("color-scheme-link");
        const b_color_scheme = document.getElementById("color-scheme-button");

        b_color_scheme.addEventListener('click', () => {
            b_color_scheme.innerText = (b_color_scheme.innerText == 'jasny') ? 'ciemny' : 'jasny';
            l_color_scheme.href = (b_color_scheme.innerText == 'jasny') ? 'dark.css': 'light.css';
        });
    </script>
</html>