jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 11:56:38 -04:00
Code Issues Activity

clean up stitches theme config

Browse Source
This commit is contained in:
Jake Jarvis
2022-07-07 16:19:28 -04:00
parent b1a92a2eab
commit 295301aa9e
7 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/Layout/Layout.tsx
View File

@ -3,8 +3,7 @@ import Header from "../Header";
import Footer from "../Footer"; import Footer from "../Footer";
import { SkipToContentLink, SkipToContentTarget } from "../SkipToContent"; import { SkipToContentLink, SkipToContentTarget } from "../SkipToContent";
import { useTheme } from "../../hooks/use-theme"; import { useTheme } from "../../hooks/use-theme";
import { styled, theme } from "../../lib/styles/stitches.config"; import { styled, theme, darkTheme } from "../../lib/styles/stitches.config";
import { themeColors } from "../../lib/config/themes";
import type { ComponentProps } from "react"; import type { ComponentProps } from "react";
const Flex = styled("div", { const Flex = styled("div", {
@ -45,8 +44,11 @@ const Layout = ({ container = true, children, ...rest }: LayoutProps) => {
return ( return (
<> <>
<Head> <Head>
{/* dynamically set browser theme color to match the background color; default to light for SSR */} <meta
<meta name="theme-color" content={themeColors[activeTheme === "dark" ? activeTheme : "light"]} /> // dynamically set browser theme color to match the background color; default to light for SSR
name="theme-color"
content={(activeTheme === "dark" ? darkTheme : theme)?.colors?.backgroundOuter?.value}
/>
</Head> </Head>
<SkipToContentLink /> <SkipToContentLink />

2
contexts/ThemeContext.tsx
View File

@ -1,6 +1,6 @@
import { createContext, useCallback, useEffect, useState } from "react"; import { createContext, useCallback, useEffect, useState } from "react";
import { useLocalStorage, useMedia } from "react-use"; import { useLocalStorage, useMedia } from "react-use";
import { themeStorageKey } from "../lib/config/themes"; import { themeStorageKey } from "../lib/styles/stitches.config";
import type { Context, PropsWithChildren } from "react"; import type { Context, PropsWithChildren } from "react";
export const ThemeContext: Context<{ export const ThemeContext: Context<{

19
lib/config/themes.ts
View File

@ -1,19 +0,0 @@
import { theme, darkTheme } from "../styles/stitches.config";
// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there
export const themeClassNames = {
light: theme.className,
dark: darkTheme.className,
};
// colors used for `<meta name="theme-color" .../>` (see components/Layout/Layout.tsx)
export const themeColors = {
light: theme.colors.backgroundOuter?.value,
dark: darkTheme.colors.backgroundOuter?.value,
};
// default/fallback theme
export const themeDefault = "light";
// local storage key
export const themeStorageKey = "theme";

13
lib/styles/stitches.config.ts
View File

@ -2,12 +2,12 @@ import { createStitches } from "@stitches/react";
// misc. helpers // misc. helpers
import hexToRgba from "hex-to-rgba"; import hexToRgba from "hex-to-rgba";
import normalizeStyles from "./helpers/normalize"; import normalizeStyles from "./utils/normalize";
// web fonts // web fonts
import { Inter, RobotoMono } from "./fonts"; import { Inter, RobotoMono } from "./fonts";
export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme, config } = createStitches({ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme, config, reset } = createStitches({
theme: { theme: {
fonts: { fonts: {
sans: `"${Inter.name.regular}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`, sans: `"${Inter.name.regular}", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
@ -165,5 +165,14 @@ export const globalStyles = globalCss(
} }
); );
// theme classnames are generated dynamically by stitches, so have ThemeProvider pull them from there
export const themeClassNames = {
light: theme.className,
dark: darkTheme.className,
};
// local storage key
export const themeStorageKey = "theme";
// re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx // re-export hashed URLs of the most important variable fonts so we can preload them in pages/_document.tsx
export const preloadFonts = [...Inter.preloadFonts, ...RobotoMono.preloadFonts]; export const preloadFonts = [...Inter.preloadFonts, ...RobotoMono.preloadFonts];

0
lib/styles/helpers/normalize.ts → lib/styles/utils/normalize.ts
View File

3
pages/_app.tsx
View File

@ -6,8 +6,7 @@ import { ThemeProvider } from "../contexts/ThemeContext";
import Layout from "../components/Layout"; import Layout from "../components/Layout";
import * as config from "../lib/config"; import * as config from "../lib/config";
import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo"; import { defaultSeo, socialProfileJsonLd } from "../lib/config/seo";
import { themeClassNames } from "../lib/config/themes"; import { globalStyles, themeClassNames } from "../lib/styles/stitches.config";
import { globalStyles } from "../lib/styles/stitches.config";
import type { ReactElement, ReactNode } from "react"; import type { ReactElement, ReactNode } from "react";
import type { NextPage } from "next"; import type { NextPage } from "next";
import type { AppProps as NextAppProps } from "next/app"; import type { AppProps as NextAppProps } from "next/app";

14
pages/_document.tsx
View File

@ -1,13 +1,19 @@
import { Html, Head, Main, NextScript } from "next/document"; import { Html, Head, Main, NextScript } from "next/document";
import ThemeScript from "../components/ThemeScript/ThemeScript"; import ThemeScript from "../components/ThemeScript/ThemeScript";
import { getCssText, preloadFonts } from "../lib/styles/stitches.config"; import { getCssText, reset, themeClassNames, themeStorageKey, preloadFonts } from "../lib/styles/stitches.config";
import { themeClassNames, themeDefault, themeStorageKey } from "../lib/config/themes";
import * as config from "../lib/config"; import * as config from "../lib/config";
// ensure the server can handle multiple requests without accumulating previous visitors' stylesheets
const getCssAndReset = () => {
const css = getCssText();
reset();
return css;
};
// https://nextjs.org/docs/advanced-features/custom-document // https://nextjs.org/docs/advanced-features/custom-document
const Document = () => { const Document = () => {
return ( return (
<Html lang={config.siteLocale} className={themeClassNames[themeDefault]}> <Html lang={config.siteLocale} className={themeClassNames["light"]}>
<Head> <Head>
{/* inject a small script to set/restore the user's theme ASAP */} {/* inject a small script to set/restore the user's theme ASAP */}
<ThemeScript {...{ themeClassNames, themeStorageKey }} /> <ThemeScript {...{ themeClassNames, themeStorageKey }} />
@ -25,7 +31,7 @@ const Document = () => {
))} ))}
{/* stitches SSR: https://stitches.dev/blog/using-nextjs-with-stitches#step-3-ssr */} {/* stitches SSR: https://stitches.dev/blog/using-nextjs-with-stitches#step-3-ssr */}
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} /> <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssAndReset() }} />
</Head> </Head>
<body> <body>
<Main /> <Main />