diff --git a/dist/docs/script.js b/dist/docs/script.js
index a6b5d81..fac04c6 100644
--- a/dist/docs/script.js
+++ b/dist/docs/script.js
@@ -1,2 +1,2 @@
-"use strict";var e=window,t=new URLSearchParams(e.location.search),n="undefined"!=typeof CSS&&CSS.supports("color","var(--clr)"),i="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",s={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},r=function(e){var t=e.theme,n=e.isLegacy?"-legacy":"",i=e.isStandalone?".standalone":"";return"".concat(t).concat(n).concat(i,".min.css")},a=function(e){var t=e.theme,n=e.isLegacy,s=e.isStandalone,a=r({theme:t,isLegacy:n,isStandalone:s}),o='<link rel="stylesheet" href="'.concat(i).concat(a,'">');return!n||s?o:(function(e){var t=e.theme,n=e.isLegacy,s=e.isStandalone,a="dark"===t?"light":"dark",o=r({theme:a,isLegacy:n,isStandalone:s});return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n<link rel="preload" as="style" href="'.concat(i).concat(r({theme:t,isLegacy:n,isStandalone:s}),'">\n<link rel="preload" as="style" href="').concat(i).concat(o,'" media="(prefers-color-scheme: ').concat(a,')">')}({theme:t,isLegacy:n,isStandalone:!0})+"\n\n"+o).trim()},o={_productHunt:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),_removeStartupStylesheet:function(){var e=document.head.querySelector("#js-startup-stylesheet");e&&document.head.removeChild(e)},_updateProductHunt:function(e){this._productHunt.src=this._productHunt.src.replace(/dark|light/,e)},_updateStylesheet:function(e){this._stylesheet.href="../"+e},init:function(e,t){this._stylesheet.addEventListener("load",this._removeStartupStylesheet),this.update(e,t)},update:function(e,t){var n=e.isStandalone?e.theme:t||e.theme;this._updateStylesheet(r(e)),this._updateProductHunt(n)}},c=function(t,n){var i=e.matchMedia("(prefers-color-scheme: ".concat(t,")"));i.addListener(function(e){return n(e.matches)}),n(i.matches)},l=t.get("theme"),h={theme:/dark|light/.test(l)?l:"dark",isLegacy:t.has("legacy")||!n,isStandalone:t.has("standalone")};new e.Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:h,preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:r(this.versionOptions),fileSize:(e=this.versionOptions,s[r(e)]||0).toFixed(2),fileSnippet:a(this.versionOptions)};var e}},created:function(){var e=this;c("dark",function(t){return t&&(e.preferedColorScheme="dark")}),c("light",function(t){return t&&(e.preferedColorScheme="light")}),o.init(this.versionOptions,this.preferedColorScheme)},methods:{copyToClipboard:function(){var t=this;Promise.resolve().then(function(){return e.clipboard.writeText(t.selectedVersion.fileSnippet)}).then(function(){return t.copyStatus="success"}).catch(function(){return t.copyStatus="failed"}),setTimeout(function(){return t.copyStatus=null},1e3)}},watch:{preferedColorScheme:function(e){o.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){o.update(e,this.preferedColorScheme)}}}}),(0,e.faviconModeSwitcher.default)([{element:'link[rel="shortcut icon"]',href:{dark:"./icons/light-favicon.ico"}},{element:'link[rel="icon"][sizes="16x16"]',href:{dark:"./icons/light-favicon-16x16.png"}},{element:'link[rel="icon"][sizes="32x32"]',href:{dark:"./icons/light-favicon-32x32.png"}}]);
+"use strict";var e=window,t=new URLSearchParams(e.location.search),n="undefined"!=typeof CSS&&CSS.supports("color","var(--clr)"),i="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",s={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},r=function(e){var t=e.theme,n=e.isLegacy?"-legacy":"",i=e.isStandalone?".standalone":"";return"".concat(t).concat(n).concat(i,".min.css")},a=function(e){var t=e.theme,n=e.isLegacy,s=e.isStandalone,a=r({theme:t,isLegacy:n,isStandalone:s}),o='<link rel="stylesheet" href="'.concat(i).concat(a,'">');return!n||s?o:(function(e){var t=e.theme,n=e.isLegacy,s=e.isStandalone,a="dark"===t?"light":"dark",o=r({theme:a,isLegacy:n,isStandalone:s});return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n<link rel="preload" as="style" href="'.concat(i).concat(r({theme:t,isLegacy:n,isStandalone:s}),'">\n<link rel="preload" as="style" href="').concat(i).concat(o,'" media="(prefers-color-scheme: ').concat(a,')">')}({theme:t,isLegacy:n,isStandalone:!0})+"\n\n"+o).trim()},o={_productHunt:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),_removeStartupStylesheet:function(){var e=document.head.querySelector("#js-startup-stylesheet");e&&document.head.removeChild(e)},_updateProductHunt:function(e){this._productHunt.src=this._productHunt.src.replace(/dark|light/,e)},_updateStylesheet:function(e){this._stylesheet.href="../"+e},init:function(e,t){this._stylesheet.addEventListener("load",this._removeStartupStylesheet),this.update(e,t)},update:function(e,t){var n=e.isStandalone?e.theme:t||e.theme;this._updateStylesheet(r(e)),this._updateProductHunt(n)}},c=function(t,n){var i=e.matchMedia("(prefers-color-scheme: ".concat(t,")"));i.addListener(function(e){return n(e.matches)}),n(i.matches)},l=t.get("theme"),h={theme:/^(dark|light)$/.test(l)?l:"dark",isLegacy:t.has("legacy")||!n,isStandalone:t.has("standalone")};new e.Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:h,preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:r(this.versionOptions),fileSize:(e=this.versionOptions,s[r(e)]||0).toFixed(2),fileSnippet:a(this.versionOptions)};var e}},created:function(){var e=this;c("dark",function(t){return t&&(e.preferedColorScheme="dark")}),c("light",function(t){return t&&(e.preferedColorScheme="light")}),o.init(this.versionOptions,this.preferedColorScheme)},methods:{copyToClipboard:function(){var t=this;Promise.resolve().then(function(){return e.clipboard.writeText(t.selectedVersion.fileSnippet)}).then(function(){return t.copyStatus="success"}).catch(function(){return t.copyStatus="failed"}),setTimeout(function(){return t.copyStatus=null},1e3)}},watch:{preferedColorScheme:function(e){o.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){o.update(e,this.preferedColorScheme)}}}}),(0,e.faviconModeSwitcher.default)([{element:'link[rel="shortcut icon"]',href:{dark:"./icons/light-favicon.ico"}},{element:'link[rel="icon"][sizes="16x16"]',href:{dark:"./icons/light-favicon-16x16.png"}},{element:'link[rel="icon"][sizes="32x32"]',href:{dark:"./icons/light-favicon-32x32.png"}}]);
 //# sourceMappingURL=script.js.map
diff --git a/dist/docs/script.js.map b/dist/docs/script.js.map
index a2cda42..b29435d 100644
--- a/dist/docs/script.js.map
+++ b/dist/docs/script.js.map
@@ -1 +1 @@
-{"version":3,"sources":["script.js"],"names":["w","window","queryParams","URLSearchParams","location","search","supportsCssVars","CSS","supports","CDN_BASE","FILE_SIZES","dark.min.css","dark.standalone.min.css","dark-legacy.min.css","dark-legacy.standalone.min.css","light.min.css","light.standalone.min.css","light-legacy.min.css","light-legacy.standalone.min.css","getFileName","_ref","theme","legacySuffix","isLegacy","standaloneExt","isStandalone","concat","getFileSnippet","_ref3","fileName","stylesheetSnippet","_ref2","alternativeTheme","alternativeFile","getFilePreloadSnippet","trim","externalElements","_productHunt","document","querySelector","_stylesheet","_removeStartupStylesheet","startupStylesheet","head","removeChild","_updateProductHunt","this","src","replace","_updateStylesheet","href","init","options","preferedTheme","addEventListener","update","displayedTheme","createColorSchemeListener","scheme","queryHandler","mediaQuery","matchMedia","addListener","query","matches","themeFromParams","get","initialVersionOptions","test","has","Vue","el","filters","capitalize","str","charAt","toUpperCase","slice","data","versionOptions","preferedColorScheme","copyStatus","computed","selectedVersion","fileSize","toFixed","fileSnippet","created","_this","match","methods","copyToClipboard","_this2","Promise","resolve","then","clipboard","writeText","setTimeout","watch","nextScheme","deep","handler","nextOptions","iconModeSwitcher","faviconModeSwitcher","element","dark"],"mappings":"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","file":"script.js","sourcesContent":["// @ts-check\n/** @typedef {'dark' | 'light'} Theme */\n/** @typedef {keyof typeof FILE_SIZES} FileName */\n/** @typedef {'success' | 'failed'} CopyStatus */\n/** @typedef {{ theme: Theme, isLegacy: boolean, isStandalone: boolean }} VersionOptions */\n/**\n * @typedef {Object} Libraries External packages exposed on `window` (loaded through `<script>`)\n * @prop {typeof import('vue').default} Vue\n * @prop {Clipboard} clipboard\n * @prop {import('favicon-mode-switcher')} faviconModeSwitcher\n */\n\n/**\n * @typedef {Object} VueData State used by the version picker\n * @prop {VersionOptions} versionOptions\n * @prop {?CopyStatus} copyStatus\n * @prop {?Theme} preferedColorScheme\n */\n\n/** Reference to global window, but with properties for loaded libraries. */\nconst w = /** @type {Window & Libraries} */ (window)\nconst queryParams = new URLSearchParams(w.location.search)\nconst supportsCssVars = typeof CSS !== 'undefined' && CSS.supports('color', 'var(--clr)')\n\n/** The base URI from where the docs page loads the CSS files. */\nconst DEV_BASE = '../'\n/** The base URI from where instructions show to load the CSS files. */\nconst CDN_BASE = 'https://cdn.jsdelivr.net/gh/kognise/water.css/dist/'\n\n/** An object mapping the (minified + gzipped) fileSize in KB to a fileName. */\nconst FILE_SIZES = {\n  'dark.min.css': 1.4,\n  'dark.standalone.min.css': 1.31,\n  'dark-legacy.min.css': 0.177 + 1.16 + 1.15,\n  'dark-legacy.standalone.min.css': 1.16,\n  'light.min.css': 1.4,\n  'light.standalone.min.css': 1.3,\n  'light-legacy.min.css': 0.178 + 1.16 + 1.15,\n  'light-legacy.standalone.min.css': 1.15,\n}\n\n/** Takes in version options and returns the respective CSS file name. */\nconst getFileName = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => {\n  const legacySuffix = isLegacy ? '-legacy' : ''\n  const standaloneExt = isStandalone ? '.standalone' : ''\n  return /** @type {FileName} */ (`${theme}${legacySuffix}${standaloneExt}.min.css`)\n}\n\n/** Takes in version options and returns the corresponding file size in KB. */\nconst getFileSize = (/** @type {VersionOptions} */ options) => FILE_SIZES[getFileName(options)] || 0\n\n/** Takes in version options and returns an HTML snippet that preloads the main stylesheet and\n *  conditionally preloads the alternative stylesheet (if the alternative theme is active). */\nconst getFilePreloadSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => {\n  const alternativeTheme = theme === 'dark' ? 'light' : 'dark'\n  const alternativeFile = getFileName({ theme: alternativeTheme, isLegacy, isStandalone })\n\n  return `\n<!-- Preload the required stylesheets (optional) -->\n<link rel=\"preload\" as=\"style\" href=\"${CDN_BASE}${getFileName({ theme, isLegacy, isStandalone })}\">\n<link rel=\"preload\" as=\"style\" href=\"${CDN_BASE}${alternativeFile}\" media=\"(prefers-color-scheme: ${alternativeTheme})\">`\n}\n\n/** Takes in version options and returns the code snippet instructing users how to load the file. */\nconst getFileSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => {\n  const fileName = getFileName({ theme, isLegacy, isStandalone })\n  const stylesheetSnippet = `<link rel=\"stylesheet\" href=\"${CDN_BASE}${fileName}\">`\n\n  if (!isLegacy || isStandalone) return stylesheetSnippet\n\n  const preloadSnippet = getFilePreloadSnippet({ theme, isLegacy, isStandalone: true })\n  return (preloadSnippet + '\\n\\n' + stylesheetSnippet).trim()\n}\n\n/** Handles elements external to the version picker that still need to be kept\n *  up to date with the current version, e.g. switching images from dark to light. */\nconst externalElements = {\n  _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')),\n  _stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')),\n  _removeStartupStylesheet() {\n    const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')\n    if (startupStylesheet) document.head.removeChild(startupStylesheet)\n  },\n  _updateProductHunt(/** @type {Theme} */ theme) {\n    this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)\n  },\n  _updateStylesheet(/** @type {FileName} */ fileName) {\n    this._stylesheet.href = DEV_BASE + fileName\n  },\n\n  /** Sets up listener to remove startup version of water.css when right one loads, then updates */\n  init(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {\n    this._stylesheet.addEventListener('load', this._removeStartupStylesheet)\n    this.update(options, preferedTheme)\n  },\n  /** Takes current version + the user's prefered scheme and updates all external elements. */\n  update(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {\n    const displayedTheme = options.isStandalone ? options.theme : preferedTheme || options.theme\n\n    this._updateStylesheet(getFileName(options))\n    this._updateProductHunt(displayedTheme)\n  },\n}\n\n/**\n * Sets up a media query for the given color scheme and runs the callback on change.\n * @param {Theme} scheme\n * @param {(matches: boolean) => any} queryHandler\n */\nconst createColorSchemeListener = (scheme, queryHandler) => {\n  const mediaQuery = w.matchMedia(`(prefers-color-scheme: ${scheme})`)\n  mediaQuery.addListener(query => queryHandler(query.matches))\n  queryHandler(mediaQuery.matches)\n}\n\nconst themeFromParams = queryParams.get('theme')\nconst initialVersionOptions = {\n  theme: /** @type {Theme} */ (/dark|light/.test(themeFromParams) ? themeFromParams : 'dark'),\n  isLegacy: queryParams.has('legacy') || !supportsCssVars,\n  isStandalone: queryParams.has('standalone'),\n}\n\nnew w.Vue({\n  el: '#installation',\n  filters: {\n    capitalize: (/** @type {string} */ str) => str.charAt(0).toUpperCase() + str.slice(1),\n  },\n  /** @type {VueData} */\n  data: {\n    versionOptions: initialVersionOptions,\n    preferedColorScheme: null,\n    copyStatus: null,\n  },\n  computed: {\n    /** @returns {{ fileName: string, fileSize: string, fileSnippet: string }} */\n    selectedVersion() {\n      return {\n        fileName: getFileName(this.versionOptions),\n        fileSize: getFileSize(this.versionOptions).toFixed(2),\n        fileSnippet: getFileSnippet(this.versionOptions),\n      }\n    },\n  },\n  created() {\n    createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))\n    createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))\n\n    externalElements.init(this.versionOptions, this.preferedColorScheme)\n  },\n  methods: {\n    copyToClipboard() {\n      Promise.resolve()\n        .then(() => w.clipboard.writeText(this.selectedVersion.fileSnippet))\n        .then(() => (this.copyStatus = 'success'))\n        .catch(() => (this.copyStatus = 'failed'))\n      setTimeout(() => (this.copyStatus = null), 1000)\n    },\n  },\n  watch: {\n    preferedColorScheme(/** @type {Theme} */ nextScheme) {\n      externalElements.update(this.versionOptions, nextScheme)\n    },\n    versionOptions: {\n      deep: true,\n      handler(/** @type {VersionOptions} */ nextOptions) {\n        externalElements.update(nextOptions, this.preferedColorScheme)\n      },\n    },\n  },\n})\n\nconst iconModeSwitcher = w.faviconModeSwitcher.default\niconModeSwitcher([\n  {\n    element: 'link[rel=\"shortcut icon\"]',\n    href: { dark: './icons/light-favicon.ico' },\n  },\n  {\n    element: 'link[rel=\"icon\"][sizes=\"16x16\"]',\n    href: { dark: './icons/light-favicon-16x16.png' },\n  },\n  {\n    element: 'link[rel=\"icon\"][sizes=\"32x32\"]',\n    href: { dark: './icons/light-favicon-32x32.png' },\n  },\n])\n"]}
\ No newline at end of file
+{"version":3,"sources":["script.js"],"names":["w","window","queryParams","URLSearchParams","location","search","supportsCssVars","CSS","supports","CDN_BASE","FILE_SIZES","dark.min.css","dark.standalone.min.css","dark-legacy.min.css","dark-legacy.standalone.min.css","light.min.css","light.standalone.min.css","light-legacy.min.css","light-legacy.standalone.min.css","getFileName","_ref","theme","legacySuffix","isLegacy","standaloneExt","isStandalone","concat","getFileSnippet","_ref3","fileName","stylesheetSnippet","_ref2","alternativeTheme","alternativeFile","getFilePreloadSnippet","trim","externalElements","_productHunt","document","querySelector","_stylesheet","_removeStartupStylesheet","startupStylesheet","head","removeChild","_updateProductHunt","this","src","replace","_updateStylesheet","href","init","options","preferedTheme","addEventListener","update","displayedTheme","createColorSchemeListener","scheme","queryHandler","mediaQuery","matchMedia","addListener","query","matches","themeFromParams","get","initialVersionOptions","test","has","Vue","el","filters","capitalize","str","charAt","toUpperCase","slice","data","versionOptions","preferedColorScheme","copyStatus","computed","selectedVersion","fileSize","toFixed","fileSnippet","created","_this","match","methods","copyToClipboard","_this2","Promise","resolve","then","clipboard","writeText","setTimeout","watch","nextScheme","deep","handler","nextOptions","iconModeSwitcher","faviconModeSwitcher","element","dark"],"mappings":"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","file":"script.js","sourcesContent":["// @ts-check\n/** @typedef {'dark' | 'light'} Theme */\n/** @typedef {keyof typeof FILE_SIZES} FileName */\n/** @typedef {'success' | 'failed'} CopyStatus */\n/** @typedef {{ theme: Theme, isLegacy: boolean, isStandalone: boolean }} VersionOptions */\n/**\n * @typedef {Object} Libraries External packages exposed on `window` (loaded through `<script>`)\n * @prop {typeof import('vue').default} Vue\n * @prop {Clipboard} clipboard\n * @prop {import('favicon-mode-switcher')} faviconModeSwitcher\n */\n\n/**\n * @typedef {Object} VueData State used by the version picker\n * @prop {VersionOptions} versionOptions\n * @prop {?CopyStatus} copyStatus\n * @prop {?Theme} preferedColorScheme\n */\n\n/** Reference to global window, but with properties for loaded libraries. */\nconst w = /** @type {Window & Libraries} */ (window)\nconst queryParams = new URLSearchParams(w.location.search)\nconst supportsCssVars = typeof CSS !== 'undefined' && CSS.supports('color', 'var(--clr)')\n\n/** The base URI from where the docs page loads the CSS files. */\nconst DEV_BASE = '../'\n/** The base URI from where instructions show to load the CSS files. */\nconst CDN_BASE = 'https://cdn.jsdelivr.net/gh/kognise/water.css/dist/'\n\n/** An object mapping the (minified + gzipped) fileSize in KB to a fileName. */\nconst FILE_SIZES = {\n  'dark.min.css': 1.4,\n  'dark.standalone.min.css': 1.31,\n  'dark-legacy.min.css': 0.177 + 1.16 + 1.15,\n  'dark-legacy.standalone.min.css': 1.16,\n  'light.min.css': 1.4,\n  'light.standalone.min.css': 1.3,\n  'light-legacy.min.css': 0.178 + 1.16 + 1.15,\n  'light-legacy.standalone.min.css': 1.15,\n}\n\n/** Takes in version options and returns the respective CSS file name. */\nconst getFileName = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => {\n  const legacySuffix = isLegacy ? '-legacy' : ''\n  const standaloneExt = isStandalone ? '.standalone' : ''\n  return /** @type {FileName} */ (`${theme}${legacySuffix}${standaloneExt}.min.css`)\n}\n\n/** Takes in version options and returns the corresponding file size in KB. */\nconst getFileSize = (/** @type {VersionOptions} */ options) => FILE_SIZES[getFileName(options)] || 0\n\n/** Takes in version options and returns an HTML snippet that preloads the main stylesheet and\n *  conditionally preloads the alternative stylesheet (if the alternative theme is active). */\nconst getFilePreloadSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => {\n  const alternativeTheme = theme === 'dark' ? 'light' : 'dark'\n  const alternativeFile = getFileName({ theme: alternativeTheme, isLegacy, isStandalone })\n\n  return `\n<!-- Preload the required stylesheets (optional) -->\n<link rel=\"preload\" as=\"style\" href=\"${CDN_BASE}${getFileName({ theme, isLegacy, isStandalone })}\">\n<link rel=\"preload\" as=\"style\" href=\"${CDN_BASE}${alternativeFile}\" media=\"(prefers-color-scheme: ${alternativeTheme})\">`\n}\n\n/** Takes in version options and returns the code snippet instructing users how to load the file. */\nconst getFileSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStandalone }) => {\n  const fileName = getFileName({ theme, isLegacy, isStandalone })\n  const stylesheetSnippet = `<link rel=\"stylesheet\" href=\"${CDN_BASE}${fileName}\">`\n\n  if (!isLegacy || isStandalone) return stylesheetSnippet\n\n  const preloadSnippet = getFilePreloadSnippet({ theme, isLegacy, isStandalone: true })\n  return (preloadSnippet + '\\n\\n' + stylesheetSnippet).trim()\n}\n\n/** Handles elements external to the version picker that still need to be kept\n *  up to date with the current version, e.g. switching images from dark to light. */\nconst externalElements = {\n  _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')),\n  _stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')),\n  _removeStartupStylesheet() {\n    const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')\n    if (startupStylesheet) document.head.removeChild(startupStylesheet)\n  },\n  _updateProductHunt(/** @type {Theme} */ theme) {\n    this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)\n  },\n  _updateStylesheet(/** @type {FileName} */ fileName) {\n    this._stylesheet.href = DEV_BASE + fileName\n  },\n\n  /** Sets up listener to remove startup version of water.css when right one loads, then updates */\n  init(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {\n    this._stylesheet.addEventListener('load', this._removeStartupStylesheet)\n    this.update(options, preferedTheme)\n  },\n  /** Takes current version + the user's prefered scheme and updates all external elements. */\n  update(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {\n    const displayedTheme = options.isStandalone ? options.theme : preferedTheme || options.theme\n\n    this._updateStylesheet(getFileName(options))\n    this._updateProductHunt(displayedTheme)\n  },\n}\n\n/**\n * Sets up a media query for the given color scheme and runs the callback on change.\n * @param {Theme} scheme\n * @param {(matches: boolean) => any} queryHandler\n */\nconst createColorSchemeListener = (scheme, queryHandler) => {\n  const mediaQuery = w.matchMedia(`(prefers-color-scheme: ${scheme})`)\n  mediaQuery.addListener(query => queryHandler(query.matches))\n  queryHandler(mediaQuery.matches)\n}\n\nconst themeFromParams = queryParams.get('theme')\n/** @type {VersionOptions} */\nconst initialVersionOptions = {\n  theme: /** @type {Theme} */ (/^(dark|light)$/.test(themeFromParams) ? themeFromParams : 'dark'),\n  isLegacy: queryParams.has('legacy') || !supportsCssVars,\n  isStandalone: queryParams.has('standalone'),\n}\n\nnew w.Vue({\n  el: '#installation',\n  filters: {\n    capitalize: (/** @type {string} */ str) => str.charAt(0).toUpperCase() + str.slice(1),\n  },\n  /** @type {VueData} */\n  data: {\n    versionOptions: initialVersionOptions,\n    preferedColorScheme: null,\n    copyStatus: null,\n  },\n  computed: {\n    /** @returns {{ fileName: string, fileSize: string, fileSnippet: string }} */\n    selectedVersion() {\n      return {\n        fileName: getFileName(this.versionOptions),\n        fileSize: getFileSize(this.versionOptions).toFixed(2),\n        fileSnippet: getFileSnippet(this.versionOptions),\n      }\n    },\n  },\n  created() {\n    createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))\n    createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))\n\n    externalElements.init(this.versionOptions, this.preferedColorScheme)\n  },\n  methods: {\n    copyToClipboard() {\n      Promise.resolve()\n        .then(() => w.clipboard.writeText(this.selectedVersion.fileSnippet))\n        .then(() => (this.copyStatus = 'success'))\n        .catch(() => (this.copyStatus = 'failed'))\n      setTimeout(() => (this.copyStatus = null), 1000)\n    },\n  },\n  watch: {\n    preferedColorScheme(/** @type {Theme} */ nextScheme) {\n      externalElements.update(this.versionOptions, nextScheme)\n    },\n    versionOptions: {\n      deep: true,\n      handler(/** @type {VersionOptions} */ nextOptions) {\n        externalElements.update(nextOptions, this.preferedColorScheme)\n      },\n    },\n  },\n})\n\nconst iconModeSwitcher = w.faviconModeSwitcher.default\niconModeSwitcher([\n  {\n    element: 'link[rel=\"shortcut icon\"]',\n    href: { dark: './icons/light-favicon.ico' },\n  },\n  {\n    element: 'link[rel=\"icon\"][sizes=\"16x16\"]',\n    href: { dark: './icons/light-favicon-16x16.png' },\n  },\n  {\n    element: 'link[rel=\"icon\"][sizes=\"32x32\"]',\n    href: { dark: './icons/light-favicon-32x32.png' },\n  },\n])\n"]}
\ No newline at end of file
diff --git a/docs/script.js b/docs/script.js
index 92d3874..46a0b22 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -114,8 +114,9 @@ const createColorSchemeListener = (scheme, queryHandler) => {
 }
 
 const themeFromParams = queryParams.get('theme')
+/** @type {VersionOptions} */
 const initialVersionOptions = {
-  theme: /** @type {Theme} */ (/dark|light/.test(themeFromParams) ? themeFromParams : 'dark'),
+  theme: /** @type {Theme} */ (/^(dark|light)$/.test(themeFromParams) ? themeFromParams : 'dark'),
   isLegacy: queryParams.has('legacy') || !supportsCssVars,
   isStandalone: queryParams.has('standalone'),
 }