diff --git a/.github/workflows/test-lp.yml b/.github/workflows/test-lp.yml
index e4ca1204d8..ce3129ffc7 100644
--- a/.github/workflows/test-lp.yml
+++ b/.github/workflows/test-lp.yml
@@ -19,6 +19,8 @@ jobs:
       - name: Run hugo command to test site builds
         run: |
           hugo
+      - name: Test theme preference behavior
+        run: node --test tools/tests/theme-preference.test.mjs
       - name: Get all changed markdown files
         id: changed-markdown-files
         uses: tj-actions/changed-files@v46
diff --git a/assets/css/cross-page.css b/assets/css/cross-page.css
index 529aa47b2a..735166630c 100644
--- a/assets/css/cross-page.css
+++ b/assets/css/cross-page.css
@@ -178,6 +178,28 @@ arm-top-navigation:not(:defined) {
     min-height: 60px;
 }
 
+.skip-link {
+    position: fixed;
+    top: 0;
+    left: 1rem;
+    z-index: 20000;
+    padding: 0.75rem 1rem;
+    color: #ffffff;
+    background: var(--ads-ui-ink-100, #080225);
+    border: 2px solid var(--ads-brand-horizon-blue, #0057ff);
+    border-radius: 0 0 4px 4px;
+    transform: translateY(-120%);
+    transition: transform 120ms ease;
+}
+
+.skip-link:focus,
+.skip-link:focus-visible {
+    color: #ffffff;
+    transform: translateY(0);
+    outline: 3px solid var(--ads-brand-horizon-blue, #0057ff);
+    outline-offset: 2px;
+}
+
 /* Fix global nav height */
 /* The arm-global-web-components script renders a position:fixed nav (0 flow space)
    and may inject a 50px sub-navigation bar in flow */
diff --git a/assets/css/home.css b/assets/css/home.css
index 90b2913a89..cbb633f132 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -216,6 +216,10 @@ table.contributor-table tbody {
     background-color: var(--ads-ui-ink-90);
 }
 
+.homepage-license {
+    color: #A3A8AE;
+}
+
 
 
 
diff --git a/assets/css/light-mode.css b/assets/css/light-mode.css
new file mode 100644
index 0000000000..0c45739133
--- /dev/null
+++ b/assets/css/light-mode.css
@@ -0,0 +1,478 @@
+html[theme='light'] {
+    color-scheme: light;
+    --learn-background: var(--ads-ui-gray-05, #f9f9f9);
+    --learn-surface: #ffffff;
+    --learn-surface-muted: var(--ads-ui-gray-10, #f0f0f0);
+    --learn-border: var(--ads-ui-gray-40, #d4d4d4);
+    --learn-border-strong: var(--ads-ui-gray-60, #a9a9a9);
+    --learn-text: var(--ads-brand-arm-ink, #080225);
+    --learn-text-muted: var(--ads-ui-ink-65, #484848);
+    --learn-link: var(--ads-brand-horizon-blue, #0057ff);
+    --learn-link-hover: var(--ads-ui-blue-105, #004ee6);
+    --learn-accent: var(--ads-brand-horizon-blue, #0057ff);
+    --learn-accent-hover: var(--ads-ui-blue-105, #004ee6);
+    --learn-accent-soft: var(--ads-ui-blue-10, #e6eeff);
+    --learn-brand-gradient: linear-gradient(115deg, #0057ff 0%, #3379ff 58%, #80abff 100%);
+    --learn-shadow: 0 10px 30px rgba(8, 2, 37, 0.08);
+    --learn-shadow-hover: 0 18px 42px rgba(0, 87, 255, 0.18);
+
+    --ads-color: var(--learn-text);
+    --ads-heading-color: var(--learn-text);
+    --ads-link-color: var(--learn-link);
+    --ads-table-border-color: var(--learn-border);
+}
+
+html[theme='dark'] {
+    color-scheme: dark;
+}
+
+html[theme='light'] body {
+    color: var(--learn-text);
+    background: var(--learn-background);
+    background-image: none;
+}
+
+html[theme='light'] #global-nav-height-fixer {
+    background: #ffffff;
+    background-color: #ffffff;
+}
+
+html[theme='light'] body.home-page {
+    background-image:
+        radial-gradient(circle at 8% 8%, rgba(0, 87, 255, 0.1), transparent 25rem),
+        radial-gradient(circle at 92% 20%, rgba(128, 171, 255, 0.24), transparent 31rem),
+        linear-gradient(180deg, #ffffff 0, var(--learn-background) 34rem);
+    background-repeat: no-repeat;
+}
+
+html[theme='light'] a {
+    color: var(--learn-link);
+}
+
+html[theme='light'] a:hover {
+    color: var(--learn-link-hover);
+}
+
+html[theme='light'] ads-button {
+    --ads-button-background-color-primary: var(--learn-accent);
+    --ads-button-background-color-primary-hover: var(--learn-accent-hover);
+    --ads-button-border-color-primary: var(--learn-accent);
+    --ads-button-border-color-primary-hover: var(--learn-accent-hover);
+    --ads-button-color-primary: #ffffff;
+    --ads-button-color-primary-hover: #ffffff;
+    --ads-button-color-secondary-hover: var(--learn-link-hover);
+    --ads-button-color-tertiary-hover: var(--learn-link-hover);
+}
+
+html[theme='light'] ads-cta-button {
+    --ads-cta-button-background-color-primary: var(--learn-accent);
+    --ads-cta-button-background-color-primary-hover: var(--learn-accent-hover);
+    --ads-cta-button-border-color-primary: var(--learn-accent);
+    --ads-cta-button-border-color-primary-hover: var(--learn-accent-hover);
+    --ads-cta-button-color-primary: #ffffff;
+    --ads-cta-button-color-primary-hover: #ffffff;
+    --ads-cta-button-color-secondary-hover: var(--learn-link-hover);
+    --ads-cta-button-color-tertiary-hover: var(--learn-link-hover);
+}
+
+html[theme='light'] ads-cta-link {
+    --ads-cta-link-color-hover: var(--learn-link-hover);
+}
+
+html[theme='light'] ads-tag {
+    --ads-tag-color-hover: var(--learn-link-hover);
+}
+
+html[theme='light'] ads-search {
+    --ads-search-background-color: var(--learn-surface);
+    --ads-search-input-background-color: var(--learn-surface);
+    --ads-search-input-background-color-hover: var(--learn-surface);
+    --ads-search-input-background-color-fill-hover: var(--learn-surface);
+    --ads-search-border-color: var(--learn-border-strong);
+    --ads-search-border-color-hover: var(--learn-accent);
+    --ads-search-border-color-focus: var(--learn-accent);
+    --ads-search-input-color: var(--learn-text);
+    --ads-search-input-color-focus: var(--learn-text);
+    --ads-search-input-placeholder-color: var(--learn-text-muted);
+    --ads-search-icon-color: var(--learn-text-muted);
+    --ads-search-button-background-color: var(--learn-accent);
+    --ads-search-button-background-color-hover: var(--learn-accent-hover);
+    --ads-search-button-background-color-focus: var(--learn-accent-hover);
+    --ads-search-button-color: #ffffff;
+    --ads-search-button-color-hover: #ffffff;
+    --ads-search-button-color-focus: #ffffff;
+}
+
+html[theme='light'] input[type='submit']:hover {
+    color: #ffffff;
+}
+
+html[theme='light'] #main {
+    color: var(--learn-text);
+}
+
+html[theme='light'] #only-breadcrumb-masthead {
+    background: var(--learn-surface);
+}
+
+html[theme='light'] #expanded-masthead.u-bg-color-ads-ui-violet-90 {
+    background-color: var(--learn-accent) !important;
+    background-image: none !important;
+    border-bottom-color: var(--learn-accent-hover);
+}
+
+html[theme='light'] #expanded-masthead #breadcrumb-element {
+    --ads-breadcrumbs-color: #f3f3f3 !important;
+    --ads-breadcrumbs-link-color: #f3f3f3 !important;
+    --ads-breadcrumbs-link-color-visited: #f3f3f3 !important;
+    --ads-breadcrumbs-link-color-hover: #ffffff !important;
+}
+
+html[theme='light'] div.content-box {
+    position: relative;
+    overflow: hidden;
+    border-color: var(--learn-border);
+    border-radius: 8px;
+    background: var(--learn-surface);
+    box-shadow: var(--learn-shadow);
+}
+
+html[theme='light'] div.content-box::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 3px;
+    background: var(--learn-brand-gradient);
+    content: '';
+}
+
+html[theme='light'] div.markdown-content-div,
+html[theme='light'] div.markdown-content-div p,
+html[theme='light'] div.markdown-content-div li {
+    color: var(--learn-text);
+}
+
+html[theme='light'] .u-text-color-arm-light-grey,
+html[theme='light'] .u-text-color-arm-light-grey-alt,
+html[theme='light'] .u-text-color-arm-dark-grey,
+html[theme='light'] .u-text-color-arm-grey {
+    color: var(--learn-text-muted) !important;
+}
+
+html[theme='light'] div.markdown-content-div > table,
+html[theme='light'] div.markdown-content-div > table tbody,
+html[theme='light'] .normal-horizontal-tabs table tbody {
+    background: var(--learn-surface);
+}
+
+html[theme='light'] div.markdown-content-div table th,
+html[theme='light'] .normal-horizontal-tabs table thead th {
+    color: var(--learn-text);
+    background: var(--learn-surface-muted);
+}
+
+html[theme='light'] div.markdown-content-div table th,
+html[theme='light'] div.markdown-content-div table td,
+html[theme='light'] .normal-horizontal-tabs table th,
+html[theme='light'] .normal-horizontal-tabs table td {
+    border-color: var(--learn-border);
+}
+
+html[theme='light'] code:not([class*='language-']) {
+    color: #7a2e00;
+    background: #f2ede8;
+}
+
+html[theme='light'] pre[class*='language-'] a.token.url-link {
+    color: var(--learn-lilac);
+}
+
+html[theme='light'] pre[class*='language-'] a.token.url-link:hover {
+    color: #e5d8ff;
+}
+
+html[theme='light'] ads-card.notice-callout {
+    --ads-card-background-color: var(--learn-accent-soft);
+    --ads-card-border-color: var(--learn-accent);
+    --ads-card-border-color-hover: var(--learn-accent-hover);
+}
+
+html[theme='light'] .normal-tabpane {
+    border: 1px solid var(--learn-border);
+    border-radius: 6px;
+    background: var(--learn-surface);
+    --ads-horizontal-tabs-navigation-background-color: var(--learn-surface);
+}
+
+html[theme='light'] .normal-horizontal-tabs {
+    --ads-horizontal-tabs-tab-color: var(--learn-text-muted);
+    --ads-horizontal-tabs-tab-color-active: var(--learn-accent);
+    --ads-horizontal-tabs-tab-color-hover: var(--learn-link-hover);
+    --ads-horizontal-tabs-underline-color: var(--learn-accent);
+    --ads-horizontal-tabs-tab-content-background-color: var(--learn-surface);
+}
+
+html[theme='light'] .tab-row,
+html[theme='light'] .tab-row.active {
+    background: transparent;
+}
+
+html[theme='light'] .tab-right-card {
+    border-color: var(--learn-border);
+    border-radius: 8px;
+    background: var(--learn-surface);
+    box-shadow: 0 2px 8px rgba(23, 36, 45, 0.05);
+    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
+}
+
+html[theme='light'] .tab-right-card > h6 {
+    color: var(--learn-text-muted);
+}
+
+html[theme='light'] .tab-right-card.active {
+    border-color: var(--learn-accent);
+    background: var(--learn-accent-soft);
+    box-shadow: inset 4px 0 0 var(--learn-accent), 0 8px 20px rgba(0, 87, 255, 0.12);
+}
+
+html[theme='light'] .tab-right-card.active > h6 {
+    color: var(--learn-link-hover);
+    font-weight: 700;
+}
+
+html[theme='light'] .tab-row.inactive:hover,
+html[theme='light'] .tab-row.inactive:hover .tab-right-card {
+    border-color: var(--ads-ui-blue-50, #80abff);
+    background: var(--learn-accent-soft);
+}
+
+html[theme='light'] .tab-row.inactive:hover .tab-right-card {
+    transform: translateX(3px);
+}
+
+html[theme='light'] .tab-row.inactive:hover h6 {
+    color: var(--learn-link-hover);
+}
+
+html[theme='light'] div.github-div {
+    border-color: var(--learn-border);
+    border-radius: 6px;
+    background: var(--learn-surface);
+}
+
+html[theme='light'] p.github-link {
+    color: var(--learn-link);
+}
+
+html[theme='light'] p.github-link:hover {
+    color: var(--learn-link-hover);
+}
+
+html[theme='light'] .pagefind-ui__search-input:hover,
+html[theme='light'] .pagefind-ui__search-input:focus,
+html[theme='light'] .pagefind-ui__button:hover,
+html[theme='light'] .pagefind-ui__button:focus,
+html[theme='light'] .pagefind-ui__result-link:hover {
+    color: var(--learn-link-hover) !important;
+}
+
+html[theme='light'] .pagefind-ui__search-input:hover::placeholder,
+html[theme='light'] .pagefind-ui__search-input:focus::placeholder {
+    color: var(--learn-text-muted) !important;
+}
+
+html[theme='light'] div.content-head-mobile,
+html[theme='light'] .content-individual-mobile,
+html[theme='light'] div#facets-background {
+    border-color: var(--learn-border);
+    background: var(--learn-surface);
+}
+
+html[theme='light'] .content-individual-mobile.active {
+    border-color: var(--learn-accent);
+    background: var(--learn-accent-soft);
+}
+
+html[theme='light'] ads-card.path-card,
+html[theme='light'] ads-card.tool-card,
+html[theme='light'] ads-card.module-card {
+    --ads-card-background-color: var(--learn-surface);
+    --ads-card-background-color-hover: var(--learn-accent-soft);
+    --ads-card-border-color: var(--learn-border);
+    --ads-card-border-color-hover: var(--learn-accent);
+    --ads-card-box-shadow: 0 3px 12px rgba(23, 36, 45, 0.06);
+    --ads-card-box-shadow-hover: var(--learn-shadow-hover);
+}
+
+html[theme='light'] ads-card.path-card.featured-path-card ads-card-content::before {
+    background: var(--learn-brand-gradient);
+    opacity: 0.65;
+}
+
+html[theme='light'] ads-card.path-card:not(.featured-path-card) ads-card-content,
+html[theme='light'] ads-card.tool-card ads-card-content,
+html[theme='light'] ads-card.module-card ads-card-content {
+    position: relative;
+    overflow: hidden;
+}
+
+html[theme='light'] ads-card.path-card:not(.featured-path-card) ads-card-content::after,
+html[theme='light'] ads-card.tool-card ads-card-content::after,
+html[theme='light'] ads-card.module-card ads-card-content::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 3px;
+    background: var(--learn-brand-gradient);
+    opacity: 0.55;
+    content: '';
+    transition: opacity 180ms ease;
+}
+
+html[theme='light'] ads-card.path-card:not(.featured-path-card):hover ads-card-content::after,
+html[theme='light'] ads-card.tool-card:hover ads-card-content::after,
+html[theme='light'] ads-card.module-card:hover ads-card-content::after {
+    opacity: 1;
+}
+
+html[theme='light'] .learning-path-title,
+html[theme='light'] .basics-title,
+html[theme='light'] ads-card.tool-card p {
+    color: var(--learn-link-hover);
+}
+
+html[theme='light'] .pinned-featured-label {
+    color: var(--learn-link-hover);
+}
+
+html[theme='light'] .pinned-inline-icon {
+    color: var(--learn-accent);
+}
+
+html[theme='light'] .basics-title:hover,
+html[theme='light'] ads-card.path-card:hover .learning-path-title,
+html[theme='light'] ads-card.path-card:hover .pinned-inline-icon,
+html[theme='light'] ads-card.path-card:hover .pinned-featured-label,
+html[theme='light'] ads-card.tool-card:hover p,
+html[theme='light'] ads-card.multi-install-card:hover .multi-tool-selection-title,
+html[theme='light'] .module-card-a:hover,
+html[theme='light'] .social-icons a:hover,
+html[theme='light'] #tag-clear-btn:hover,
+html[theme='light'] #reset-demo-txt:hover {
+    color: var(--learn-link-hover);
+}
+
+html[theme='light'] .share-icon:hover {
+    fill: var(--learn-link-hover);
+}
+
+html[theme='light'] .card-subject,
+html[theme='light'] .card-date,
+html[theme='light'] .module-card-subtitle,
+html[theme='light'] #tag-preface {
+    color: var(--learn-text-muted);
+}
+
+html[theme='light'] .learning-path-subtitle,
+html[theme='light'] .tool-card-subtitle,
+html[theme='light'] .card-description,
+html[theme='light'] .filter-facet,
+html[theme='light'] .homepage-top-desc,
+html[theme='light'] .homepage-top-desc p {
+    color: var(--learn-text-muted) !important;
+}
+
+html[theme='light'] ads-expansion-panel.learning-path-filters {
+    --ads-expansion-panel-border-color: var(--learn-border);
+    --ads-expansion-panel-content-background-color: var(--learn-surface);
+    --ads-expansion-panel-toggle-background-color: var(--learn-surface);
+    --ads-expansion-panel-toggle-background-color-hover: var(--learn-surface-muted);
+}
+
+html[theme='light'] .filter-facet {
+    --ads-tag-background-color: var(--learn-surface);
+    --ads-tag-background-color-hover: var(--learn-accent-soft);
+    --ads-tag-border-color: 1px solid var(--learn-border-strong);
+    --ads-tag-border-color-hover: 1px solid var(--learn-accent);
+    --ads-tag-color: var(--learn-text-muted);
+    --ads-tag-color-hover: var(--learn-link-hover);
+}
+
+html[theme='light'] .main-topic-card {
+    position: relative;
+    overflow: hidden;
+    border-color: var(--learn-border);
+    background: var(--learn-surface);
+    box-shadow: var(--learn-shadow);
+}
+
+html[theme='light'] .main-topic-card::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 4px;
+    background: var(--learn-brand-gradient);
+    content: '';
+    transform: scaleX(0.34);
+    transform-origin: left;
+    transition: transform 220ms ease;
+}
+
+html[theme='light'] .main-topic-card:hover {
+    border-color: var(--learn-accent);
+    background: var(--learn-accent-soft);
+    box-shadow: var(--learn-shadow-hover);
+}
+
+html[theme='light'] .main-topic-card:hover::before {
+    transform: scaleX(1);
+}
+
+html[theme='light'] .main-topic-title {
+    color: var(--learn-link-hover);
+}
+
+html[theme='light'] .main-topic-card:hover .main-topic-title {
+    color: var(--learn-link-hover);
+}
+
+html[theme='light'] .main-topic-card img[src*='main-topic-icons'] {
+    filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(7492%) hue-rotate(222deg) brightness(102%) contrast(106%);
+}
+
+html[theme='light'] .main-topic-card .main-topic-subtitle,
+html[theme='light'] .homepage-top-desc > p,
+html[theme='light'] .homepage-dynamic-bottom-spacing + p {
+    color: var(--learn-text-muted) !important;
+}
+
+html[theme='light'] #homepage-header {
+    color: var(--learn-text);
+    background: linear-gradient(105deg, var(--learn-text) 4%, var(--learn-accent) 58%, #3379ff 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 12px 24px rgba(0, 87, 255, 0.14));
+}
+
+html[theme='light'] body.home-page #title-div {
+    position: relative;
+    isolation: isolate;
+}
+
+html[theme='light'] body.home-page .homepage-license {
+    color: var(--learn-text-muted);
+}
+
+html[theme='light'] table.contributor-table tbody {
+    background: var(--learn-surface);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html[theme='light'] .main-topic-card,
+    html[theme='light'] .main-topic-card::before,
+    html[theme='light'] .tab-right-card,
+}
diff --git a/themes/arm-design-system-hugo-theme/layouts/_default/baseof.html b/themes/arm-design-system-hugo-theme/layouts/_default/baseof.html
index fc007bd137..d0f820349d 100644
--- a/themes/arm-design-system-hugo-theme/layouts/_default/baseof.html
+++ b/themes/arm-design-system-hugo-theme/layouts/_default/baseof.html
@@ -14,7 +14,7 @@
            {{ partialCached "math.html" . }}
         {{ end }}
     </head>
-    <body>
+    <body class="{{ if .IsHome }}home-page{{ end }}">
         <a href="#main" class="skip-link">Skip to main content</a>
 
         {{partial "header/nav-masthead.html" .}}
diff --git a/themes/arm-design-system-hugo-theme/layouts/index.html b/themes/arm-design-system-hugo-theme/layouts/index.html
index fff8f69277..e762959911 100644
--- a/themes/arm-design-system-hugo-theme/layouts/index.html
+++ b/themes/arm-design-system-hugo-theme/layouts/index.html
@@ -103,7 +103,7 @@ <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">AI</h3>
 
 <div class="c-row u-margin-top-3">
     <div class="c-col">
-        <p style="text-align: center; margin: 0 auto; margin-top: 16px; color: #A3A8AE;">All content is covered by the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Creative Commons License{{partial "general-formatting/external-link.html"}}</a>. Learning Paths may contain AI-generated content.</p>
+        <p class="homepage-license" style="text-align: center; margin: 0 auto; margin-top: 16px;">All content is covered by the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Creative Commons License{{partial "general-formatting/external-link.html"}}</a>. Learning Paths may contain AI-generated content.</p>
     </div>
 </div>
 
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html b/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html
index 30fa11444c..447c1ed66b 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html
@@ -20,6 +20,7 @@
 <!-- All pages -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Set the viewport appropriatly -->
+<script src="/js/theme-preference.js"></script>
     <!-- verify site ownership for Google -->
 <meta name="google-site-verification" content="BTfVb1OscFD-pN_bYZaTGmfx2_K3S1EbzvdKPepntvk" />
     <!-- add cannonical link to reinforce this page's validity for search engines, with a trailing / on the URL name-->
@@ -55,12 +56,9 @@
   integrity="sha384-caAG7P/HrHxcdQa2gTEfvZYGPLQk7yRwVdvtRn6sa3TRKzcAyY1LMvObXKGhwFNb"
   crossorigin="anonymous">
 </script>
-    <!-- Arm Header & Footer loading. Local development uses the test bundle;
-         production defaults to stable app.js unless a deployment explicitly overrides it. -->
+    <!-- Arm Header & Footer loading. Use the same DevHub bundle locally and in production
+         unless a deployment explicitly overrides it. -->
 {{ $globalWebComponentsURL := .Site.Params.global_web_components_url | default "https://www.arm.com/arm-global-web-components/devhub/app.js" }}
-{{ if and hugo.IsServer (not .Site.Params.global_web_components_url) }}
-  {{ $globalWebComponentsURL = "https://www.arm.com/arm-global-web-components/devhub/test.js" }}
-{{ end }}
 <script
   type="text/javascript"
   src="{{ $globalWebComponentsURL }}"
@@ -140,3 +138,6 @@
         | resources.Concat "css/mini_migration.css" | minify | fingerprint  }}
     <link rel="stylesheet" href="{{ $css_migration.Permalink }}">
 {{end}}
+
+{{ $css_light_mode := resources.Get "css/light-mode.css" | minify | fingerprint }}
+<link rel="stylesheet" href="{{ $css_light_mode.RelPermalink }}" integrity="{{ $css_light_mode.Data.Integrity }}">
diff --git a/themes/arm-design-system-hugo-theme/static/js/authentication.js b/themes/arm-design-system-hugo-theme/static/js/authentication.js
index 98e7f915ca..3fcb571513 100644
--- a/themes/arm-design-system-hugo-theme/static/js/authentication.js
+++ b/themes/arm-design-system-hugo-theme/static/js/authentication.js
@@ -291,10 +291,6 @@ document.addEventListener('arm-account-signin', (event) => {
 });
 
 document.addEventListener("arm-top-navigation-ready", function (e) {
-  // Need to reset theme as arm-top-navigation may override it
-  const htmlElement = document.documentElement; 
-  htmlElement.setAttribute("theme", "dark"); 
-
   renderAuthInTopNav();
 });
 
diff --git a/themes/arm-design-system-hugo-theme/static/js/globalVarsandPreferences.js b/themes/arm-design-system-hugo-theme/static/js/globalVarsandPreferences.js
index 055dfdb462..a3775bc7af 100644
--- a/themes/arm-design-system-hugo-theme/static/js/globalVarsandPreferences.js
+++ b/themes/arm-design-system-hugo-theme/static/js/globalVarsandPreferences.js
@@ -1,42 +1,40 @@
-var digitalData={};
+var digitalData = {};
 
 
 (() => {
-      // Always check local storage to keep these attributes constant:
-        // Theme  (light, dark)
-        // Width  (is-full-width)
-        // Height (expanded-masthead and contextual data)
-    	//Check Storage. Keep user preference on page reload
-
-
-
-	if (localStorage.getItem('theme')=='dark') {
-    document.querySelector('html').setAttribute('theme', 'dark');
-    //document.getElementById('prism-code-theme').href='/css/prism-dark.css';
-	}
-	else if (localStorage.getItem('theme')=='light') {
-    document.querySelector('html').setAttribute('theme', 'light');
-    //document.getElementById('prism-code-theme').href='/css/prism-light.css';
-  }
-
-
-
-    if (localStorage.getItem('smallerWidth')) {
-        document.getElementById("all-content-div").classList.remove("is-full-width");
-        document.getElementById("all-content-div-margined").classList.remove("u-margin-left-2");
-        document.getElementById("all-content-div-margined").classList.remove("u-margin-right-2");
-	} 
-  if (localStorage.getItem('fullHeight')) {
-    document.getElementById('global-nav-example-default').contextualData = []; // Hide seoncary nav on Global Nav   
-    document.getElementById('global-nav-example-default').contextualIcons = []; // Hide seoncary nav on Global Nav         
-    document.getElementById("expanded-masthead").setAttribute('hidden',true);  // Hide title
-    document.getElementById("arm-footer").setAttribute('hidden',true);      // Hide footer
-    document.getElementById("only-breadcrumb-masthead").removeAttribute('hidden'); // Show just breadcrumbs
-  } 
-
-
-  })();
-
-
+    function hasStoredPreference(name) {
+        try {
+            return localStorage.getItem(name) !== null;
+        } catch (_) {
+            return false;
+        }
+    }
+
+    if (hasStoredPreference('smallerWidth')) {
+        const main = document.getElementById('main');
+        const content = document.getElementById('all-content-div-margined');
+
+        if (main) main.classList.remove('is-full-width');
+        if (content) {
+            content.classList.remove('u-margin-left-2');
+            content.classList.remove('u-margin-right-2');
+        }
+    }
+
+    if (hasStoredPreference('fullHeight')) {
+        const globalNavigation = document.getElementById('global-nav-example-default');
+        const expandedMasthead = document.getElementById('expanded-masthead');
+        const footer = document.getElementById('arm-footer');
+        const breadcrumbMasthead = document.getElementById('only-breadcrumb-masthead');
+
+        if (globalNavigation) {
+            globalNavigation.contextualData = [];
+            globalNavigation.contextualIcons = [];
+        }
+        if (expandedMasthead) expandedMasthead.setAttribute('hidden', true);
+        if (footer) footer.setAttribute('hidden', true);
+        if (breadcrumbMasthead) breadcrumbMasthead.removeAttribute('hidden');
+    }
+})();
 
 
diff --git a/themes/arm-design-system-hugo-theme/static/js/theme-preference.js b/themes/arm-design-system-hugo-theme/static/js/theme-preference.js
new file mode 100644
index 0000000000..99a01f2f27
--- /dev/null
+++ b/themes/arm-design-system-hugo-theme/static/js/theme-preference.js
@@ -0,0 +1,83 @@
+(function () {
+    'use strict';
+
+    var root = document.documentElement;
+    var storageKey = 'theme';
+    var activeTheme = readStoredTheme() || 'dark';
+
+    function normalizeTheme(theme) {
+        return theme === 'light' ? 'light' : 'dark';
+    }
+
+    function readStoredTheme() {
+        try {
+            var storedTheme = window.localStorage.getItem(storageKey);
+            return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : null;
+        } catch (_) {
+            return null;
+        }
+    }
+
+    function storeTheme(theme) {
+        try {
+            window.localStorage.setItem(storageKey, theme);
+        } catch (_) {
+            // Theme switching still works when storage is unavailable.
+        }
+    }
+
+    function updateNavigation(theme) {
+        var navigation = document.querySelector('arm-top-navigation');
+
+        if (navigation) {
+            navigation.setAttribute('theme', theme);
+        }
+
+        if (typeof window.CustomEvent === 'function') {
+            document.dispatchEvent(new window.CustomEvent('arm-footer-theme', {
+                detail: theme === 'light',
+            }));
+        }
+    }
+
+    function notifyThemeChange(theme) {
+        if (typeof window.CustomEvent !== 'function') return;
+
+        document.dispatchEvent(new window.CustomEvent('learn-theme-change', {
+            detail: { theme: theme },
+        }));
+    }
+
+    function applyTheme(theme, persist, notify, updateGlobalComponents) {
+        activeTheme = normalizeTheme(theme);
+        root.setAttribute('theme', activeTheme);
+        root.style.colorScheme = activeTheme;
+
+        if (persist) storeTheme(activeTheme);
+        if (updateGlobalComponents) updateNavigation(activeTheme);
+        if (notify) notifyThemeChange(activeTheme);
+    }
+
+    function initializeNavigation() {
+        applyTheme(activeTheme, false, false, true);
+    }
+
+    applyTheme(activeTheme, false, false, false);
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initializeNavigation);
+    } else {
+        initializeNavigation();
+    }
+
+    document.addEventListener('arm-top-navigation-ready', initializeNavigation);
+
+    document.addEventListener('arm-theme', function (event) {
+        applyTheme(event.detail === true ? 'light' : 'dark', true, true, false);
+    });
+
+    window.addEventListener('storage', function (event) {
+        if (event.key !== storageKey) return;
+        applyTheme(event.newValue === 'light' ? 'light' : 'dark', false, true, true);
+    });
+})();
diff --git a/tools/tests/theme-preference.test.mjs b/tools/tests/theme-preference.test.mjs
new file mode 100644
index 0000000000..36e5423b2b
--- /dev/null
+++ b/tools/tests/theme-preference.test.mjs
@@ -0,0 +1,168 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+import vm from 'node:vm';
+
+const scriptPath = new URL('../../themes/arm-design-system-hugo-theme/static/js/theme-preference.js', import.meta.url);
+const script = await readFile(scriptPath, 'utf8');
+
+function createElement() {
+    const attributes = new Map();
+
+    return {
+        style: {},
+        getAttribute(name) {
+            return attributes.has(name) ? attributes.get(name) : null;
+        },
+        setAttribute(name, value) {
+            attributes.set(name, String(value));
+        },
+    };
+}
+
+function createEnvironment(options = {}) {
+    const root = createElement();
+    const navigation = createElement();
+    const documentListeners = new Map();
+    const windowListeners = new Map();
+    const dispatchedEvents = [];
+    const storedValues = new Map();
+    const shadowElements = new Map();
+
+    if (options.hasNavigationShadow) {
+        navigation.shadowRoot = {
+            appendChild(element) {
+                shadowElements.set(element.id, element);
+            },
+            querySelector(selector) {
+                return selector.startsWith('#') ? shadowElements.get(selector.slice(1)) || null : null;
+            },
+        };
+    }
+
+    if (options.storedTheme !== undefined) storedValues.set('theme', options.storedTheme);
+
+    const document = {
+        documentElement: root,
+        readyState: options.readyState || 'complete',
+        addEventListener(name, handler) {
+            documentListeners.set(name, handler);
+        },
+        dispatchEvent(event) {
+            dispatchedEvents.push(event);
+        },
+        createElement() {
+            return createElement();
+        },
+        querySelector(selector) {
+            return selector === 'arm-top-navigation' ? navigation : null;
+        },
+    };
+
+    const localStorage = {
+        getItem(key) {
+            if (options.throwOnRead) throw new Error('Storage read blocked');
+            return storedValues.has(key) ? storedValues.get(key) : null;
+        },
+        setItem(key, value) {
+            if (options.throwOnWrite) throw new Error('Storage write blocked');
+            storedValues.set(key, String(value));
+        },
+    };
+
+    class CustomEvent {
+        constructor(type, init) {
+            this.type = type;
+            this.detail = init.detail;
+        }
+    }
+
+    const window = {
+        CustomEvent,
+        localStorage,
+        addEventListener(name, handler) {
+            windowListeners.set(name, handler);
+        },
+    };
+
+    vm.runInNewContext(script, { document, window });
+
+    return {
+        dispatchedEvents,
+        documentListeners,
+        navigation,
+        root,
+        shadowElements,
+        storedValues,
+        windowListeners,
+    };
+}
+
+test('defaults to dark when no preference exists', () => {
+    const environment = createEnvironment();
+
+    assert.equal(environment.root.getAttribute('theme'), 'dark');
+    assert.equal(environment.root.style.colorScheme, 'dark');
+    assert.equal(environment.navigation.getAttribute('theme'), 'dark');
+});
+
+test('restores an explicit light preference', () => {
+    const environment = createEnvironment({ storedTheme: 'light' });
+
+    assert.equal(environment.root.getAttribute('theme'), 'light');
+    assert.equal(environment.root.style.colorScheme, 'light');
+    assert.equal(environment.navigation.getAttribute('theme'), 'light');
+});
+
+test('restores an explicit dark preference', () => {
+    const environment = createEnvironment({ storedTheme: 'dark' });
+
+    assert.equal(environment.root.getAttribute('theme'), 'dark');
+    assert.equal(environment.storedValues.get('theme'), 'dark');
+});
+
+test('native navigation event updates the theme and preference', () => {
+    const environment = createEnvironment();
+
+    environment.documentListeners.get('arm-theme')({ detail: true });
+
+    assert.equal(environment.root.getAttribute('theme'), 'light');
+    assert.equal(environment.storedValues.get('theme'), 'light');
+    assert.equal(environment.dispatchedEvents.at(-1).detail.theme, 'light');
+});
+
+test('restricted storage does not block native theme switching', () => {
+    const environment = createEnvironment({ throwOnRead: true, throwOnWrite: true });
+
+    assert.equal(environment.root.getAttribute('theme'), 'dark');
+    assert.doesNotThrow(() => environment.documentListeners.get('arm-theme')({ detail: true }));
+    assert.equal(environment.root.getAttribute('theme'), 'light');
+});
+
+test('navigation hydration reapplies the active theme', () => {
+    const environment = createEnvironment({ storedTheme: 'light' });
+
+    environment.root.setAttribute('theme', 'dark');
+    environment.navigation.setAttribute('theme', 'dark');
+    environment.documentListeners.get('arm-top-navigation-ready')();
+
+    assert.equal(environment.root.getAttribute('theme'), 'light');
+    assert.equal(environment.navigation.getAttribute('theme'), 'light');
+});
+
+test('navigation hydration uses only the public theme attribute', () => {
+    const environment = createEnvironment({ hasNavigationShadow: true, storedTheme: 'light' });
+
+    assert.equal(environment.navigation.getAttribute('theme'), 'light');
+    assert.equal(environment.shadowElements.size, 0);
+});
+
+test('storage events synchronize theme changes between tabs', () => {
+    const environment = createEnvironment();
+
+    environment.windowListeners.get('storage')({ key: 'theme', newValue: 'light' });
+
+    assert.equal(environment.root.getAttribute('theme'), 'light');
+    assert.equal(environment.navigation.getAttribute('theme'), 'light');
+    assert.equal(environment.dispatchedEvents.at(-1).detail.theme, 'light');
+});