@o2e-brands/pebble-web-theme
v0.1.0-beta.1
Published
Web theme for Pebble UI: ThemeProvider, Tailwind preset, base CSS.
Readme
@o2e-brands/pebble-web-theme
ThemeProvider, Tailwind preset, and base CSS for Pebble UI on the web.
Install
pnpm add @o2e-brands/pebble-web-theme @o2e-brands/pebble-tokensQuick start
1. Wrap your app
// app/layout.tsx (Next.js App Router)
import "@o2e-brands/pebble-web-theme/globals.css"
import { ThemeProvider } from "@o2e-brands/pebble-web-theme"
import gj from "@o2e-brands/pebble-tokens/gj"
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ThemeProvider theme={gj}>{children}</ThemeProvider>
</body>
</html>
)
}For zero-flash SSR, also inline the CSS vars on <html>:
import { computeCssVars, cssVarsToInlineStyle } from "@o2e-brands/pebble-web-theme"
export default function RootLayout({ children }) {
const vars = cssVarsToInlineStyle(computeCssVars(gj))
return (
<html lang="en" style={vars}>
<body>
<ThemeProvider theme={gj}>{children}</ThemeProvider>
</body>
</html>
)
}2. Configure Tailwind
// tailwind.config.ts
import type { Config } from "tailwindcss"
import { pebblePreset } from "@o2e-brands/pebble-web-theme/preset"
export default {
presets: [pebblePreset],
content: [
"./src/**/*.{ts,tsx}",
"./node_modules/@o2e-brands/pebble-web/dist/**/*.{js,mjs}",
],
} satisfies ConfigHooks
import { useTheme, useBrand } from "@o2e-brands/pebble-web-theme"
function MyComponent() {
const theme = useTheme() // PebbleTheme
const brand = useBrand() // "gj"
return <span>{brand}</span>
}Server-side use
ThemeProvider is a Client Component (marked "use client"). It works inside
Server Component layouts in Next.js App Router. The useIsomorphicLayoutEffect
prevents SSR warnings; the inline-vars trick prevents FOUC.