diff --git a/docs/index.html b/docs/index.html
index e0db78f..c1ce0d5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -15,7 +15,7 @@
     <meta name="msapplication-TileColor" content="#00aba9" />
     <meta name="msapplication-config" content="./icons/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
-    <!-- Base styles of water.css, so styles don't have to wait until JS is loaded -->
+    <!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
     <!-- <link
       rel="preload"
       as="style"
@@ -33,9 +33,8 @@
     /> -->
 
     <!-- TODO: Remove once water.css v2 is hosted so the above links work -->
-    <link rel="stylesheet" href="../dark.min.css" />
-
-    <!-- Dynamic version of water.css, overwrites base styles. JavaScript sets & updates href. -->
+    <link rel="stylesheet" id="js-startup-stylesheet" href="../dark.min.css" />
+    <!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
     <link rel="stylesheet" id="js-stylesheet" />
     <!-- Custom styles for the documentation / version picker -->
     <link rel="stylesheet" href="style.css" />
diff --git a/docs/script.js b/docs/script.js
index 043f073..11887df 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -14,6 +14,7 @@
 /** Reference to global window, but with properties for loaded libraries. */
 const w = /** @type {Window & Libraries} */ (window)
 const queryParams = new URLSearchParams(w.location.search)
+const supportsCssVars = typeof CSS !== 'undefined' && CSS.supports('color', 'var(--clr)')
 
 /** The base URI from where the docs page loads the CSS files. */
 const DEV_BASE = '../'
@@ -70,6 +71,10 @@ const getFileSnippet = (/** @type {VersionOptions} */ { theme, isLegacy, isStand
 const externalElements = {
   _productHunt: /** @type {HTMLImageElement} */ (document.querySelector('#js-producthunt')),
   _stylesheet: /** @type {HTMLLinkElement} */ (document.querySelector('#js-stylesheet')),
+  _removeStartupStylesheet() {
+    const startupStylesheet = document.head.querySelector('#js-startup-stylesheet')
+    if (startupStylesheet) document.head.removeChild(startupStylesheet)
+  },
   _updateProductHunt(/** @type {Theme} */ theme) {
     this._productHunt.src = this._productHunt.src.replace(/dark|light/, theme)
   },
@@ -77,6 +82,11 @@ const externalElements = {
     this._stylesheet.href = DEV_BASE + fileName
   },
 
+  /** Sets up listener to remove startup version of water.css when right one loads, then updates */
+  init(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {
+    this._stylesheet.addEventListener('load', this._removeStartupStylesheet)
+    this.update(options, preferedTheme)
+  },
   /** Takes current version + the user's prefered scheme and updates all external elements. */
   update(/** @type {VersionOptions} */ options, /** @type {?Theme} */ preferedTheme) {
     const displayedTheme = options.isStandalone ? options.theme : preferedTheme || options.theme
@@ -100,7 +110,7 @@ const createColorSchemeListener = (scheme, queryHandler) => {
 const themeFromParams = queryParams.get('theme')
 const initialVersionOptions = {
   theme: /** @type {Theme} */ (/dark|light/.test(themeFromParams) ? themeFromParams : 'dark'),
-  isLegacy: queryParams.has('legacy'),
+  isLegacy: queryParams.has('legacy') || !supportsCssVars,
   isStandalone: queryParams.has('standalone'),
 }
 
@@ -129,7 +139,7 @@ new w.Vue({
     createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))
     createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))
 
-    externalElements.update(this.versionOptions, this.preferedColorScheme)
+    externalElements.init(this.versionOptions, this.preferedColorScheme)
   },
   methods: {
     copyToClipboard() {