james/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

.

Browse source
This commit is contained in:
ryfrd 2026-02-16 14:48:06 +00:00
parent 96573664a6
commit 4663084e7a
76 changed files with 11180 additions and 519 deletions
Download patch file Download diff file Expand all files Collapse all files

16
public/vanilla-javascript-theme-toggle-for-simpletons/index.html
View file

@ -64,12 +64,12 @@
</span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">stylesheet</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">)</span> <span class="o">===</span> <span class="s1">&#39;/dark.css&#39;</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c1">// update stylesheet
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">stylesheet</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">,</span> <span class="s1">&#39;/light.css&#39;</span><span class="p">);</span>
</span></span></span><span class="line"><span class="cl"> <span class="nx">stylesheet</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">,</span> <span class="s1">&#39;/light.css&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c1">// update stylesheet
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">stylesheet</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">,</span> <span class="s1">&#39;/dark.css&#39;</span><span class="p">);</span>
</span></span></span><span class="line"><span class="cl"> <span class="nx">stylesheet</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">,</span> <span class="s1">&#39;/dark.css&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
@ -82,16 +82,16 @@
</span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">stylesheet</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">)</span> <span class="o">===</span> <span class="s1">&#39;/dark.css&#39;</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c1">// update stylesheet
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">stylesheet</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">,</span> <span class="s1">&#39;/light.css&#39;</span><span class="p">);</span>
</span></span></span><span class="line"><span class="cl"> <span class="nx">stylesheet</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">,</span> <span class="s1">&#39;/light.css&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl"> <span class="c1">// store theme
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">,</span> <span class="s1">&#39;/light.css&#39;</span><span class="p">);</span>
</span></span></span><span class="line"><span class="cl"> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">,</span> <span class="s1">&#39;/light.css&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c1">// update stylesheet
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">stylesheet</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">,</span> <span class="s1">&#39;/dark.css&#39;</span><span class="p">);</span>
</span></span></span><span class="line"><span class="cl"> <span class="nx">stylesheet</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">,</span> <span class="s1">&#39;/dark.css&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl"> <span class="c1">// store theme
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">,</span> <span class="s1">&#39;/dark.css&#39;</span><span class="p">);</span>
</span></span></span><span class="line"><span class="cl"> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">,</span> <span class="s1">&#39;/dark.css&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
@ -99,11 +99,11 @@
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;load&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c1">// get stored style
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="kd">var</span> <span class="nx">storedStyle</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">);</span>
</span></span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">storedStyle</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl"> <span class="kd">var</span> <span class="nx">stylesheet</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;stylesheet&#39;</span><span class="p">);</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="c1">// set stored style if it exists
</span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="k">if</span> <span class="p">(</span><span class="nx">storedStyle</span><span class="p">)</span> <span class="p">{</span>
</span></span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">storedStyle</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">stylesheet</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">,</span> <span class="nx">storedStyle</span><span class="p">);</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>