<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>lightmode &amp;mdash; Marcin &#34;czach&#34; Trzaska</title>
    <link>https://blog.argilus.online/czach/tag:lightmode</link>
    <description>Piszę, co mi przyjdzie do głowy. Na tematy różne.</description>
    <pubDate>Thu, 16 Apr 2026 16:24:25 +0200</pubDate>
    <item>
      <title>Dark/Light mode na blogu</title>
      <link>https://blog.argilus.online/czach/dark-light-mode-na-blogu</link>
      <description>&lt;![CDATA[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.&#xA;&#xA;screenshot rozmowy na temat czytelności bloga&#xA;&#xA;No i zasiał ziarno (O! Właśnie! Ogródek w Astrobotany trzeba podlać) gemini://astrobotany.mozz.us/public/3f6068c9a40347c7a959f5cb05434466/m1&#xA;&#xA;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.&#xA;&#xA;No i zaczęło się szukanie. Na szczęście mam swoje SearNGX, więc śmieci zostały odrzucone i zostało samo gęste. ;-)&#xA;&#xA;Znazłem!&#xA;&#xA;unit-4-theme-switcher&#xA;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&#xA;&#xA;Przerobiłem trochę pliki tmpl we WriteFreely, zmieniłem custom CSS dodając opcję light-mode i… Chyba działa. :-)&#xA;&#xA;&#34;Dark i Light mode we WriteFreely&#34;&#xA;&#xA;Co zmieniłem&#xA;&#xA;writefreely/templates/include/post-render.tmpl&#xA;dodałem &#xA;  div class=&#34;theme-toggle&#34; style=&#34;text-align:right&#34;&#xA;    button id=&#34;light-btn&#34;🔆/button&#xA;    button id=&#34;dark-btn&#34;☀/button&#xA;  /div&#xA;script src=&#34;/js/themeswitcher.js&#34; type=&#34;text/javascript&#34;/script&#xA;writefreely/static/js/ &#xA;wrzuciłem skrypt themeswitcher.js ze strony jw.&#xA;&#xA;zmieniłem custom CSS dodając dodatkowo .light-mode gdzie to należało dodać, na przykład:&#xA;&#xA;body.light-mode {&#xA;/ idea:&#xA;https://github.com/gobikaarumugam/unit-4-theme-switcher&#xA;/&#xA;  background-color: #f0f0f0;&#xA;  color: #000;&#xA;}&#xA;i to samo w innych selektorach.&#xA;&#xA;#writefreely #darkmode #lightmode #switcher&#xA;&#xA;-- &#xD;&#xA;Marcin &#34;czach&#34; Trzaska&#xD;&#xA;reply-to: @czach@mastodon.argilus.online]]&gt;</description>
      <content:encoded><![CDATA[<p>Wczoraj, w uprzejmy i elegancki sposób, <strong>Kuba</strong> zwrócił mi uwagę, że nie każdy lubi <em>dark mode</em> przy czytaniu, na przykład tego blogu.</p>

<p><img src="https://blgpht.argilus.online/api/files/21/original/Screenshot%202026-04-15%20at%2008.25.48.png" alt="screenshot rozmowy na temat czytelności bloga"></p>

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

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

<p>No i zaczęło się szukanie. Na szczęście mam swoje <a href="https://github.com/searxng/searxng" title="SearNGX - link do GitHuba" rel="nofollow">SearNGX</a>, więc śmieci zostały odrzucone i zostało samo gęste. ;–)</p>

<h2 id="znazłem">Znazłem!</h2>

<p><a href="https://github.com/gobikaarumugam/unit-4-theme-switcher" title="unit-4-theme-switcher" rel="nofollow">unit-4-theme-switcher</a></p>

<pre><code>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
</code></pre>

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

<p><img src="https://blgpht.argilus.online/api/files/22/original/Screenshot%202026-04-15%20at%2008.54.39.png" alt="&#34;Dark i Light mode we WriteFreely&#34;" title="Dark/Light mode in WF"></p>

<h2 id="co-zmieniłem">Co zmieniłem</h2>

<p><code>writefreely/templates/include/post-render.tmpl</code>
dodałem</p>

<pre><code class="language-go">  &lt;div class=&#34;theme-toggle&#34; style=&#34;text-align:right&#34;&gt;
    &lt;button id=&#34;light-btn&#34;&gt;🔆&lt;/button&gt;
    &lt;button id=&#34;dark-btn&#34;&gt;☀&lt;/button&gt;
  &lt;/div&gt;
&lt;script src=&#34;/js/theme_switcher.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt;
</code></pre>

<p><code>writefreely/static/js/</code>
wrzuciłem skrypt <code>theme_switcher.js</code> ze strony jw.</p>

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

<pre><code class="language-go">body.light-mode {
/* idea:
https://github.com/gobikaarumugam/unit-4-theme-switcher
*/
  background-color: #f0f0f0;
  color: #000;
}
</code></pre>

<p>i to samo w innych <em>selektorach</em>.</p>

<p><a href="/czach/tag:writefreely" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">writefreely</span></a> <a href="/czach/tag:darkmode" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">darkmode</span></a> <a href="/czach/tag:lightmode" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">lightmode</span></a> <a href="/czach/tag:switcher" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">switcher</span></a></p>

<p>—
Marcin “czach” Trzaska
reply-to: <a href="https://blog.argilus.online/@/czach@mastodon.argilus.online" class="u-url mention" rel="nofollow">@<span>czach@mastodon.argilus.online</span></a></p>
]]></content:encoded>
      <guid>https://blog.argilus.online/czach/dark-light-mode-na-blogu</guid>
      <pubDate>Wed, 15 Apr 2026 06:43:28 +0000</pubDate>
    </item>
  </channel>
</rss>