@chronogrove/ui 0.79.0 → 0.81.0

package/src/animated-page-background/ChronogroveAnimatedPageBackground.spec.js

@@ -0,0 +1,189 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { render, waitFor, fireEvent } from '@testing-library/react'
+import { ThemeUIProvider, useColorMode, useThemeUI } from 'theme-ui'
+
+import * as colorUtils from '../color-utils.js'
+
+jest.mock('theme-ui', () => ({
+  ...jest.requireActual('theme-ui'),
+  useColorMode: jest.fn(),
+  useThemeUI: jest.fn()
+}))
+
+import chronogroveTheme from '../theme.js'
+import ChronogroveAnimatedPageBackground from './ChronogroveAnimatedPageBackground.js'
+
+jest.mock('./ColorBends.js', () => {
+  return function MockColorBends() {
+    return <div data-testid='mock-color-bends' />
+  }
+})
+
+const realHexToRgba = jest.requireActual('../color-utils.js').hexToRgba
+
+function setScrollY(y) {
+  Object.defineProperty(window, 'scrollY', { configurable: true, value: y, writable: true })
+}
+
+describe('ChronogroveAnimatedPageBackground', () => {
+  let hexToRgbaSpy
+
+  beforeEach(() => {
+    window.localStorage.removeItem('theme-ui-color-mode')
+    Object.defineProperty(document.documentElement, 'scrollHeight', {
+      configurable: true,
+      value: 2000
+    })
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 800 })
+    setScrollY(0)
+    hexToRgbaSpy = jest.spyOn(colorUtils, 'hexToRgba').mockImplementation((hex, alpha) => realHexToRgba(hex, alpha))
+    useColorMode.mockReturnValue(['default'])
+    useThemeUI.mockReturnValue({ theme: chronogroveTheme })
+  })
+
+  afterEach(() => {
+    hexToRgbaSpy.mockRestore()
+  })
+
+  function renderBackground(ui, theme = chronogroveTheme) {
+    useThemeUI.mockReturnValue({ theme })
+    return render(<ThemeUIProvider theme={theme}>{ui}</ThemeUIProvider>)
+  }
+
+  it('renders fixed backdrop and overlay layers', async () => {
+    const { container, rerender } = renderBackground(<ChronogroveAnimatedPageBackground />)
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('[aria-hidden="true"]')).toHaveLength(2)
+    })
+
+    rerender(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ChronogroveAnimatedPageBackground
+          overlayHeight='200px'
+          darkOpacity={0.2}
+          fadeDistance={500}
+          maxParallaxOffset={80}
+        />
+      </ThemeUIProvider>
+    )
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('[aria-hidden="true"]')).toHaveLength(2)
+    })
+  })
+
+  it('shows ColorBends in dark mode', async () => {
+    useColorMode.mockReturnValue(['dark'])
+    const { getByTestId } = renderBackground(<ChronogroveAnimatedPageBackground />)
+
+    await waitFor(() => {
+      expect(getByTestId('mock-color-bends')).toBeInTheDocument()
+    })
+  })
+
+  it('uses dark fallback hex when gradient resolves a CSS var in dark mode', async () => {
+    useColorMode.mockReturnValue(['dark'])
+    const varTheme = {
+      rawColors: { background: 'var(--page-bg)' },
+      colors: { background: '#ffffff' }
+    }
+    renderBackground(<ChronogroveAnimatedPageBackground />, varTheme)
+
+    await waitFor(() => {
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#14141F', 0.6)
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#14141F', 0.2)
+    })
+  })
+
+  it('uses light fallback hex when gradient resolves a CSS var in light mode', async () => {
+    useColorMode.mockReturnValue(['default'])
+    const varTheme = {
+      rawColors: { background: 'var(--page-bg)' },
+      colors: { background: '#ffffff' }
+    }
+    renderBackground(<ChronogroveAnimatedPageBackground />, varTheme)
+
+    await waitFor(() => {
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#fdf8f5', 0.6)
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#fdf8f5', 0.2)
+    })
+  })
+
+  it('falls back to surface hex when theme omits background tokens', async () => {
+    useColorMode.mockReturnValue(['dark'])
+    renderBackground(<ChronogroveAnimatedPageBackground />, {})
+
+    await waitFor(() => {
+      expect(hexToRgbaSpy).toHaveBeenCalled()
+    })
+  })
+
+  it('prefers colors.background when rawColors are absent', async () => {
+    useColorMode.mockReturnValue(['default'])
+    renderBackground(<ChronogroveAnimatedPageBackground />, {
+      colors: { background: '#aabbcc' }
+    })
+
+    await waitFor(() => {
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#aabbcc', 0.6)
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#aabbcc', 0.2)
+    })
+  })
+
+  it('prefers rawColors.background over colors.background', async () => {
+    useColorMode.mockReturnValue(['default'])
+    renderBackground(<ChronogroveAnimatedPageBackground />, {
+      rawColors: { background: '#112233' },
+      colors: { background: '#eeeeee' }
+    })
+
+    await waitFor(() => {
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#112233', 0.6)
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#112233', 0.2)
+    })
+  })
+
+  it('falls through to colors.background when raw background is null', async () => {
+    useColorMode.mockReturnValue(['default'])
+    renderBackground(<ChronogroveAnimatedPageBackground />, {
+      rawColors: { background: null },
+      colors: { background: '#ccddee' }
+    })
+
+    await waitFor(() => {
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#ccddee', 0.6)
+      expect(hexToRgbaSpy).toHaveBeenCalledWith('#ccddee', 0.2)
+    })
+  })
+
+  it('uses built-in fallbacks when theme is undefined', async () => {
+    useColorMode.mockReturnValue(['default'])
+    useThemeUI.mockReturnValue({ theme: undefined })
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ChronogroveAnimatedPageBackground />
+      </ThemeUIProvider>
+    )
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('[aria-hidden="true"]')).toHaveLength(2)
+      expect(hexToRgbaSpy).toHaveBeenCalled()
+    })
+  })
+
+  it('updates overlay on scroll', async () => {
+    const { container } = renderBackground(<ChronogroveAnimatedPageBackground fadeDistance={100} />)
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('[aria-hidden="true"]')).toHaveLength(2)
+    })
+
+    setScrollY(50)
+    fireEvent.scroll(window)
+  })
+})

package/src/animated-page-background/ColorBends.js

@@ -0,0 +1,309 @@
+import React, { useEffect, useRef } from 'react'
+
+import * as THREE from 'three'
+import './color-bends.css'
+
+const MAX_COLORS = 8
+
+const frag = `
+#define MAX_COLORS ${MAX_COLORS}
+uniform vec2 uCanvas;
+uniform float uTime;
+uniform float uSpeed;
+uniform vec2 uRot;
+uniform int uColorCount;
+uniform vec3 uColors[MAX_COLORS];
+uniform int uTransparent;
+uniform float uScale;
+uniform float uFrequency;
+uniform float uWarpStrength;
+uniform vec2 uPointer; // in NDC [-1,1]
+uniform float uMouseInfluence;
+uniform float uParallax;
+uniform float uNoise;
+varying vec2 vUv;
+
+void main() {
+  float t = uTime * uSpeed;
+  vec2 p = vUv * 2.0 - 1.0;
+  p += uPointer * uParallax * 0.1;
+  vec2 rp = vec2(p.x * uRot.x - p.y * uRot.y, p.x * uRot.y + p.y * uRot.x);
+  vec2 q = vec2(rp.x * (uCanvas.x / uCanvas.y), rp.y);
+  q /= max(uScale, 0.0001);
+  q /= 0.5 + 0.2 * dot(q, q);
+  q += 0.2 * cos(t) - 7.56;
+  vec2 toward = (uPointer - rp);
+  q += toward * uMouseInfluence * 0.2;
+  
+  vec3 col = vec3(0.0);
+  float a = 1.0;
+  
+  if (uColorCount > 0) {
+    vec2 s = q;
+    vec3 sumCol = vec3(0.0);
+    float cover = 0.0;
+    
+    for (int i = 0; i < MAX_COLORS; ++i) {
+      if (i >= uColorCount) break;
+      s -= 0.01;
+      vec2 r = sin(1.5 * (s.yx * uFrequency) + 2.0 * cos(s * uFrequency));
+      float m0 = length(r + sin(5.0 * r.y * uFrequency - 3.0 * t + float(i)) / 4.0);
+      float kBelow = clamp(uWarpStrength, 0.0, 1.0);
+      float kMix = pow(kBelow, 0.3); // strong response across 0..1
+      float gain = 1.0 + max(uWarpStrength - 1.0, 0.0); // allow >1 to amplify displacement
+      vec2 disp = (r - s) * kBelow;
+      vec2 warped = s + disp * gain;
+      float m1 = length(warped + sin(5.0 * warped.y * uFrequency - 3.0 * t + float(i)) / 4.0);
+      float m = mix(m0, m1, kMix);
+      float w = 1.0 - exp(-6.0 / exp(6.0 * m));
+      sumCol += uColors[i] * w;
+      cover = max(cover, w);
+    }
+    
+    col = clamp(sumCol, 0.0, 1.0);
+    a = uTransparent > 0 ? cover : 1.0;
+  } else {
+    vec2 s = q;
+    for (int k = 0; k < 3; ++k) {
+      s -= 0.01;
+      vec2 r = sin(1.5 * (s.yx * uFrequency) + 2.0 * cos(s * uFrequency));
+      float m0 = length(r + sin(5.0 * r.y * uFrequency - 3.0 * t + float(k)) / 4.0);
+      float kBelow = clamp(uWarpStrength, 0.0, 1.0);
+      float kMix = pow(kBelow, 0.3);
+      float gain = 1.0 + max(uWarpStrength - 1.0, 0.0);
+      vec2 disp = (r - s) * kBelow;
+      vec2 warped = s + disp * gain;
+      float m1 = length(warped + sin(5.0 * warped.y * uFrequency - 3.0 * t + float(k)) / 4.0);
+      float m = mix(m0, m1, kMix);
+      col[k] = 1.0 - exp(-6.0 / exp(6.0 * m));
+    }
+    a = uTransparent > 0 ? max(max(col.r, col.g), col.b) : 1.0;
+  }
+  
+  if (uNoise > 0.0001) {
+    float n = fract(sin(dot(gl_FragCoord.xy + vec2(uTime), vec2(12.9898, 78.233))) * 43758.5453123);
+    col += (n - 0.5) * uNoise;
+    col = clamp(col, 0.0, 1.0);
+  }
+  
+  vec3 rgb = (uTransparent > 0) ? col * a : col;
+  gl_FragColor = vec4(rgb, a);
+}
+`
+
+const vert = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 1.0);
+}
+`
+
+export default function ColorBends({
+  className,
+  style,
+  rotation = 45,
+  speed = 0.2,
+  colors = [],
+  transparent = true,
+  autoRotate = 0,
+  scale = 1,
+  frequency = 1,
+  warpStrength = 1,
+  mouseInfluence = 1,
+  parallax = 0.5,
+  noise = 0.1
+}) {
+  const containerRef = useRef(null)
+  const rendererRef = useRef(null)
+  const rafRef = useRef(null)
+  const materialRef = useRef(null)
+  const resizeObserverRef = useRef(null)
+  const rotationRef = useRef(rotation)
+  const autoRotateRef = useRef(autoRotate)
+  const pointerTargetRef = useRef(new THREE.Vector2(0, 0))
+  const pointerCurrentRef = useRef(new THREE.Vector2(0, 0))
+  const pointerSmoothRef = useRef(8)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const scene = new THREE.Scene()
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)
+    const geometry = new THREE.PlaneGeometry(2, 2)
+    const uColorsArray = Array.from({ length: MAX_COLORS }, () => new THREE.Vector3(0, 0, 0))
+
+    const material = new THREE.ShaderMaterial({
+      vertexShader: vert,
+      fragmentShader: frag,
+      uniforms: {
+        uCanvas: { value: new THREE.Vector2(1, 1) },
+        uTime: { value: 0 },
+        uSpeed: { value: speed },
+        uRot: { value: new THREE.Vector2(1, 0) },
+        uColorCount: { value: 0 },
+        uColors: { value: uColorsArray },
+        uTransparent: { value: transparent ? 1 : 0 },
+        uScale: { value: scale },
+        uFrequency: { value: frequency },
+        uWarpStrength: { value: warpStrength },
+        uPointer: { value: new THREE.Vector2(0, 0) },
+        uMouseInfluence: { value: mouseInfluence },
+        uParallax: { value: parallax },
+        uNoise: { value: noise }
+      },
+      premultipliedAlpha: true,
+      transparent: true
+    })
+
+    materialRef.current = material
+
+    const mesh = new THREE.Mesh(geometry, material)
+    scene.add(mesh)
+
+    const renderer = new THREE.WebGLRenderer({
+      antialias: false,
+      powerPreference: 'high-performance',
+      alpha: true
+    })
+
+    rendererRef.current = renderer
+    renderer.outputColorSpace = THREE.SRGBColorSpace
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2))
+    renderer.setClearColor(0x000000, transparent ? 0 : 1)
+    renderer.domElement.style.width = '100%'
+    renderer.domElement.style.height = '100%'
+    renderer.domElement.style.display = 'block'
+
+    container.appendChild(renderer.domElement)
+
+    const clock = new THREE.Clock()
+
+    const handleResize = () => {
+      const w = container.clientWidth || 1
+      const h = container.clientHeight || 1
+      renderer.setSize(w, h, false)
+      material.uniforms.uCanvas.value.set(w, h)
+    }
+
+    handleResize()
+
+    if ('ResizeObserver' in window) {
+      const ro = new ResizeObserver(handleResize)
+      ro.observe(container)
+      resizeObserverRef.current = ro
+    } else {
+      window.addEventListener('resize', handleResize)
+    }
+
+    const loop = () => {
+      const dt = clock.getDelta()
+      const elapsed = clock.elapsedTime
+
+      material.uniforms.uTime.value = elapsed
+
+      const deg = (rotationRef.current % 360) + autoRotateRef.current * elapsed
+      const rad = (deg * Math.PI) / 180
+      const c = Math.cos(rad)
+      const s = Math.sin(rad)
+      material.uniforms.uRot.value.set(c, s)
+
+      const cur = pointerCurrentRef.current
+      const tgt = pointerTargetRef.current
+      const amt = Math.min(1, dt * pointerSmoothRef.current)
+      cur.lerp(tgt, amt)
+      material.uniforms.uPointer.value.copy(cur)
+
+      renderer.render(scene, camera)
+      rafRef.current = requestAnimationFrame(loop)
+    }
+
+    rafRef.current = requestAnimationFrame(loop)
+
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+      if (resizeObserverRef.current) resizeObserverRef.current.disconnect()
+      else window.removeEventListener('resize', handleResize)
+      geometry.dispose()
+      material.dispose()
+      renderer.dispose()
+      if (renderer.domElement && renderer.domElement.parentElement === container) {
+        container.removeChild(renderer.domElement)
+      }
+    }
+  }, [frequency, mouseInfluence, noise, parallax, scale, speed, transparent, warpStrength])
+
+  useEffect(() => {
+    const material = materialRef.current
+    const renderer = rendererRef.current
+    if (!material) return
+
+    rotationRef.current = rotation
+    autoRotateRef.current = autoRotate
+    material.uniforms.uSpeed.value = speed
+    material.uniforms.uScale.value = scale
+    material.uniforms.uFrequency.value = frequency
+    material.uniforms.uWarpStrength.value = warpStrength
+    material.uniforms.uMouseInfluence.value = mouseInfluence
+    material.uniforms.uParallax.value = parallax
+    material.uniforms.uNoise.value = noise
+
+    const toVec3 = hex => {
+      const h = hex.replace('#', '').trim()
+      const v =
+        h.length === 3
+          ? [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)]
+          : [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]
+      return new THREE.Vector3(v[0] / 255, v[1] / 255, v[2] / 255)
+    }
+
+    const arr = (colors || [])
+      .filter(color => typeof color === 'string')
+      .slice(0, MAX_COLORS)
+      .map(toVec3)
+
+    for (let i = 0; i < MAX_COLORS; i++) {
+      const vec = material.uniforms.uColors.value[i]
+      if (i < arr.length) vec.copy(arr[i])
+      else vec.set(0, 0, 0)
+    }
+
+    material.uniforms.uColorCount.value = arr.length
+    material.uniforms.uTransparent.value = transparent ? 1 : 0
+    if (renderer) renderer.setClearColor(0x000000, transparent ? 0 : 1)
+  }, [
+    rotation,
+    autoRotate,
+    speed,
+    scale,
+    frequency,
+    warpStrength,
+    mouseInfluence,
+    parallax,
+    noise,
+    colors,
+    transparent
+  ])
+
+  useEffect(() => {
+    const material = materialRef.current
+    const container = containerRef.current
+    if (!material || !container) return
+
+    const handlePointerMove = e => {
+      const rect = container.getBoundingClientRect()
+      const x = ((e.clientX - rect.left) / (rect.width || 1)) * 2 - 1
+      const y = -(((e.clientY - rect.top) / (rect.height || 1)) * 2 - 1)
+      pointerTargetRef.current.set(x, y)
+    }
+
+    container.addEventListener('pointermove', handlePointerMove)
+
+    return () => {
+      container.removeEventListener('pointermove', handlePointerMove)
+    }
+  }, [])
+
+  return <div ref={containerRef} className={`color-bends-container ${className || ''}`} style={style} />
+}

package/src/animated-page-background/color-bends.css

@@ -0,0 +1,13 @@
+.color-bends-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: transparent;
+}
+
+.color-bends-container canvas {
+  width: 100% !important;
+  height: 100% !important;
+  display: block;
+}

package/src/animated-page-background/index.js

@@ -0,0 +1,2 @@
+export { default } from './ChronogroveAnimatedPageBackground.js'
+export { default as ChronogroveAnimatedPageBackground } from './ChronogroveAnimatedPageBackground.js'

package/src/animated-page-background/index.spec.js

@@ -0,0 +1,18 @@
+/**
+ * @jest-environment jsdom
+ */
+
+jest.mock('./ColorBends.js', () => {
+  return function MockColorBends() {
+    return null
+  }
+})
+
+import DefaultBackground, { ChronogroveAnimatedPageBackground } from './index.js'
+
+describe('animated-page-background barrel', () => {
+  it('re-exports the animated background as default and named export', () => {
+    expect(ChronogroveAnimatedPageBackground).toEqual(expect.any(Function))
+    expect(DefaultBackground).toBe(ChronogroveAnimatedPageBackground)
+  })
+})

package/src/button.js

@@ -1,8 +1,9 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui'
+import React from 'react'
+import { Box } from '@theme-ui/components'
 
 const Button = ({ variant = 'primary', ...props }) => (
-  <button
+  <Box
+    as='button'
     {...props}
     sx={{
       appearance: 'none',

package/src/category-label.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Box } from '@theme-ui/components'
+
+/**
+ * Styled label for post categories. Pass display text as `children` (site-specific mapping stays in the app).
+ */
+const CategoryLabel = ({ children, sx: sxProp = {}, ...props }) => (
+  <Box
+    sx={{
+      display: 'inline-block',
+      fontSize: [0],
+      fontFamily: 'heading',
+      color: 'primary',
+      letterSpacing: '0.05em',
+      ...sxProp
+    }}
+    {...props}
+  >
+    {children}
+  </Box>
+)
+
+export default CategoryLabel

package/src/category-label.spec.js

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import CategoryLabel from './category-label.js'
+
+const theme = { colors: { primary: '#422EA3' } }
+
+const renderWithTheme = ui => render(<ThemeUIProvider theme={theme}>{ui}</ThemeUIProvider>)
+
+describe('CategoryLabel', () => {
+  it('renders children', () => {
+    renderWithTheme(<CategoryLabel>Travel</CategoryLabel>)
+    expect(screen.getByText('Travel')).toBeInTheDocument()
+  })
+
+  it('merges sx', () => {
+    renderWithTheme(
+      <CategoryLabel sx={{ color: 'red' }} data-testid='cat'>
+        X
+      </CategoryLabel>
+    )
+    expect(screen.getByTestId('cat')).toBeInTheDocument()
+  })
+})

package/src/chevron-icons.js

@@ -0,0 +1,37 @@
+import React from 'react'
+
+/** Chevron left (inline SVG, no icon font). */
+export const ChevronLeftIcon = props => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 320 512'
+    width='1em'
+    height='1em'
+    aria-hidden='true'
+    focusable='false'
+    {...props}
+  >
+    <path
+      fill='currentColor'
+      d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z'
+    />
+  </svg>
+)
+
+/** Chevron right (inline SVG, no icon font). */
+export const ChevronRightIcon = props => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 320 512'
+    width='1em'
+    height='1em'
+    aria-hidden='true'
+    focusable='false'
+    {...props}
+  >
+    <path
+      fill='currentColor'
+      d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'
+    />
+  </svg>
+)

package/src/chronogrove-theme-surface-colors.js

@@ -0,0 +1,22 @@
+/**
+ * Canonical string colors for page surface + frosted panels (default + dark mode).
+ *
+ * Imported by `theme.js` (full Theme UI merge) and `color-mode/chronogrove-head-theme.js`
+ * (RSC-safe head theme) so SSR inline CSS and the client Theme UI theme stay aligned.
+ *
+ * This module must stay free of `theme-ui` / `@theme-ui/presets` / React so it can load in
+ * Next.js Server Components.
+ */
+export const chronogroveThemeSurfaceColorsLight = {
+  background: '#fdf8f5',
+  text: '#111',
+  textMuted: '#333',
+  'panel-background': 'rgba(255, 255, 255, 0.45)'
+}
+
+export const chronogroveThemeSurfaceColorsDark = {
+  background: '#14141F',
+  text: '#fff',
+  textMuted: '#d8d8d8',
+  'panel-background': 'rgba(20, 20, 31, 0.45)'
+}

package/src/color-mode/browser-sync.js

@@ -1,5 +1,9 @@
+import { chronogroveHeadTheme } from './chronogrove-head-theme.js'
 import { THEME_UI_COLOR_MODE_STORAGE_KEY } from './constants.js'
 import { normalizeThemeUiColorMode } from './normalize.js'
+import { resolveChronogroveSurfaceColors } from './resolve-theme-colors.js'
+
+const SURFACE = resolveChronogroveSurfaceColors(chronogroveHeadTheme)
 
 export function resolveThemeUiColorMode(storageKey = THEME_UI_COLOR_MODE_STORAGE_KEY) {
   let mode
@@ -49,6 +53,9 @@ export function syncThemeUiColorMode(storageKey = THEME_UI_COLOR_MODE_STORAGE_KE
     .forEach(className => htmlElement.classList.remove(className))
   htmlElement.classList.add(`theme-ui-${mode}`)
   htmlElement.setAttribute('data-theme-ui-color-mode', mode)
+  // Match `buildHtmlBackgroundInlineScript`: inline background must follow toggles; otherwise the
+  // initial head script’s color sticks and wins over Theme UI’s `--theme-ui-colors-background`.
+  htmlElement.style.backgroundColor = mode === 'dark' ? SURFACE.darkBackgroundHex : SURFACE.defaultBackgroundHex
 }
 
 export function scheduleThemeUiColorModeSync(storageKey = THEME_UI_COLOR_MODE_STORAGE_KEY) {

package/src/color-mode/browser-sync.spec.js

@@ -86,6 +86,13 @@ describe('syncThemeUiColorMode', () => {
     syncThemeUiColorMode()
     expect(document.documentElement.classList.contains('theme-ui-dark')).toBe(true)
     expect(document.documentElement.getAttribute('data-theme-ui-color-mode')).toBe('dark')
+    expect(document.documentElement.style.backgroundColor).toBe('rgb(20, 20, 31)')
+  })
+
+  it('sets html inline background for default mode', () => {
+    window.localStorage.setItem('theme-ui-color-mode', 'default')
+    syncThemeUiColorMode()
+    expect(document.documentElement.style.backgroundColor).toBe('rgb(253, 248, 245)')
   })
 
   it('strips prior theme-ui-* classes before applying', () => {