Harden inline theme bootstrap

package.json

@@ -259,5 +259,13 @@
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.62.2"
+  },
+  "allowScripts": {
+    "@playwright/browser-chromium@1.61.1": true,
+    "@sentry/cli@2.58.6": true,
+    "esbuild@0.27.0": true,
+    "esbuild@0.28.1": true,
+    "esbuild@0.27.7": true,
+    "puppeteer@25.3.0": true
   }
 }

src/components/Head/ThemeInit.astro

@@ -12,15 +12,15 @@
  */
 import { themeData } from './server/themeData'
 
-const { defaultThemeIdJson, darkThemeIdJson, metaColorsJson } = themeData()
+const { defaultThemeId, darkThemeId, metaColors } = themeData()
 ---
 
 <script
   is:inline
   define:vars={{
-    defaultThemeIdJson,
-    darkThemeIdJson,
-    metaColorsJson,
+    defaultThemeId,
+    darkThemeId,
+    metaColors,
   }}
 >
   // @ts-nocheck
@@ -48,18 +48,14 @@ const { defaultThemeIdJson, darkThemeIdJson, metaColorsJson } = themeData()
 
   const runThemeInit = () => {
     try {
-      const defaultThemeId = JSON.parse(defaultThemeIdJson)
-      const darkThemeId = JSON.parse(darkThemeIdJson)
-      const themeMetaColors = JSON.parse(metaColorsJson)
-
       const stored = localStorage.getItem('theme')
       const resolvedThemeId = getResolvedThemeId({ defaultThemeId, darkThemeId })
       const activeThemeId = stored && stored !== defaultThemeId ? stored : resolvedThemeId
 
       applyThemeToDocument(document, activeThemeId)
 
       window.metaColors = window.metaColors || {}
-      Object.assign(window.metaColors, themeMetaColors)
+      Object.assign(window.metaColors, metaColors)
 
       applyThemeMetaColor(document, activeThemeId)
 
@@ -78,13 +74,10 @@ const { defaultThemeIdJson, darkThemeIdJson, metaColorsJson } = themeData()
    */
   document.addEventListener('astro:before-swap', event => {
     try {
-      const defaultThemeId = JSON.parse(defaultThemeIdJson)
-      const darkThemeId = JSON.parse(darkThemeIdJson)
-      const themeMetaColors = JSON.parse(metaColorsJson)
       const resolvedThemeId = getResolvedThemeId({ defaultThemeId, darkThemeId })
 
       window.metaColors = window.metaColors || {}
-      Object.assign(window.metaColors, themeMetaColors)
+      Object.assign(window.metaColors, metaColors)
 
       applyThemeToDocument(event.newDocument, resolvedThemeId)
       applyThemeMetaColor(event.newDocument, resolvedThemeId)

src/components/Head/server/__tests__/themeData.spec.ts

@@ -14,19 +14,19 @@ describe('themeData', () => {
     vi.restoreAllMocks()
   })
 
-  it('serializes configured theme ids and colors into JSON-safe strings', async () => {
+  it('returns configured theme ids and colors for the inline theme bootstrap', async () => {
     const themeData = await loadThemeData()
     const data = themeData()
 
-    const defaultThemeId = JSON.parse(data.defaultThemeIdJson)
+    const defaultThemeId = data.defaultThemeId
     expect(typeof defaultThemeId).toBe('string')
     expect(defaultThemeId.length).toBeGreaterThan(0)
 
-    const darkThemeId = JSON.parse(data.darkThemeIdJson)
+    const darkThemeId = data.darkThemeId
     expect(typeof darkThemeId).toBe('string')
     expect(darkThemeId.length).toBeGreaterThan(0)
 
-    const colors = JSON.parse(data.metaColorsJson) as Record<string, string>
+    const colors = data.metaColors
     const configuredIds = themeConfig.themes.map(theme => theme.id)
 
     configuredIds.forEach(id => {

src/components/Head/server/themeData.ts

@@ -2,9 +2,9 @@ import themeConfig from '@content/themes.json'
 import { BuildError } from '@lib/errors/BuildError'
 
 interface ThemeInitScriptData {
-  defaultThemeIdJson: string
-  darkThemeIdJson: string
-  metaColorsJson: string
+  defaultThemeId: string
+  darkThemeId: string
+  metaColors: Record<string, string>
 }
 
 type ThemeDataFunction = () => ThemeInitScriptData
@@ -39,9 +39,9 @@ export const themeData: ThemeDataFunction = () => {
     const darkThemeId = hasDarkTheme ? 'dark' : defaultThemeId
 
     return {
-      defaultThemeIdJson: JSON.stringify(defaultThemeId),
-      darkThemeIdJson: JSON.stringify(darkThemeId),
-      metaColorsJson: JSON.stringify(metaColors),
+      defaultThemeId,
+      darkThemeId,
+      metaColors,
     }
   } catch (error) {
     throw new BuildError('Failed to prepare theme initialization data.', {