From 32eb95734a6ca17241fda7bf577eaf9c2641cb69 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 28 Mar 2022 18:02:53 +0530 Subject: [PATCH] Add default themes to index html --- .../rollup-plugin-build-themes.js | 48 +++++++++++++++++-- 1 file changed, 45 insertions(+), 3 deletions(-) diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js index dd52ef77..770f48b7 100644 --- a/scripts/build-plugins/rollup-plugin-build-themes.js +++ b/scripts/build-plugins/rollup-plugin-build-themes.js @@ -27,7 +27,7 @@ async function appendVariablesToCSS(variables, cssSource) { } module.exports = function buildThemes(options) { - let manifest, variants; + let manifest, variants, defaultDark, defaultLight; return { name: "build-themes", @@ -38,13 +38,23 @@ module.exports = function buildThemes(options) { for (const location of manifestLocations) { manifest = require(`${location}/manifest.json`); variants = manifest.values.variants; - for (const [variant] of Object.entries(variants)) { + for (const [variant, details] of Object.entries(variants)) { const themeName = manifest.name; + const fileName = `theme-${themeName}-${variant}.css`; + if (details.default) { + // This theme is the default for when Hydrogen launches for the first time + if (details.dark) { + defaultDark = fileName; + } + else { + defaultLight = fileName; + } + } // emit the css as built theme bundle this.emitFile({ type: "chunk", id: `${location}/theme.css?variant=${variant}`, - fileName: `theme-${themeName}-${variant}.css`, + fileName, }); } } @@ -60,5 +70,37 @@ module.exports = function buildThemes(options) { } return null; }, + + transformIndexHtml(_, ctx) { + let darkThemeLocation, lightThemeLocation; + for (const [, bundle] of Object.entries(ctx.bundle)) { + if (bundle.name === defaultDark) { + darkThemeLocation = bundle.fileName; + } + if (bundle.name === defaultLight) { + lightThemeLocation = bundle.fileName; + } + } + return [ + { + tag: "link", + attrs: { + rel: "stylesheet", + type: "text/css", + media: "(prefers-color-scheme: dark)", + href: `./${darkThemeLocation}`, + } + }, + { + tag: "link", + attrs: { + rel: "stylesheet", + type: "text/css", + media: "(prefers-color-scheme: light)", + href: `./${lightThemeLocation}`, + } + }, + ]; + } } }