use camelCase in themes config

2025-07-03 17:06:37 -04:00 · 2022-02-28 20:07:27 -05:00
parent 324a15aa6a
commit 33c02d205e
5 changed files with 64 additions and 52 deletions
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -1,11 +1,20 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import themes, { toCSS } from "../lib/config/themes";
 import * as config from "../lib/config";

 // https://nextjs.org/docs/advanced-features/custom-document
 const Document = () => {
  return (
    <Html lang={config.siteLocale?.replace("_", "-")}>
-      <Head />
+      <Head>
+        {/* convert themes object into inlined css variables */}
+        <style
+          id="theme-colors"
+          dangerouslySetInnerHTML={{
+            __html: `:root{${toCSS(themes.light)}}[data-theme="dark"]{${toCSS(themes.dark)}}`,
+          }}
+        />
+      </Head>
      <body>
        <Main />
        <NextScript />