https://bradleycarey.com/tags/sass/ Recent content in SASS on bradleycarey.com Hugo en Sat, 02 Sep 2023 22:22:18 -0400 https://bradleycarey.com/posts/hugo-theme-aware-syntax-highlighting/ Wed, 23 Aug 2023 17:59:17 +0000 https://bradleycarey.com/posts/hugo-theme-aware-syntax-highlighting/ <p><a href="https://gohugo.io/" class="external-link" target="_blank" rel="noopener">Hugo static site generator</a> has built in <a href="https://gohugo.io/content-management/syntax-highlighting/" class="external-link" target="_blank" rel="noopener">syntax highlighting</a> for code blocks that uses <a href="https://github.com/alecthomas/chroma" class="external-link" target="_blank" rel="noopener">Chroma</a> udner the hood. The newer CLI, known as <a href="https://gohugo.io/installation/windows/#editions" class="external-link" target="_blank" rel="noopener">hugo-extended</a>, finally supports SASS transpilation.</p> <p>Using the power of SASS <a href="https://sass-lang.com/documentation/at-rules/import/" class="external-link" target="_blank" rel="noopener">@import</a> statements + <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" class="external-link" target="_blank" rel="noopener">prefers-color-scheme</a> <code>media</code> queries or CSS <code>class</code> name toggles, we can apply separate themes for light vs dark modes. <strong>Tailwind CSS</strong> refers to these strategies as <a href="https://tailwindcss.com/docs/dark-mode#basic-usage" class="external-link" target="_blank" rel="noopener">media</a> vs <a href="https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually" class="external-link" target="_blank" rel="noopener">class</a>.</p> <p>I am using <a href="https://xyproto.github.io/splash/docs/solarized-dark256.html" class="external-link" target="_blank" rel="noopener">solarized-dark256</a> for dark mode and <a href="https://xyproto.github.io/splash/docs/solarized-light.html" class="external-link" target="_blank" rel="noopener">solarized-light</a> for light mode.</p> <ol> <li> <p>Install hugo-extended: <code>choco install hugo-extended</code> or <code>winget install Hugo.Hugo.Extended</code></p>