Skocz do zawartości
Pecetowicz Forum komputerowe

Jak zrobić tryb nocny / jasny, przełącznik motywu. Dark Mode Toggle


Przejdź do rozwiązania Rozwiązane przez aXenDev,

Rekomendowane odpowiedzi

Dzień dobry. Wymyśliłem sobie aby zrobić na stronie możliwość przełączania kolorystyki na ciemną lub jasną. Zrobiłem pod to przycisk z przepiękną animacją, ale trochę się wylało 😅 Zamysł tego przycisku jest taki że jeżeli zostanie kliknięty i kolorystyka zmieni się na ciemną to z góry przycisku wjeżdża księżyc, a jeśli jasna to słońce. Teoretycznie i praktycznie się to zmienia tzn. ikonki się zmieniają, ale podczas animacji znajdują się poza obszarem przycisku i to widać:

obraz.png

Czy znalazłaby się jakaś dobra duszyczka, która pomogła by rozwiązać ten problem? Z góry dziękuję 😄

Link do codepena: https://codepen.io/ravenekse/pen/PopWGea

Odnośnik do odpowiedzi
Udostępnij na innych stronach
10 minut temu, aXenDev napisał:

W twoim przypadku to do klasy:


.change-theme-btn

 

Niestety nie działa :C

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator
Napisano (edytowane)

@ravenekse Proszę: https://codepen.io/Mativve/pen/eYvggrP

Do stylu przycisku dodałem position: relative; bo on chyba jest powiązany z overflow (bez position overflow nie zadziała *tego nie jestem pewien*).

Dodałem również styl pod UX czyli cursor: pointer;

Pamiętaj, że jeśli coś ma być klikalne i ma być przyciskiem to powinno to być oparte o tag <button> 😉

Edytowane przez Mativve
  • Lubię to! 1
  • Super 1
Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert
  • Rozwiązanie

Masz to:

.change-theme-icon::before,
.change-theme-icon::after {
  position: absolute;
  transition: transform 335ms linear;
}

ale nie masz pozycji relatywnej dla rodzica, co powoduje że pozycja relatywna jest dla całego okna przeglądarki i powoduje że elementy będą się chować po za oknem przeglądarki.

Musisz dodać jeszcze pozycje relatywną:

.change-theme-btn {
    position: relative;
}

 

  • Lubię to! 3
  • Super 1
Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...