diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index 360aeb10..ba9a0318 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -3,7 +3,7 @@ import { useTheme } from "next-themes";
import classNames from "classnames";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
-import themes, { toCSS } from "../../lib/config/themes";
+import themes from "../../lib/config/themes";
import styles from "./Layout.module.css";
@@ -18,16 +18,8 @@ const Layout = ({ container = true, stickyHeader = true, className, children, ..
return (
<>
- {/* convert themes object into inlined css variables */}
-
-
{/* dynamically set browser theme color to match the background color; default to light for SSR */}
-
+
diff --git a/lib/config/themes.ts b/lib/config/themes.ts
index 821a0cfd..32249b3b 100644
--- a/lib/config/themes.ts
+++ b/lib/config/themes.ts
@@ -1,74 +1,79 @@
+import decamelize from "decamelize";
+
// Light/dark theme-related CSS variables that are inlined in Layout.tsx and become available globally.
// TODO: Probably invert the object so that *each variable* has a light and dark key.
const themes = {
light: {
- "background-inner": "#ffffff",
- "background-outer": "#fcfcfc",
- "background-header": "rgba(252, 252, 252, 0.7)",
+ backgroundInner: "#ffffff",
+ backgroundOuter: "#fcfcfc",
+ backgroundHeader: "rgba(252, 252, 252, 0.7)",
text: "#202020",
- "medium-dark": "#515151",
+ mediumDark: "#515151",
medium: "#5e5e5e",
- "medium-light": "#757575",
+ mediumLight: "#757575",
light: "#d2d2d2",
- "kinda-light": "#e3e3e3",
- "super-light": "#f4f4f4",
- "super-duper-light": "#fbfbfb",
+ kindaLight: "#e3e3e3",
+ superLight: "#f4f4f4",
+ superDuperLight: "#fbfbfb",
link: "#0e6dc2",
- "link-underline": "rgba(14, 109, 194, 0.4)",
+ linkUnderline: "rgba(14, 109, 194, 0.4)",
success: "#44a248",
error: "#ff1b1b",
warning: "#f78200",
// Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight
- "code-text": "#313131",
- "code-background": "#fdfdfd",
- "code-comment": "#656e77",
- "code-keyword": "#029cb9",
- "code-attribute": "#70a800",
- "code-namespace": "#f92672",
- "code-literal": "#ae81ff",
- "code-punctuation": "#111111",
- "code-variable": "#d88200",
- "code-addition": "#44a248",
- "code-deletion": "#ff1b1b",
+ codeText: "#313131",
+ codeBackground: "#fdfdfd",
+ codeComment: "#656e77",
+ codeKeyword: "#029cb9",
+ codeAttribute: "#70a800",
+ codeNamespace: "#f92672",
+ codeLiteral: "#ae81ff",
+ codePunctuation: "#111111",
+ codeVariable: "#d88200",
+ codeAddition: "#44a248",
+ codeDeletion: "#ff1b1b",
},
dark: {
- "background-inner": "#1e1e1e",
- "background-outer": "#252525",
- "background-header": "rgba(37, 37, 37, 0.85)",
+ backgroundInner: "#1e1e1e",
+ backgroundOuter: "#252525",
+ backgroundHeader: "rgba(37, 37, 37, 0.85)",
text: "#f1f1f1",
- "medium-dark": "#d7d7d7",
+ mediumDark: "#d7d7d7",
medium: "#b1b1b1",
- "medium-light": "#959595",
+ mediumLight: "#959595",
light: "#646464",
- "kinda-light": "#535353",
- "super-light": "#272727",
- "super-duper-light": "#1f1f1f",
+ kindaLight: "#535353",
+ superLight: "#272727",
+ superDuperLight: "#1f1f1f",
link: "#88c7ff",
- "link-underline": "rgba(136, 199, 255, 0.4)",
+ linkUnderline: "rgba(136, 199, 255, 0.4)",
success: "#78df55",
error: "#ff5151",
warning: "#f2b702",
// Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments
- "code-text": "#e4e4e4",
- "code-background": "#212121",
- "code-comment": "#929292",
- "code-keyword": "#3b9dd2",
- "code-attribute": "#78df55",
- "code-namespace": "#f95757",
- "code-literal": "#d588fb",
- "code-punctuation": "#cccccc",
- "code-variable": "#fd992a",
- "code-addition": "#78df55",
- "code-deletion": "#ff5151",
+ codeText: "#e4e4e4",
+ codeBackground: "#212121",
+ codeComment: "#929292",
+ codeKeyword: "#3b9dd2",
+ codeAttribute: "#78df55",
+ codeNamespace: "#f95757",
+ codeLiteral: "#d588fb",
+ codePunctuation: "#cccccc",
+ codeVariable: "#fd992a",
+ codeAddition: "#78df55",
+ codeDeletion: "#ff5151",
},
};
+// JS-friendly camelCase to CSS-friendly kebab-case
+const camelToKebab = (camel: string) => decamelize(camel, { separator: "-" });
+
// converts each variable in a given theme object to CSS syntax and returns all of them as one long string
export const toCSS = (theme: Record) =>
Object.entries(theme)
- .map(([name, color]) => `--${name}:${color};`)
+ .map(([name, color]) => `--${camelToKebab(name)}:${color};`)
.join("");
export default themes;
diff --git a/package.json b/package.json
index 0f61784d..91a82bac 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
"copy-to-clipboard": "^3.3.1",
"critters": "^0.0.16",
"date-fns": "^2.28.0",
+ "decamelize": "^6.0.0",
"escape-goat": "^4.0.0",
"fathom-client": "^3.4.1",
"faunadb": "^4.5.2",
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 3435ed34..91d0b0ce 100644
--- 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 (
-
+
+ {/* convert themes object into inlined css variables */}
+
+
diff --git a/yarn.lock b/yarn.lock
index c5347a49..9e77bb59 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2480,6 +2480,11 @@ decamelize@^1.1.0, decamelize@^1.2.0:
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
+decamelize@^6.0.0:
+ version "6.0.0"
+ resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-6.0.0.tgz#8cad4d916fde5c41a264a43d0ecc56fe3d31749e"
+ integrity sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==
+
decode-named-character-reference@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.1.tgz#57b2bd9112659cacbc449d3577d7dadb8e1f3d1b"