<pre><code class="language-typescript"><span class="hl-3">export</span><span class="hl-1"> </span><span class="hl-6">function</span><span class="hl-1"> </span><span class="hl-0">ColorSwitch</span><span class="hl-1">({ </span><span class="hl-4">targetId</span><span class="hl-1">, </span><span class="hl-4">skipSystem</span><span class="hl-1">, </span><span class="hl-4">size</span><span class="hl-1">, ...</span><span class="hl-4">props</span><span class="hl-1"> }: </span><span class="hl-8">ColorSwitchProps</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-6">const</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-13">setColorSchemePreference</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">resolvedColorScheme</span><span class="hl-1">: </span><span class="hl-13">rcs</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">colorSchemePreference</span><span class="hl-1">: </span><span class="hl-13">csp</span><span class="hl-1">,</span><br/><span class="hl-1"> } = </span><span class="hl-0">useTheme</span><span class="hl-1">(</span><span class="hl-4">targetId</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-6">const</span><span class="hl-1"> </span><span class="hl-0">toggleColorScheme</span><span class="hl-1"> = () </span><span class="hl-6">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-3">switch</span><span class="hl-1"> (</span><span class="hl-4">csp</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-3">case</span><span class="hl-1"> </span><span class="hl-2">"dark"</span><span class="hl-1">:</span><br/><span class="hl-1"> </span><span class="hl-0">setColorSchemePreference</span><span class="hl-1">(</span><span class="hl-2">"light"</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-3">break</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">case</span><span class="hl-1"> </span><span class="hl-2">"light"</span><span class="hl-1">:</span><br/><span class="hl-1"> </span><span class="hl-0">setColorSchemePreference</span><span class="hl-1">(</span><span class="hl-4">skipSystem</span><span class="hl-1"> ? </span><span class="hl-2">"dark"</span><span class="hl-1"> : </span><span class="hl-2">"system"</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-3">break</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">case</span><span class="hl-1"> </span><span class="hl-2">"system"</span><span class="hl-1">:</span><br/><span class="hl-1"> </span><span class="hl-3">default</span><span class="hl-1">:</span><br/><span class="hl-1"> </span><span class="hl-0">setColorSchemePreference</span><span class="hl-1">(</span><span class="hl-2">"dark"</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-3">break</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> };</span><br/><span class="hl-1"> </span><span class="hl-3">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> <</span><span class="hl-4">button</span><br/><span class="hl-1"> </span><span class="hl-4">className</span><span class="hl-1">={</span><span class="hl-4">[</span><span class="hl-2">"nthul--color-switch"</span><span class="hl-4">, rcs, csp </span><span class="hl-1">===</span><span class="hl-4"> </span><span class="hl-2">"system"</span><span class="hl-4"> </span><span class="hl-1">?</span><span class="hl-4"> </span><span class="hl-2">"system"</span><span class="hl-4"> </span><span class="hl-1">:</span><span class="hl-4"> </span><span class="hl-2">""</span><span class="hl-4">].join(" ")}</span><br/><span class="hl-4"> data-testid="color-switch"</span><br/><span class="hl-4"> {...props}</span><br/><span class="hl-4"> onClick={toggleColorScheme}</span><br/><span class="hl-4"> </span><span class="hl-5">// @ts-expect-error -- setting custom attribute</span><br/><span class="hl-4"> style={{ "--size":</span><span class="hl-1"> </span><span class="hl-2">`</span><span class="hl-6">${</span><span class="hl-4">size</span><span class="hl-6">}</span><span class="hl-2">px`</span><span class="hl-1"> }}</span><br/><span class="hl-1"> </span><span class="hl-4">type</span><span class="hl-1">=</span><span class="hl-2">"button"</span><br/><span class="hl-1"> /></span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span>
0 commit comments