diff --git a/dist/docs/script.js b/dist/docs/script.js
index c6a8a47..71f7aa0 100644
--- a/dist/docs/script.js
+++ b/dist/docs/script.js
@@ -1,2 +1,2 @@
-"use strict";var e="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",t={"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},n=function(e){var t=e.theme,n=e.isLegacy,r=e.isStandalone;return"".concat(t).concat(n?"-legacy":"").concat(r?".standalone":"",".min.css")},r=function(t){var r=t.theme,s=t.isLegacy,i=t.isStandalone,a=n({theme:r,isLegacy:s,isStandalone:i}),c='');if(!s||i)return c;var o="dark"===r?"dark":"light";return(function(t,n,r){return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n\n')}(n({theme:r,isLegacy:!0,isStandalone:!0}),n({theme:o,isLegacy:!0,isStandalone:!0}),o)+"\n\n"+c).trim()},s={_phImage:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),updateStylesheet:function(e){this._stylesheet.href=e},updateProductHunt:function(e){this._phImage.src=this._phImage.src.replace(/dark|light/,e)},update:function(e,t){var r=e.theme,s=e.isStandalone,i="../"+n(e),a=s?r:t||r;this.updateStylesheet(i),this.updateProductHunt(a)}},i=function(e,t){var n=matchMedia("(prefers-color-scheme: ".concat(e,")"));n.addListener(function(e){return t(e.matches)}),t(n.matches)};new Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:{theme:"dark",isStandalone:!1,isLegacy:!1},preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:n(this.versionOptions),fileSize:(e=this.versionOptions,t[n(e)]||"..."),fileSnippet:r(this.versionOptions)};var e}},created:function(){var e=this;i("dark",function(t){return t&&(e.preferedColorScheme="dark")}),i("light",function(t){return t&&(e.preferedColorScheme="light")}),this.preferedColorScheme&&s.updateProductHunt(this.preferedColorScheme)},methods:{copyToClipboard:function(){var e=this;Promise.resolve().then(function(){return clipboard.writeText(e.selectedVersion.fileSnippet)}).then(function(){return e.copyStatus="success"}).catch(function(){return e.copyStatus="failed"}),setTimeout(function(){return e.copyStatus=void 0},1e3)}},watch:{preferedColorScheme:function(e){s.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){s.update(e,this.preferedColorScheme)}}}});
+"use strict";var e="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",t={"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},n=function(e){var t=e.theme,n=e.isLegacy,r=e.isStandalone;return"".concat(t).concat(n?"-legacy":"").concat(r?".standalone":"",".min.css")},r=function(t){var r=t.theme,s=t.isLegacy,i=t.isStandalone,a=n({theme:r,isLegacy:s,isStandalone:i}),c='');if(!s||i)return c;var o="dark"===r?"light":"dark";return(function(t,n,r){return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n\n')}(n({theme:r,isLegacy:!0,isStandalone:!0}),n({theme:o,isLegacy:!0,isStandalone:!0}),o)+"\n\n"+c).trim()},s={_phImage:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),updateStylesheet:function(e){this._stylesheet.href=e},updateProductHunt:function(e){this._phImage.src=this._phImage.src.replace(/dark|light/,e)},update:function(e,t){var r=e.theme,s=e.isStandalone,i="../"+n(e),a=s?r:t||r;this.updateStylesheet(i),this.updateProductHunt(a)}},i=function(e,t){var n=matchMedia("(prefers-color-scheme: ".concat(e,")"));n.addListener(function(e){return t(e.matches)}),t(n.matches)};new Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:{theme:"dark",isStandalone:!1,isLegacy:!1},preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:n(this.versionOptions),fileSize:(e=this.versionOptions,t[n(e)]||"..."),fileSnippet:r(this.versionOptions)};var e}},created:function(){var e=this;i("dark",function(t){return t&&(e.preferedColorScheme="dark")}),i("light",function(t){return t&&(e.preferedColorScheme="light")}),this.preferedColorScheme&&s.updateProductHunt(this.preferedColorScheme)},methods:{copyToClipboard:function(){var e=this;Promise.resolve().then(function(){return clipboard.writeText(e.selectedVersion.fileSnippet)}).then(function(){return e.copyStatus="success"}).catch(function(){return e.copyStatus="failed"}),setTimeout(function(){return e.copyStatus=void 0},1e3)}},watch:{preferedColorScheme:function(e){s.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){s.update(e,this.preferedColorScheme)}}}});
//# sourceMappingURL=script.js.map
diff --git a/dist/docs/script.js.map b/dist/docs/script.js.map
index 939af03..3f34396 100644
--- a/dist/docs/script.js.map
+++ b/dist/docs/script.js.map
@@ -1 +1 @@
-{"version":3,"sources":["script.js"],"names":["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","isLegacy","isStandalone","concat","getFileSnippet","_ref2","fileName","stylesheetSnippet","altTheme","mainFileName","altFileName","getFilePreloadSnippet","trim","externalElements","_phImage","document","querySelector","_stylesheet","updateStylesheet","href","this","updateProductHunt","src","replace","update","options","preferedColorScheme","visibleTheme","createColorSchemeListener","queryHandler","mediaQuery","matchMedia","addListener","query","matches","Vue","el","filters","capitalize","str","charAt","toUpperCase","slice","data","versionOptions","copyStatus","computed","selectedVersion","fileSize","fileSnippet","created","_this","match","methods","copyToClipboard","_this2","Promise","resolve","then","clipboard","writeText","setTimeout","undefined","watch","nextScheme","deep","handler","nextOptions"],"mappings":"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","file":"script.js","sourcesContent":["/**\n * Type definition for the version object used throughout the code\n * @typedef {Object} VersionOptions\n * @prop {'dark' | 'light'} theme\n * @prop {boolean} isLegacy\n * @prop {boolean} isStandalone\n */\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/** @param {VersionOptions} options */\nconst getFileName = ({ theme, isLegacy, isStandalone }) => {\n return `${theme}${isLegacy ? '-legacy' : ''}${isStandalone ? '.standalone' : ''}.min.css`\n}\n\n/** @param {VersionOptions} options */\nconst getFileSize = options => {\n return FILE_SIZES[getFileName(options)] || '...'\n}\n\nconst getFilePreloadSnippet = (mainFileName, altFileName, altTheme) => {\n return `\n\n\n`\n}\n\n/** @param {VersionOptions} options */\nconst getFileSnippet = ({ theme, isLegacy, isStandalone }) => {\n const fileName = getFileName({ theme, isLegacy, isStandalone })\n const stylesheetSnippet = ``\n\n if (!isLegacy || isStandalone) return stylesheetSnippet\n\n const altTheme = theme === 'dark' ? 'dark' : 'light'\n const mainStandaloneFile = getFileName({ theme, isLegacy: true, isStandalone: true })\n const altStandaloneFile = getFileName({ theme: altTheme, isLegacy: true, isStandalone: true })\n const preloadSnippet = getFilePreloadSnippet(mainStandaloneFile, altStandaloneFile, altTheme)\n\n return (preloadSnippet + '\\n\\n' + stylesheetSnippet).trim()\n}\n\nconst externalElements = {\n _phImage: document.querySelector('#js-producthunt'),\n _stylesheet: document.querySelector('#js-stylesheet'),\n\n updateStylesheet(href) {\n this._stylesheet.href = href\n },\n updateProductHunt(theme) {\n this._phImage.src = this._phImage.src.replace(/dark|light/, theme)\n },\n /** @param {VersionOptions} options @param {'dark' | 'light'} [preferedColorScheme] */\n update(options, preferedColorScheme) {\n const { theme, isStandalone } = options\n const href = DEV_BASE + getFileName(options)\n const visibleTheme = isStandalone ? theme : preferedColorScheme || theme\n\n this.updateStylesheet(href)\n this.updateProductHunt(visibleTheme)\n },\n}\n\nconst createColorSchemeListener = (theme, queryHandler) => {\n const mediaQuery = matchMedia(`(prefers-color-scheme: ${theme})`)\n mediaQuery.addListener(query => queryHandler(query.matches))\n queryHandler(mediaQuery.matches)\n}\n\nnew Vue({\n el: '#installation',\n filters: { capitalize: str => str.charAt(0).toUpperCase() + str.slice(1) },\n data: {\n versionOptions: { theme: 'dark', isStandalone: false, isLegacy: false },\n preferedColorScheme: null,\n copyStatus: null,\n },\n computed: {\n selectedVersion() {\n return {\n fileName: getFileName(this.versionOptions),\n fileSize: getFileSize(this.versionOptions),\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 if (this.preferedColorScheme) externalElements.updateProductHunt(this.preferedColorScheme)\n },\n methods: {\n copyToClipboard() {\n Promise.resolve()\n .then(() => clipboard.writeText(this.selectedVersion.fileSnippet))\n .then(() => (this.copyStatus = 'success'))\n .catch(() => (this.copyStatus = 'failed'))\n setTimeout(() => (this.copyStatus = undefined), 1000)\n },\n },\n watch: {\n preferedColorScheme(nextScheme) {\n externalElements.update(this.versionOptions, nextScheme)\n },\n versionOptions: {\n deep: true,\n handler(nextOptions) {\n externalElements.update(nextOptions, this.preferedColorScheme)\n },\n },\n },\n})\n"]}
\ No newline at end of file
+{"version":3,"sources":["script.js"],"names":["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","isLegacy","isStandalone","concat","getFileSnippet","_ref2","fileName","stylesheetSnippet","altTheme","mainFileName","altFileName","getFilePreloadSnippet","trim","externalElements","_phImage","document","querySelector","_stylesheet","updateStylesheet","href","this","updateProductHunt","src","replace","update","options","preferedColorScheme","visibleTheme","createColorSchemeListener","queryHandler","mediaQuery","matchMedia","addListener","query","matches","Vue","el","filters","capitalize","str","charAt","toUpperCase","slice","data","versionOptions","copyStatus","computed","selectedVersion","fileSize","fileSnippet","created","_this","match","methods","copyToClipboard","_this2","Promise","resolve","then","clipboard","writeText","setTimeout","undefined","watch","nextScheme","deep","handler","nextOptions"],"mappings":"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","file":"script.js","sourcesContent":["/**\n * Type definition for the version object used throughout the code\n * @typedef {Object} VersionOptions\n * @prop {'dark' | 'light'} theme\n * @prop {boolean} isLegacy\n * @prop {boolean} isStandalone\n */\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/** @param {VersionOptions} options */\nconst getFileName = ({ theme, isLegacy, isStandalone }) => {\n return `${theme}${isLegacy ? '-legacy' : ''}${isStandalone ? '.standalone' : ''}.min.css`\n}\n\n/** @param {VersionOptions} options */\nconst getFileSize = options => {\n return FILE_SIZES[getFileName(options)] || '...'\n}\n\nconst getFilePreloadSnippet = (mainFileName, altFileName, altTheme) => {\n return `\n\n\n`\n}\n\n/** @param {VersionOptions} options */\nconst getFileSnippet = ({ theme, isLegacy, isStandalone }) => {\n const fileName = getFileName({ theme, isLegacy, isStandalone })\n const stylesheetSnippet = ``\n\n if (!isLegacy || isStandalone) return stylesheetSnippet\n\n const altTheme = theme === 'dark' ? 'light' : 'dark'\n const mainStandaloneFile = getFileName({ theme, isLegacy: true, isStandalone: true })\n const altStandaloneFile = getFileName({ theme: altTheme, isLegacy: true, isStandalone: true })\n const preloadSnippet = getFilePreloadSnippet(mainStandaloneFile, altStandaloneFile, altTheme)\n\n return (preloadSnippet + '\\n\\n' + stylesheetSnippet).trim()\n}\n\nconst externalElements = {\n _phImage: document.querySelector('#js-producthunt'),\n _stylesheet: document.querySelector('#js-stylesheet'),\n\n updateStylesheet(href) {\n this._stylesheet.href = href\n },\n updateProductHunt(theme) {\n this._phImage.src = this._phImage.src.replace(/dark|light/, theme)\n },\n /** @param {VersionOptions} options @param {'dark' | 'light'} [preferedColorScheme] */\n update(options, preferedColorScheme) {\n const { theme, isStandalone } = options\n const href = DEV_BASE + getFileName(options)\n const visibleTheme = isStandalone ? theme : preferedColorScheme || theme\n\n this.updateStylesheet(href)\n this.updateProductHunt(visibleTheme)\n },\n}\n\nconst createColorSchemeListener = (theme, queryHandler) => {\n const mediaQuery = matchMedia(`(prefers-color-scheme: ${theme})`)\n mediaQuery.addListener(query => queryHandler(query.matches))\n queryHandler(mediaQuery.matches)\n}\n\nnew Vue({\n el: '#installation',\n filters: { capitalize: str => str.charAt(0).toUpperCase() + str.slice(1) },\n data: {\n versionOptions: { theme: 'dark', isStandalone: false, isLegacy: false },\n preferedColorScheme: null,\n copyStatus: null,\n },\n computed: {\n selectedVersion() {\n return {\n fileName: getFileName(this.versionOptions),\n fileSize: getFileSize(this.versionOptions),\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 if (this.preferedColorScheme) externalElements.updateProductHunt(this.preferedColorScheme)\n },\n methods: {\n copyToClipboard() {\n Promise.resolve()\n .then(() => clipboard.writeText(this.selectedVersion.fileSnippet))\n .then(() => (this.copyStatus = 'success'))\n .catch(() => (this.copyStatus = 'failed'))\n setTimeout(() => (this.copyStatus = undefined), 1000)\n },\n },\n watch: {\n preferedColorScheme(nextScheme) {\n externalElements.update(this.versionOptions, nextScheme)\n },\n versionOptions: {\n deep: true,\n handler(nextOptions) {\n externalElements.update(nextOptions, this.preferedColorScheme)\n },\n },\n },\n})\n"]}
\ No newline at end of file
diff --git a/docs/script.js b/docs/script.js
index a22c33b..e23de7e 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -47,7 +47,7 @@ const getFileSnippet = ({ theme, isLegacy, isStandalone }) => {
if (!isLegacy || isStandalone) return stylesheetSnippet
- const altTheme = theme === 'dark' ? 'dark' : 'light'
+ const altTheme = theme === 'dark' ? 'light' : 'dark'
const mainStandaloneFile = getFileName({ theme, isLegacy: true, isStandalone: true })
const altStandaloneFile = getFileName({ theme: altTheme, isLegacy: true, isStandalone: true })
const preloadSnippet = getFilePreloadSnippet(mainStandaloneFile, altStandaloneFile, altTheme)