LightSwitch component. It provides a color theme switch button.</p><ul class="GitBadges"><li><a href="https://www.npmjs.com/package/@magic-modules/light-switch" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/@magic-modules/light-switch?color=blue" height="23" role="presentation" alt="" loading="lazy"/></a></li><li><img src="https://img.shields.io/node/v/@magic-modules/light-switch?color=blue" height="23" role="presentation" alt="" loading="lazy"/></li><li><img src="https://img.shields.io/npm/l/@magic-modules/light-switch?color=blue" height="23" role="presentation" alt="" loading="lazy"/></li><li><a href="https://travis-ci.com/magic-modules/light-switch" target="_blank" rel="noopener"><img src="https://img.shields.io/travis/com/magic-modules/light-switch/master" height="23" role="presentation" alt="" loading="lazy"/></a></li><li><a href="https://ci.appveyor.com/project/magicmodules/light-switch/branch/master" target="_blank" rel="noopener"><img src="https://img.shields.io/appveyor/ci/magicmodules/light-switch/master.svg" height="23" role="presentation" alt="" loading="lazy"/></a></li><li><a href="https://coveralls.io/github/magic-modules/light-switch" target="_blank" rel="noopener"><img src="https://img.shields.io/coveralls/github/magic-modules/light-switch/master.svg" height="23" role="presentation" alt="" loading="lazy"/></a></li><li><a href="https://snyk.io/test/github/magic-modules/light-switch" target="_blank" rel="noopener"><img src="https://img.shields.io/snyk/vulnerabilities/github/magic-modules/light-switch.svg" height="23" role="presentation" alt="" loading="lazy"/></a></li></ul><h2 id="installation">installation</h2><div class="Pre"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="keyword">npm</span> <span class="keyword">install</span> @magic-modules/light-switch</code></pre></div><h2 id="usage">usage</h2><p>hoist in src/config.mjs</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="comment">// /src/config.mjs</span></code><code class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</code><code class="line"> HOIST: [<span class="string">'LanguageSwitch'</span>],</code><code class="line">}</code></pre></div><p>thats it, your magic app will now know to display the LightSwitch button.</p><h2 id="positioning">positioning</h2><p>to further customize the position or other css, just use the .LightSwitch class in your theme css.</p><div class="Pre lines"><div class="menu"><button>copy</button></div><pre><code class="line"><span class="comment">// /assets/theme/yourtheme/index.mjs</span></code><code class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</code><code class="line"> <span class="comment">// ...other styles</span></code><code class="line"></code><code class="line"> <span class="comment">// top right</span></code><code class="line"> <span class="string">'.LightSwitch'</span>: {</code><code class="line"> left: <span class="string">'auto'</span>,</code><code class="line"> position: <span class="string">'fixed'</span>,</code><code class="line"> right: <span class="string">'0.5em'</span>,</code><code class="line"> top: <span class="string">'0.5em'</span>,</code><code class="line"> },</code><code class="line"></code><code class="line"> <span class="comment">// bottom right</span></code><code class="line"> <span class="string">'.LightSwitch'</span>: {</code><code class="line"> bottom: <span class="string">'0.5em'</span>,</code><code class="line"> left: <span class="string">'auto'</span>,</code><code class="line"> position: <span class="string">'fixed'</span>,</code><code class="line"> right: <span class="string">'0.5em'</span>,</code><code class="line"> top: <span class="string">'auto'</span>,</code><code class="line"> },</code><code class="line"></code><code class="line"> <span class="comment">// top left</span></code><code class="line"> <span class="string">'.LightSwitch'</span>: {</code><code class="line"> left: <span class="string">'0.5em'</span>,</code><code class="line"> position: <span class="string">'fixed'</span>,</code><code class="line"> top: <span class="string">'0.5em'</span>,</code><code class="line"> },</code><code class="line"></code><code class="line"> <span class="comment">// bottom left</span></code><code class="line"> <span class="string">'.LightSwitch'</span>: {</code><code class="line"> bottom: <span class="string">'0.5em'</span>,</code><code class="line"> left: <span class="string">'0.5em'</span>,</code><code class="line"> position: <span class="string">'fixed'</span>,</code><code class="line"> top: <span class="string">'auto'</span>,</code><code class="line"> },</code><code class="line">}</code></pre></div><h2 id="source">source</h2><p>the source for this page is in the
0 commit comments