From 3aaef1476de9fa51ebbc6656f19cc1913e3edf0e Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Wed, 23 Jul 2025 00:25:59 -0700
Subject: [PATCH 01/12] Adding files from flutter_test_goldens

---
 theme/_includes/components/footer.jinja      |   3 -
 theme/_includes/components/highlightJs.jinja |  40 -------
 theme/_includes/components/navMain.jinja     |  42 ++------
 theme/_includes/layouts/docs_page.jinja      |  99 +++++++++--------
 theme/styles/docs_page_layout.scss           |  45 +++++++-
 theme/styles/docs_page_layout_dark.scss      |  11 +-
 theme/styles/docs_page_layout_light.scss     | 105 -------------------
 7 files changed, 113 insertions(+), 232 deletions(-)
 delete mode 100644 theme/_includes/components/footer.jinja
 delete mode 100644 theme/_includes/components/highlightJs.jinja
 delete mode 100644 theme/styles/docs_page_layout_light.scss

diff --git a/theme/_includes/components/footer.jinja b/theme/_includes/components/footer.jinja
deleted file mode 100644
index 4bd43bf..0000000
--- a/theme/_includes/components/footer.jinja
+++ /dev/null
@@ -1,3 +0,0 @@
-<footer>
-  <p>This is a test footer in the FBH docs theme</p>
-</footer>
\ No newline at end of file
diff --git a/theme/_includes/components/highlightJs.jinja b/theme/_includes/components/highlightJs.jinja
deleted file mode 100644
index 97f5c41..0000000
--- a/theme/_includes/components/highlightJs.jinja
+++ /dev/null
@@ -1,40 +0,0 @@
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/oxygen.min.css">
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/dart.min.js"></script>
-
-<script>
-  const lightTheme = "oxygen";
-  const darkTheme = "obsidian";
-
-  hljs.highlightAll();
-
-  function goToHighlightJsLightMode() {
-    removeHighlightJsTheme(darkTheme);
-    addHighlightJsTheme(lightTheme);
-  }
-
-  function goToHighlightJsDarkMode() {
-    removeHighlightJsTheme(lightTheme);
-    addHighlightJsTheme(darkTheme);
-  }
-
-  function removeHighlightJsTheme(themeName) {
-    const existingStylesheet = document.querySelector(`link[href*="${themeName}"]`);
-    if (existingStylesheet) {
-      existingStylesheet.remove();
-    } else {
-      console.log("Couldn't find the light stylesheet to remove it");
-    }
-  }
-
-  function addHighlightJsTheme(themeName) {
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/${themeName}.min.css`;
-
-    document.querySelector("head").append(link);
-    document.querySelector("span").textContent = themeName;
-  }
-</script>
\ No newline at end of file
diff --git a/theme/_includes/components/navMain.jinja b/theme/_includes/components/navMain.jinja
index 66afd99..5b8825a 100644
--- a/theme/_includes/components/navMain.jinja
+++ b/theme/_includes/components/navMain.jinja
@@ -1,47 +1,19 @@
 <nav class="main">
-  <ol class="organization-links">
-    <!-- Hard-coded, specific top-level menu items -->
-    {% if package.github != null %}
-    <a href="{{ package.github.url }}" target="_blank" role="button" class="btn"><span class="fa fa-brands fa-github"></span>&nbsp;&nbsp;GitHub</a>
-    {% endif %}
-
-    {% if package.discord != null %}
-    <a href="{{ package.discord }}" target="_blank" role="button" class="btn"><span class="fa fa-brands fa-discord"></span>&nbsp;&nbsp;Discord</a>
-    {% endif %}
-
-    {% if package.sponsorship != null %}
-    <a href="{{ package.sponsorship }}" target="_blank" role="button" class="btn"><span class="fa fa-dollar-sign"></span>&nbsp;&nbsp;Sponsor</a>
-    {% endif %}
-  </ol>
-
-  <div class="organization-nav-divider">&nbsp;</div>
-
   {% if navigation != null %}
   <ol>
     {% for item in navigation.items %}
-    {% if item.tag == null and item.items == null %}
+    {% if item.tag == null %}
     <!-- Top-level menu item -->
-    <li><a href="{{ item.url }}">{{ item.title }}</a></li>
+    <li><a href="{{  item.url  }}">{{  item.title  }}</a></li>
     {% else %}
     <!-- Group of menu items -->
     <div class="link-group">
-      <span class="title">{{ item.title }}</span>
-
-      {% if item.tag != null %}
+      <span class="title">{{  item.title  }}</span>
       <ol>
         {% for page in pages.byTag(item.tag, sortBy=item.sortBy) %}
-        <li><a href="/{{ page.data.url }}">{{ page.data.title }}</a></li>
+        <li><a href="{{  page.data.url  }}">{{  page.data.title  }}</a></li>
         {% endfor %}
       </ol>
-      {% endif %}
-
-      {% if item.items != null %}
-      <ol>
-        {% for subItem in item.items %}
-        <li><a href="/{{ subItem.url }}">{{ subItem.title }}</a></li>
-        {% endfor %}
-      </ol>
-      {% endif %}
     </div>
     {% endif %}
     {% endfor %}
@@ -50,14 +22,14 @@
   {% if navigation.show_contributors %}
   {% set contributors = github[package.github.organization][package.github.name] %}
   <div class="contributors">
-    <span class="title">Contributors <span class="count">({{ contributors | length }})</span></span>
+    <span class="title">Contributors <span class="count">({{  contributors | length  }})</span></span>
     <ol>
       {% for contributor in (contributors|take(4)) %}
       <li class="contributor">
         <!-- Note: We show the contributor photo as a background image because -->
         <!--       displaying it as an <img> results in a few extra pixels above -->
         <!--       the image that we couldn't get rid of -->
-        <a href="{{ contributor.userUrl }}" target="_blank" title="{{ contributor.userId }}" style="background-image: url('{{ contributor.avatarUrl }}');">
+        <a href="{{  contributor.userUrl  }}" target="_blank" title="{{  contributor.userId  }}" style="background-image: url('{{  contributor.avatarUrl  }}');">
         </a>
       </li>
       {% endfor %}
@@ -65,7 +37,7 @@
       {% if contributors|length > 4 %}
       <li class="remaining-count">
         <div class="bubble">
-          <span class="count">+{{ contributors|length - 4 }}</span>
+          <span class="count">+{{  contributors|length - 4  }}</span>
         </div>
       </li>
       {% endif %}
diff --git a/theme/_includes/layouts/docs_page.jinja b/theme/_includes/layouts/docs_page.jinja
index c6a09dc..4a6365d 100644
--- a/theme/_includes/layouts/docs_page.jinja
+++ b/theme/_includes/layouts/docs_page.jinja
@@ -1,39 +1,56 @@
 <!doctype html>
 
-<html lang="en" data-bs-theme="light">
+<html lang="en" data-bs-theme="dark">
   <head>
     <meta charset="utf-8">
-    <title>{{  title  }}</title>
+    <title>{{   title   }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/images/favicon/site.webmanifest">
-    <link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
-    <link rel="shortcut icon" href="/images/favicon/favicon.ico">
-    <meta name="msapplication-TileColor" content="#da532c">
-    <meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
-    <meta name="theme-color" content="#ffffff">
+    <link rel="icon" type="image/png" href="/images/favicon/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/images/favicon/favicon.svg" />
+    <link rel="shortcut icon" href="/images/favicon/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="Flutter Test Goldens" />
+    <link rel="manifest" href="/images/favicon/site.webmanifest" />
+
+    <!-- Open Graph Social Media -->
+    <meta property="og:url" content="https://fluttergoldens.com" />
+    <meta property="og:title" content="Flutter Test Goldens" />
+    <meta property="og:description" content="The best package for writing golden tests." />
+    <meta property="og:image" content="https://fluttergoldens.com/images/branding/social.png" />
+    <meta property="og:type" content="website" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@SuprDeclarative" />
+    <meta name="twitter:url" content="https://fluttergoldens.com" />
+    <meta name="twitter:title" content="Flutter Test Goldens" />
+    <meta name="twitter:description" content="The best package for writing golden tests." />
+    <meta name="twitter:image" content="https://fluttergoldens.com/images/branding/social.png" />
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" type="text/css">
 
-    {{ components.highlightJs() }}
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/obsidian.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/dart.min.js"></script>
+    <script>
+      hljs.highlightAll();
+    </script>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
 
     <link rel="stylesheet" href="/styles/docs_page_layout.css">
-    <link rel="stylesheet" href="/styles/docs_page_layout_light.css">
     <link rel="stylesheet" href="/styles/docs_page_layout_dark.css">
   </head>
 
   <body>
     <nav class="navbar navbar-expand-lg">
       <div class="container">
-        <a class="navbar-brand" href="/"><img src="/images/branding/logo.png" height="32"><span class="name">{{ package.title }}</span></a>
+        <a class="navbar-brand" href="/"><img src="/images/branding/logo.png" height="32"><span class="name">{{  package.title  }}</span></a>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#drawerNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -43,31 +60,27 @@
           <ul class="navbar-nav mb-lg-0 ms-auto align-items-center">
             {% if package.is_on_pub %}
             <li class="nav-item">
-              <a class="nav-link" href="https://pub.dev/documentation/{{ package.name }}/latest/" target="_blank">API Docs</a>
+              <a class="nav-link" href="https://pub.dev/documentation/{{  package.name  }}/latest/" target="_blank">API Docs</a>
             </li>
             {% endif %}
 
             {% if package.github != null %}
             <li class="nav-item">
-              <a href="{{ package.github.url }}" target="_blank"><span class="fa fa-brands fa-github"></span></a>
+              <a href="{{  package.github.url  }}" target="_blank"><span class="fa fa-brands fa-github"></span></a>
             </li>
             {% endif %}
 
             {% if package.discord != null %}
             <li class="nav-item">
-              <a href="{{ package.discord }}" target="_blank"><span class="fa fa-brands fa-discord"></span></a>
+              <a href="{{  package.discord  }}" target="_blank"><span class="fa fa-brands fa-discord"></span></a>
             </li>
             {% endif %}
 
             {% if package.sponsorship != null %}
             <li class="nav-item">
-              <a class="nav-link" href="{{ package.sponsorship }}" target="_blank"><span class="fa fa-dollar-sign"></span></a>
+              <a class="nav-link" href="{{  package.sponsorship  }}" target="_blank"><span class="fa fa-dollar-sign"></span></a>
             </li>
             {% endif %}
-
-            <li class="nav-item">
-              <span id="brightness-button" onclick="toggleBrightness()" class="fa fa-moon"></span>
-            </li>
           </ul>
         </div>
 
@@ -82,7 +95,7 @@
 
     <!-- Offscreen drawer that shows navigation on mobile -->
     <div id="drawerNav" class="drawer-nav offcanvas offcanvas-start">
-      {{ components.navMain() }}
+     {{  components.navMain()  }}
 
       <a type="button" class="exit" data-bs-toggle="offcanvas" data-bs-target="#drawerNav">
         <span class="fa fa-xmark"></span>
@@ -93,23 +106,29 @@
       <div class="row">
         <!-- Main nav menu on left side of screen on desktop -->
         <div class="col col-2 d-none d-lg-block">
-          {{ components.navMain() }}
+         {{  components.navMain()  }}
         </div>
 
         <!-- Page/article content -->
         <main class="page-content col-12 col-lg-10 col-xl-8">
+          {% if headerImage is defined %}
+          <header class="image">
+            <img class="background" src="{{ headerImage }}">
+          </header>
+          {% else %}
           <header>
-            <h1>{{ title }}</h1>
+            <h1>{{  title  }}</h1>
           </header>
+          {% endif %}
 
-          {{  content  }}
+          {{   content   }}
         </main>
 
         <!-- Table of contents for the page/article on desktop -->
         <nav class="table-of-contents col col-2 d-none d-xl-block">
           {% if tableOfContents is defined and tableOfContents.linkCountBeyondLevel(0) > 1 %}
           <div class="table-of-contents">
-            {{ tableOfContents.renderHtmlList(startingLevel = 1) }}
+           {{  tableOfContents.renderHtmlList(startingLevel = 1)  }}
           </div>
           {% endif %}
         </nav>
@@ -127,12 +146,12 @@
       // - not in an "onload" function - because we need this code to
       // run before anything is painted. Otherwise we get a flicker from
       // light mode to dark mode on load.
-      var brightness = localStorage.getItem('brightness');
-      if (brightness === "light" || brightness === null) {
-        goToLightMode();
-      } else {
+      //var brightness = localStorage.getItem('brightness');
+      //if (brightness === "light" || brightness === null) {
+      //  goToLightMode();
+      //} else {
         goToDarkMode();
-      }
+      //}
 
       // Configure the global text search input.
       //docsearch({
@@ -153,35 +172,23 @@
       }
 
       function goToLightMode() {
-        localStorage.setItem('brightness', 'light');
-
         var html = document.getElementsByTagName("html")[0];
         html.setAttribute("data-bs-theme", "light");
 
         // For Algolia Docsearch bar theme
         html.setAttribute("data-theme", "light");
 
-        var button = document.getElementById("brightness-button");
-        button.classList.remove("fa-sun");
-        button.classList.add("fa-moon");
-
-        goToHighlightJsLightMode();
+        localStorage.setItem('brightness', 'light');
       }
 
       function goToDarkMode() {
-        localStorage.setItem('brightness', 'dark');
-
         var html = document.getElementsByTagName("html")[0];
         html.setAttribute("data-bs-theme", "dark");
 
         // For Algolia Docsearch bar theme
         html.setAttribute("data-theme", "dark");
 
-        var button = document.getElementById("brightness-button");
-        button.classList.remove("fa-moon");
-        button.classList.add("fa-sun");
-
-        goToHighlightJsDarkMode();
+        localStorage.setItem('brightness', 'dark');
       }
     </script>
   </body>
diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index 8333b6c..92d926a 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -168,6 +168,7 @@ nav.main {
 
       margin: 0;
       margin-right: 8px;
+      margin-bottom: 48px;
 
       height: $contributorDiameter;
       padding: 0;
@@ -239,16 +240,58 @@ main.page-content {
     padding-bottom: 100px;
 
     text-align: center;
+
+    &.image {
+      position: relative;
+      padding: 0;
+      width: 100%;
+      max-height: 500px;
+      overflow: clip;
+
+      & > img.background {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: 50% 0;
+      }
+    }
   }
 
   h2, h3, h4, h5, h6 {
-    margin-top: 1em;
+    margin-top: 2em;
+  }
+
+  p {
+    margin-bottom: 1.5em;
+  }
+
+  p, li > {
+    code {
+      padding: 3px 6px;
+      background: #7f00a6;
+      border: 1px solid #a218cc;
+      border-radius: 4px;
+
+      color: WHITE;
+    }
+  }
+
+  li {
+    margin-bottom: 1.5em;
+  }
+
+  img {
+    display: block;
+    margin: auto;
   }
 
   pre code {
     margin-top: 1em;
     margin-bottom: 1em;
   }
+
+  font-size: 18px;
+  line-height: 1.8em;
 }
 
 .table-of-contents {
diff --git a/theme/styles/docs_page_layout_dark.scss b/theme/styles/docs_page_layout_dark.scss
index 7b6d440..3867cd2 100644
--- a/theme/styles/docs_page_layout_dark.scss
+++ b/theme/styles/docs_page_layout_dark.scss
@@ -1,3 +1,6 @@
+$backgroundColor: #0a0e12;
+$footerBackgroundColor: #05080a;
+
 $dividerColor: rgba(255, 255, 255, 0.05);
 $standardDividerBorder: 1px solid $dividerColor;
 
@@ -48,7 +51,7 @@ html[data-bs-theme="dark"] {
 
     .link-group {
       ol {
-        border-left: 2px solid #FF8888;
+        border-left: 2px solid #7f00a6;
       }
     }
 
@@ -61,6 +64,10 @@ html[data-bs-theme="dark"] {
     }
   }
 
+  body {
+    background: $backgroundColor;
+  }
+
   main {
     header {
       background: rgba(255, 255, 255, 0.02);
@@ -86,7 +93,7 @@ html[data-bs-theme="dark"] {
   }
 
   footer {
-    background: #202026;
+    background: $footerBackgroundColor;
 
     color: #AAAAAA;
 
diff --git a/theme/styles/docs_page_layout_light.scss b/theme/styles/docs_page_layout_light.scss
deleted file mode 100644
index 1764ce0..0000000
--- a/theme/styles/docs_page_layout_light.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-$lightBackground: WHITE;
-$dividerColor: #EBEBEB;
-
-html[data-bs-theme="light"] {
-  background: $lightBackground;
-
-  .navbar {
-    background: $lightBackground;
-    border-bottom: 1px solid $dividerColor;
-
-    .navbar-brand {
-      .name {
-        color: #333333;
-      }
-    }
-
-    .nav-item {
-      .nav-link.active {
-        color: WHITE;
-      }
-
-      .fa {
-        color: #444444;
-
-        &:hover {
-          color: BLACK;
-        }
-      }
-    }
-  }
-
-  nav.main {
-    ol.organization-links {
-      a {
-        background: rgba(0, 0, 0, 0.02);
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.10);
-        }
-      }
-    }
-
-    .organization-nav-divider {
-      background: $dividerColor;
-    }
-
-    a {
-      color: #666666;
-
-      &:hover {
-        color: #222222;
-      }
-    }
-
-    .link-group {
-      ol {
-        border-left: 2px solid #FF8888;
-      }
-    }
-
-    .contributors {
-      .remaining-count {
-        .bubble {
-          background: #F0F0F0;
-        }
-      }
-    }
-  }
-
-  main {
-    header {
-      background: rgba(0, 0, 0, 0.02);
-
-      color: #222222;
-    }
-  }
-
-  .table-of-contents {
-    ol {
-      border-left: 1px solid #EBEBEB;
-
-      li {
-        a {
-          color: #666666;
-
-          &:hover {
-            color: BLACK;
-          }
-        }
-      }
-    }
-  }
-
-  footer {
-    background: #F8F8F8;
-
-    color: #888888;
-
-    .built-with {
-      a {
-        color: #CCCC00;
-      }
-    }
-  }
-}

From cd3e00b62d6242ee1e0a8be87d59d45496362e93 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Wed, 23 Jul 2025 00:30:43 -0700
Subject: [PATCH 02/12] Combined styles into one file

---
 theme/styles/docs_page_layout.scss      | 107 ++++++++++++++++++++++++
 theme/styles/docs_page_layout_dark.scss | 106 -----------------------
 2 files changed, 107 insertions(+), 106 deletions(-)
 delete mode 100644 theme/styles/docs_page_layout_dark.scss

diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index 92d926a..4a04dc9 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -1,6 +1,113 @@
+$backgroundColor: #0a0e12;
+$footerBackgroundColor: #05080a;
+
+$dividerColor: rgba(255, 255, 255, 0.05);
+$standardDividerBorder: 1px solid $dividerColor;
+
 $contributorDiameter: 32px;
 $contributorRadius: 16px;
 
+html[data-bs-theme="dark"] {
+
+  .navbar {
+    border-bottom: $standardDividerBorder;
+
+    .navbar-brand {
+      .name {
+        color: WHITE;
+      }
+    }
+
+    .nav-item {
+      a, .fa {
+        color: #CCCCCC;
+
+        &:hover {
+          color: WHITE;
+        }
+      }
+    }
+  }
+
+  nav.main {
+    ol.organization-links {
+      a {
+        background: rgba(255, 255, 255, 0.02);
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.10);
+        }
+      }
+    }
+
+    .organization-nav-divider {
+      background: $dividerColor;
+    }
+
+    a {
+      color: #AAAAAA;
+
+      &:hover {
+        color: WHITE;
+      }
+    }
+
+    .link-group {
+      ol {
+        border-left: 2px solid #7f00a6;
+      }
+    }
+
+    .contributors {
+      .remaining-count {
+        .bubble {
+          background: #333333;
+        }
+      }
+    }
+  }
+
+  body {
+    background: $backgroundColor;
+  }
+
+  main {
+    header {
+      background: rgba(255, 255, 255, 0.02);
+
+      color: WHITE;
+    }
+  }
+
+  .table-of-contents {
+    ol {
+      border-left: $standardDividerBorder;
+
+      li {
+        a {
+          color: #CCCCCC;
+
+          &:hover {
+            color: WHITE;
+          }
+        }
+      }
+    }
+  }
+
+  footer {
+    background: $footerBackgroundColor;
+
+    color: #AAAAAA;
+
+    .built-with {
+      a {
+        color: #FFFF00;
+      }
+    }
+  }
+}
+
 .navbar {
   margin-bottom: 24px;
 
diff --git a/theme/styles/docs_page_layout_dark.scss b/theme/styles/docs_page_layout_dark.scss
deleted file mode 100644
index 3867cd2..0000000
--- a/theme/styles/docs_page_layout_dark.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-$backgroundColor: #0a0e12;
-$footerBackgroundColor: #05080a;
-
-$dividerColor: rgba(255, 255, 255, 0.05);
-$standardDividerBorder: 1px solid $dividerColor;
-
-html[data-bs-theme="dark"] {
-
-  .navbar {
-    border-bottom: $standardDividerBorder;
-
-    .navbar-brand {
-      .name {
-        color: WHITE;
-      }
-    }
-
-    .nav-item {
-      a, .fa {
-        color: #CCCCCC;
-
-        &:hover {
-          color: WHITE;
-        }
-      }
-    }
-  }
-
-  nav.main {
-    ol.organization-links {
-      a {
-        background: rgba(255, 255, 255, 0.02);
-
-        &:hover {
-          background: rgba(255, 255, 255, 0.10);
-        }
-      }
-    }
-
-    .organization-nav-divider {
-      background: $dividerColor;
-    }
-
-    a {
-      color: #AAAAAA;
-
-      &:hover {
-        color: WHITE;
-      }
-    }
-
-    .link-group {
-      ol {
-        border-left: 2px solid #7f00a6;
-      }
-    }
-
-    .contributors {
-      .remaining-count {
-        .bubble {
-          background: #333333;
-        }
-      }
-    }
-  }
-
-  body {
-    background: $backgroundColor;
-  }
-
-  main {
-    header {
-      background: rgba(255, 255, 255, 0.02);
-
-      color: WHITE;
-    }
-  }
-
-  .table-of-contents {
-    ol {
-      border-left: $standardDividerBorder;
-
-      li {
-        a {
-          color: #CCCCCC;
-
-          &:hover {
-            color: WHITE;
-          }
-        }
-      }
-    }
-  }
-
-  footer {
-    background: $footerBackgroundColor;
-
-    color: #AAAAAA;
-
-    .built-with {
-      a {
-        color: #FFFF00;
-      }
-    }
-  }
-}

From 058db37fa8c481afa01bf9ac34b1f2db92a9a162 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:09:30 -0700
Subject: [PATCH 03/12] Moved sass variables to a dedicated file

---
 theme/styles/docs_page_layout.scss | 11 ++---------
 theme/styles/theme-variables.scss  |  9 +++++++++
 2 files changed, 11 insertions(+), 9 deletions(-)
 create mode 100644 theme/styles/theme-variables.scss

diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index 4a04dc9..61016ce 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -1,11 +1,4 @@
-$backgroundColor: #0a0e12;
-$footerBackgroundColor: #05080a;
-
-$dividerColor: rgba(255, 255, 255, 0.05);
-$standardDividerBorder: 1px solid $dividerColor;
-
-$contributorDiameter: 32px;
-$contributorRadius: 16px;
+@use 'docs_page_layout';
 
 html[data-bs-theme="dark"] {
 
@@ -54,7 +47,7 @@ html[data-bs-theme="dark"] {
 
     .link-group {
       ol {
-        border-left: 2px solid #7f00a6;
+        border-left: 2px solid $accentColor;
       }
     }
 
diff --git a/theme/styles/theme-variables.scss b/theme/styles/theme-variables.scss
new file mode 100644
index 0000000..33bef24
--- /dev/null
+++ b/theme/styles/theme-variables.scss
@@ -0,0 +1,9 @@
+$backgroundColor: #0a0e12;
+$footerBackgroundColor: #05080a;
+
+$accentColor: #7f00a6;
+$dividerColor: rgba(255, 255, 255, 0.05);
+$standardDividerBorder: 1px solid $dividerColor;
+
+$contributorDiameter: 32px;
+$contributorRadius: 16px;
\ No newline at end of file

From df029f527760d99da8acd081afda04ca43270e19 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:11:11 -0700
Subject: [PATCH 04/12] Fixed bad sass import

---
 theme/styles/docs_page_layout.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index 61016ce..68ff3e4 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -1,4 +1,4 @@
-@use 'docs_page_layout';
+@use 'theme-variables';
 
 html[data-bs-theme="dark"] {
 

From 0240395863d3f175776cc388415ac367065512cd Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:19:34 -0700
Subject: [PATCH 05/12] Tried using a namespace for imported variables to get
 them to work

---
 theme/styles/docs_page_layout.scss | 36 +++++++++++++++---------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index 68ff3e4..d756945 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -1,9 +1,9 @@
-@use 'theme-variables';
+@use 'theme-variables' as vars;
 
 html[data-bs-theme="dark"] {
 
   .navbar {
-    border-bottom: $standardDividerBorder;
+    border-bottom: $var.standardDividerBorder;
 
     .navbar-brand {
       .name {
@@ -34,7 +34,7 @@ html[data-bs-theme="dark"] {
     }
 
     .organization-nav-divider {
-      background: $dividerColor;
+      background: $vars.dividerColor;
     }
 
     a {
@@ -47,7 +47,7 @@ html[data-bs-theme="dark"] {
 
     .link-group {
       ol {
-        border-left: 2px solid $accentColor;
+        border-left: 2px solid $vars.accentColor;
       }
     }
 
@@ -61,7 +61,7 @@ html[data-bs-theme="dark"] {
   }
 
   body {
-    background: $backgroundColor;
+    background: $vars.backgroundColor;
   }
 
   main {
@@ -74,7 +74,7 @@ html[data-bs-theme="dark"] {
 
   .table-of-contents {
     ol {
-      border-left: $standardDividerBorder;
+      border-left: $vars.standardDividerBorder;
 
       li {
         a {
@@ -89,7 +89,7 @@ html[data-bs-theme="dark"] {
   }
 
   footer {
-    background: $footerBackgroundColor;
+    background: $vars.footerBackgroundColor;
 
     color: #AAAAAA;
 
@@ -270,14 +270,14 @@ nav.main {
       margin-right: 8px;
       margin-bottom: 48px;
 
-      height: $contributorDiameter;
+      height: $vars.contributorDiameter;
       padding: 0;
 
       a {
         display: block;
-        width: $contributorDiameter;
-        height: $contributorDiameter;
-        border-radius: $contributorRadius;
+        width: $vars.contributorDiameter;
+        height: $vars.contributorDiameter;
+        border-radius: $vars.contributorRadius;
 
         // Note: We show the contributor photo as a background image because
         //       displaying it as an <img> results in a few extra pixels above
@@ -293,7 +293,7 @@ nav.main {
       margin: 0;
       padding: 0;
 
-      height: $contributorDiameter;
+      height: $vars.contributorDiameter;
 
       .bubble {
         display: block;
@@ -301,19 +301,19 @@ nav.main {
         margin: 0;
         padding: 0;
 
-        width: $contributorDiameter;
-        height: $contributorDiameter;
-        border-radius: $contributorRadius;
+        width: $vars.contributorDiameter;
+        height: $vars.contributorDiameter;
+        border-radius: $vars.contributorRadius;
 
         background: RED;
 
         .count {
           display: block;
-          width: $contributorDiameter;
-          height: $contributorDiameter;
+          width: $vars.contributorDiameter;
+          height: $vars.contributorDiameter;
 
           text-align: center;
-          line-height: $contributorDiameter;
+          line-height: $vars.contributorDiameter;
           vertical-align: middle;
 
           font-size: 10px;

From ae6653bb7b42d254154fc3a1a17180445883a8d0 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:20:40 -0700
Subject: [PATCH 06/12] Fix typo from last vars commit

---
 theme/styles/docs_page_layout.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index d756945..f7a5c06 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -3,7 +3,7 @@
 html[data-bs-theme="dark"] {
 
   .navbar {
-    border-bottom: $var.standardDividerBorder;
+    border-bottom: $vars.standardDividerBorder;
 
     .navbar-brand {
       .name {

From 6a246ee9b66646a5262e378edb50e982f7bc7247 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:22:06 -0700
Subject: [PATCH 07/12] Try using a full project path @use path

---
 theme/styles/docs_page_layout.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index f7a5c06..aaf4e36 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -1,4 +1,4 @@
-@use 'theme-variables' as vars;
+@use 'styles/theme-variables' as vars;
 
 html[data-bs-theme="dark"] {
 

From 3e9463a426603822e3c73efb3b4be75db414e6c8 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:24:06 -0700
Subject: [PATCH 08/12] Fix syntax from '.' to 'vars.$'

---
 theme/styles/docs_page_layout.scss | 34 +++++++++++++++---------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index aaf4e36..b480859 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -3,7 +3,7 @@
 html[data-bs-theme="dark"] {
 
   .navbar {
-    border-bottom: $vars.standardDividerBorder;
+    border-bottom: vars.$standardDividerBorder;
 
     .navbar-brand {
       .name {
@@ -34,7 +34,7 @@ html[data-bs-theme="dark"] {
     }
 
     .organization-nav-divider {
-      background: $vars.dividerColor;
+      background: vars.$dividerColor;
     }
 
     a {
@@ -47,7 +47,7 @@ html[data-bs-theme="dark"] {
 
     .link-group {
       ol {
-        border-left: 2px solid $vars.accentColor;
+        border-left: 2px solid vars.$accentColor;
       }
     }
 
@@ -61,7 +61,7 @@ html[data-bs-theme="dark"] {
   }
 
   body {
-    background: $vars.backgroundColor;
+    background: vars.$backgroundColor;
   }
 
   main {
@@ -74,7 +74,7 @@ html[data-bs-theme="dark"] {
 
   .table-of-contents {
     ol {
-      border-left: $vars.standardDividerBorder;
+      border-left: vars.$standardDividerBorder;
 
       li {
         a {
@@ -89,7 +89,7 @@ html[data-bs-theme="dark"] {
   }
 
   footer {
-    background: $vars.footerBackgroundColor;
+    background: vars.$footerBackgroundColor;
 
     color: #AAAAAA;
 
@@ -270,14 +270,14 @@ nav.main {
       margin-right: 8px;
       margin-bottom: 48px;
 
-      height: $vars.contributorDiameter;
+      height: vars.$contributorDiameter;
       padding: 0;
 
       a {
         display: block;
-        width: $vars.contributorDiameter;
-        height: $vars.contributorDiameter;
-        border-radius: $vars.contributorRadius;
+        width: vars.$contributorDiameter;
+        height: vars.$contributorDiameter;
+        border-radius: vars.$contributorRadius;
 
         // Note: We show the contributor photo as a background image because
         //       displaying it as an <img> results in a few extra pixels above
@@ -293,7 +293,7 @@ nav.main {
       margin: 0;
       padding: 0;
 
-      height: $vars.contributorDiameter;
+      height: vars.$contributorDiameter;
 
       .bubble {
         display: block;
@@ -301,19 +301,19 @@ nav.main {
         margin: 0;
         padding: 0;
 
-        width: $vars.contributorDiameter;
-        height: $vars.contributorDiameter;
-        border-radius: $vars.contributorRadius;
+        width: vars.$contributorDiameter;
+        height: vars.$contributorDiameter;
+        border-radius: vars.$contributorRadius;
 
         background: RED;
 
         .count {
           display: block;
-          width: $vars.contributorDiameter;
-          height: $vars.contributorDiameter;
+          width: vars.$contributorDiameter;
+          height: vars.$contributorDiameter;
 
           text-align: center;
-          line-height: $vars.contributorDiameter;
+          line-height: vars.$contributorDiameter;
           vertical-align: middle;
 
           font-size: 10px;

From e2716f58571f32473aff778fa962cdcc995d3f71 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:25:05 -0700
Subject: [PATCH 09/12] Reverting variable file import to use name with no path

---
 theme/styles/docs_page_layout.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/styles/docs_page_layout.scss b/theme/styles/docs_page_layout.scss
index b480859..94e67e5 100644
--- a/theme/styles/docs_page_layout.scss
+++ b/theme/styles/docs_page_layout.scss
@@ -1,4 +1,4 @@
-@use 'styles/theme-variables' as vars;
+@use 'theme-variables' as vars;
 
 html[data-bs-theme="dark"] {
 

From ff453389fa2516de0085b5c41c11c575ea90cb58 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:50:28 -0700
Subject: [PATCH 10/12] Trying a dedicated theme-overrides.scss file that's
 empty

---
 theme/styles/theme-overrides.scss |  0
 theme/styles/theme-variables.scss | 16 +++++++++-------
 2 files changed, 9 insertions(+), 7 deletions(-)
 create mode 100644 theme/styles/theme-overrides.scss

diff --git a/theme/styles/theme-overrides.scss b/theme/styles/theme-overrides.scss
new file mode 100644
index 0000000..e69de29
diff --git a/theme/styles/theme-variables.scss b/theme/styles/theme-variables.scss
index 33bef24..611f13d 100644
--- a/theme/styles/theme-variables.scss
+++ b/theme/styles/theme-variables.scss
@@ -1,9 +1,11 @@
-$backgroundColor: #0a0e12;
-$footerBackgroundColor: #05080a;
+@import 'theme-overrides';
 
-$accentColor: #7f00a6;
-$dividerColor: rgba(255, 255, 255, 0.05);
-$standardDividerBorder: 1px solid $dividerColor;
+$backgroundColor: #0a0e12 !default;
+$footerBackgroundColor: #05080a !default;
 
-$contributorDiameter: 32px;
-$contributorRadius: 16px;
\ No newline at end of file
+$accentColor: #7f00a6 !default;
+$dividerColor: rgba(255, 255, 255, 0.05) !default;
+$standardDividerBorder: 1px solid $dividerColor !default;
+
+$contributorDiameter: 32px !default;
+$contributorRadius: 16px !default;
\ No newline at end of file

From ecd873ff10de537aa0664212ff0b86c54cec0606 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:51:26 -0700
Subject: [PATCH 11/12] Add import file extension

---
 theme/styles/theme-variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme/styles/theme-variables.scss b/theme/styles/theme-variables.scss
index 611f13d..ecd4a80 100644
--- a/theme/styles/theme-variables.scss
+++ b/theme/styles/theme-variables.scss
@@ -1,4 +1,4 @@
-@import 'theme-overrides';
+@import 'theme-overrides.scss';
 
 $backgroundColor: #0a0e12 !default;
 $footerBackgroundColor: #05080a !default;

From d2377502546f501e97e4d4815b764247a0f2da00 Mon Sep 17 00:00:00 2001
From: Matt Carroll <matthew-carroll@users.noreply.github.com>
Date: Thu, 24 Jul 2025 00:54:24 -0700
Subject: [PATCH 12/12] Remove extension, it shouldn't be needed, that's not
 the problem

---
 theme/styles/theme-overrides.scss | 1 +
 theme/styles/theme-variables.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/theme/styles/theme-overrides.scss b/theme/styles/theme-overrides.scss
index e69de29..b011ca5 100644
--- a/theme/styles/theme-overrides.scss
+++ b/theme/styles/theme-overrides.scss
@@ -0,0 +1 @@
+// Intentionally left empty to be filled by projects.
\ No newline at end of file
diff --git a/theme/styles/theme-variables.scss b/theme/styles/theme-variables.scss
index ecd4a80..fd97f68 100644
--- a/theme/styles/theme-variables.scss
+++ b/theme/styles/theme-variables.scss
@@ -1,4 +1,4 @@
-@import 'theme-overrides.scss';
+@import "theme-overrides";
 
 $backgroundColor: #0a0e12 !default;
 $footerBackgroundColor: #05080a !default;