690: How To Dark Mode and Beyond

<p class="has-line-data" data-line-start="0" data-line-end="1">In this episode of Syntax, Wes and Scott talk about the process they are using for extending the Syntax website with themes, including a dark mode and secret custom themes. They also talk about issues encountered with theming and CSS, including flashes of un-themed content.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:00">00:00</a></strong> Syntax + Sentry Announcement!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:35">01:35</a></strong> Welcome</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:23">02:23</a></strong> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:16">03:16</a></strong> How to implement a theme</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=10:27">10:27</a></strong> Writing the CSS</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=11:38">11:38</a></strong> Glasses wearers protip</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=13:02">13:02</a></strong> Class on the body and server side rendering issue</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=14:02">14:02</a></strong> CSS Variables</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=15:05">15:05</a></strong> Color variables in CSS</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=21:07">21:07</a></strong> Working in half pixel sizes</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=22:40">22:40</a></strong> Variable usage</li> <li class="has-line-data" data-line-start="15" d