• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tryb jasny oraz ciemny strony.

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+3 głosów
1,299 wizyt
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

+5 głosów
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" wink

1
komentarz 14 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)
Pardon, edytowałem.
+4 głosów
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
}

 

1
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.

1
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
+1 głos
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): wink

<?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>

 

+1 głos
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): wink

<!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>

 

Podobne pytania

0 głosów
1 odpowiedź 125 wizyt
pytanie zadane 7 stycznia w HTML i CSS przez lalanablanalala Bywalec (2,090 p.)
0 głosów
1 odpowiedź 763 wizyt
pytanie zadane 3 stycznia 2018 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)
0 głosów
2 odpowiedzi 260 wizyt
pytanie zadane 16 kwietnia 2017 w HTML i CSS przez Milesq Nałogowiec (32,020 p.)

93,188 zapytań

142,204 odpowiedzi

322,027 komentarzy

62,516 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2817p. - dia-Chann
  2. 2769p. - Łukasz Piwowar
  3. 2759p. - Łukasz Eckert
  4. 2704p. - Tomasz Bielak
  5. 2678p. - Łukasz Siedlecki
  6. 2666p. - rucin93
  7. 2627p. - CC PL
  8. 2485p. - Marcin Putra
  9. 2418p. - Michal Drewniak
  10. 2367p. - Adrian Wieprzkowicz
  11. 2317p. - Mikbac
  12. 2156p. - Anonim 3619784
  13. 2127p. - Michał Telesz
  14. 1733p. - rafalszastok
  15. 1628p. - Dominik Łempicki (kapitan)
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...