Fix bug where the theme would flash on page changes

Sat Apr 12 2025

Tucker McKnight

Changes where the prism theme gets set, too.

Also change the font size of code to make it a little smaller.

a892f05f95aa74d7bb95abcb01c11865d6d3204a

darcs pull https://repos.tuckerm.us/repos/eleventy-darcs/branches/main -h a892f05f95aa74d7bb95abcb01c11865d6d3204a

_includes/main.njk:3

Before

    <link rel="stylesheet" id="prism-theme" type="text/css" href="/prism.css" />

After

_includes/main.njk:23

Before

        const link = document.getElementById("prism-theme")
        const stylesheet = currentTheme === 'dark' ? "/prism_dark.css" : "/prism.css"
        link.href = stylesheet

After

_includes/main.njk:27

Before

        setMode(e.checked
        ? 'dark' : 'light')

After

        const isDark = e.checked
        setMode(isDark ? 'dark' : 'light')
        setPrismTheme(isDark, linkElem)

_includes/main.njk:33

Before

After

      }
      const setPrismTheme = (isDark, linkElement) => {

_includes/main.njk:36

Before

        const stylesheet = isDark ? "/prism_dark.css" : "/prism.css"

After

        const stylesheet = currentTheme === 'dark' ? "/prism_dark.css" : "/prism.css"

_includes/main.njk:40

Before

After

    <link rel="stylesheet" id="prism-theme" type="text/css" href="/prism.css" />

_includes/main.njk:94

Before

After

      const linkElem = document.getElementById('prism-theme')

_includes/main.njk:96

Before

After

      setPrismTheme(currentTheme === 'dark', linkElem)

main.css:1

Before

After

code {
  font-size: 14px !important;
}

prism_dark.css:1

Before

After

/* PrismJS 1.30.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}