Marcin "czach" Trzaska

Wczoraj, w uprzejmy i elegancki sposób, Kuba zwrócił mi uwagę, że nie każdy lubi dark mode przy czytaniu, na przykład tego blogu.

No i zasiał ziarno (O! Właśnie! Ogródek w Astrobotany trzeba podlać) gemini://astrobotany.mozz.us/public/3f6068c9a40347c7a959f5cb05434466/m1

We WriteFreely nie ma/nie znalazłem opcji przełączania trybu. Albo masz jasny defaultowo albo zmieniasz na swój za pomocą CSS. Ja zmieniłem.

No i zaczęło się szukanie. Na szczęście mam swoje SearNGX, więc śmieci zostały odrzucone i zostało samo gęste. ;–)

Znazłem!

unit-4-theme-switcher

This project demonstrates a simple and interactive theme switcher using HTML, CSS, and JavaScript. It allows users to toggle between different themes (such as light mode and dark mode) to enhance user experience and accessibility

Przerobiłem trochę pliki tmpl we WriteFreely, zmieniłem custom CSS dodając opcję light-mode i… Chyba działa. :–)

Co zmieniłem

writefreely/templates/include/post-render.tmpl dodałem

  <div class="theme-toggle" style="text-align:right">
    <button id="light-btn">🔆</button>
    <button id="dark-btn">☀</button>
  </div>
<script src="/js/theme_switcher.js" type="text/javascript"></script>

writefreely/static/js/ wrzuciłem skrypt theme_switcher.js ze strony jw.

zmieniłem custom CSS dodając dodatkowo .light-mode gdzie to należało dodać, na przykład:

body.light-mode {
/* idea:
https://github.com/gobikaarumugam/unit-4-theme-switcher
*/
  background-color: #f0f0f0;
  color: #000;
}

i to samo w innych selektorach.

#writefreely #darkmode #lightmode #switcher

— Marcin “czach” Trzaska reply-to: @czach@mastodon.argilus.online