<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>PicoCSS | Nerdpress.org</title>
	<atom:link href="https://nerdpress.org/tag/picocss/feed/" rel="self" type="application/rss+xml" />
	<link>https://nerdpress.org</link>
	<description>...dev, tech problems and solutions.</description>
	<lastBuildDate>Thu, 02 Oct 2025 10:15:26 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Astro component for DarkMode Switcher for PicoCSS</title>
		<link>https://nerdpress.org/2024/01/07/astro-component-for-darkmode-switcher-for-picocss/</link>
		
		<dc:creator><![CDATA[Ivo Bathke]]></dc:creator>
		<pubDate>Sun, 07 Jan 2024 12:54:26 +0000</pubDate>
				<category><![CDATA[Astro]]></category>
		<category><![CDATA[PicoCSS]]></category>
		<guid isPermaLink="false">https://nerdpress.org/?p=3289</guid>

					<description><![CDATA[<p>I am currently evaluating PicoCss V2 in Astro project. PicoCss is a CSS / SCSS framework I used for some of my projects because it is small and brings sufficient styling for most HTML Elements. It has integrated light and dark mode, but no theme switcher. So i was looking for one and found this &#8230; </p>
<p class="link-more"><a href="https://nerdpress.org/2024/01/07/astro-component-for-darkmode-switcher-for-picocss/" class="more-link">Continue reading<span class="screen-reader-text"> "Astro component for DarkMode Switcher for PicoCSS"</span></a></p>
The post <a href="https://nerdpress.org/2024/01/07/astro-component-for-darkmode-switcher-for-picocss/">Astro component for DarkMode Switcher for PicoCSS</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></description>
										<content:encoded><![CDATA[<p>I am currently evaluating <a href="https://v2.picocss.com/" target="_blank" rel="noopener" title="">PicoCss V2</a> in <a href="https://astro.build/" target="_blank" rel="noopener" title="">Astro</a> project. PicoCss is a CSS / SCSS framework I used for some of my projects because it is small and brings sufficient styling for most HTML Elements. It has integrated light and dark mode, but no theme switcher. <br />So i was looking for one and found this one for Pico V1: <br /><a href="https://github.com/RWDevelopment/theme_switch" target="_blank" rel="noopener" title="">https://github.com/RWDevelopment/theme_switch</a></p>



<span id="more-3289"></span>



<p>I adjusted it to Pico V2 in a Astro component, ready to use in a Astro project with Pico V2 as CSS framework. <br />Since the component is just one file i just a made a gist: <a href="https://gist.github.com/ivoba/f3e0a8d7423faf318ce2217f5af9c510">https://gist.github.com/ivoba/f3e0a8d7423faf318ce2217f5af9c510</a></p>



<p>Here is how to use it, f.e. in your navigation:</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">---
<span class="hljs-keyword">import</span> ThemeSwitcher <span class="hljs-keyword">from</span> <span class="hljs-string">"./ThemeSwitcher.astro"</span>;
---

...
  
&lt;li&gt;
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ThemeSwitcher</span> /&gt;</span></span>
&lt;<span class="hljs-regexp">/li&gt;</span></code></span></pre>


<p><strong>Update:</strong><br />I added a persistence layer for localStorage to the Gist.<br />So the selected theme is remembered between pages.</p>The post <a href="https://nerdpress.org/2024/01/07/astro-component-for-darkmode-switcher-for-picocss/">Astro component for DarkMode Switcher for PicoCSS</a> first appeared on <a href="https://nerdpress.org">Nerdpress.org</a>.]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
