diff --git a/website/themes/beastie/assets/js/theme-chooser.js b/website/themes/beastie/assets/js/theme-chooser.js
new file mode 100644
index 0000000000..0bdd3dc23a
--- /dev/null
+++ b/website/themes/beastie/assets/js/theme-chooser.js
@@ -0,0 +1,47 @@
+/*
+BSD 2-Clause License
+
+Copyright (c) 1994-2026, The FreeBSD Documentation Project
+Copyright (c) 2026,      Vladlen Popolitov
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+// FreeBSD light/dark theme persists
+;(function() {
+    const toggle = document.getElementById('theme-switch');
+    if (!toggle) return;
+
+    // restore saved state
+    const saved = localStorage.getItem('theme-preference');
+    if (saved === 'dark') {
+    toggle.checked = true;
+    } else if (saved === 'light') {
+    toggle.checked = false;
+    }
+    // if state was no saved - use current state (CSS uses prefers-color-scheme)
+    // save state, when theme switched to or from dark
+    toggle.addEventListener('change', function() {
+    localStorage.setItem('theme-preference', this.checked ? 'dark' : 'light');
+    });
+})();
diff --git a/website/themes/beastie/layouts/_partials/site-head.html b/website/themes/beastie/layouts/_partials/site-head.html
index ceafa1006f..5aa6a86463 100644
--- a/website/themes/beastie/layouts/_partials/site-head.html
+++ b/website/themes/beastie/layouts/_partials/site-head.html
@@ -1,66 +1,69 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="{{ if .IsHome }} {{ .Site.Params.description }} {{ else }} {{ .Description }} {{ end }}">
   <meta name="keywords" content="{{ with .Params.tags -}}{{ delimit . ", " }}{{- end }}">
   <meta name="copyright" content="1995-{{ now.Format "2006" }} The FreeBSD Foundation">
   <link rel="canonical" href="{{ .Permalink }}">
 
   <title>
     {{ with .Params.Title }}{{ . }} |{{ end }}
     {{ block "title" . }}{{ .Site.Title }}{{ end }}
   </title>
 
   <meta name="theme-color" content="#790000">
   <meta name="color-scheme" content="system light dark high-contrast">
 
   <link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}">
 
   {{- $styles := resources.Get "styles/main.css" | resources.Minify }}
   <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
   <link rel="stylesheet" href="{{ "css/font-awesome-min.css" | relURL }}">
 
   <meta name="twitter:card" content="summary">
   <meta name="twitter:domain" content="docs.FreeBSD.org">
   <meta name="twitter:site" content="@freebsd">
   <meta name="twitter:url" content="https://twitter.com/freebsd">
   <meta property="og:title" content="{{ if .IsHome }} {{ .Site.Params.Title }} {{ else }} {{ .Title }} {{ end }}" >
   <meta property="og:description" content="{{ if .IsHome }} {{ .Site.Params.description }} {{ else }} {{ .Description }} {{ end }}" >
   <meta property="og:type" content="website">
   <meta property="og:image" content="{{ "favicon.ico" | relURL }}">
   <meta property="og:image:alt" content="FreeBSD Logo">
   <meta property="og:locale" content="{{ $.Site.Language.Lang | default "en" }}" >
   <meta property="og:url" content="{{ .Permalink }}">
   <meta property="og:site_name" content="{{ .Site.Title }}">
   <script type="application/ld+json">
     {
       "@context": "http://schema.org",
       "@type": "Article",
       "url": "{{ .Permalink }}",
       "name": "{{ .Site.Title }}",
       "headline": "{{ .Site.Title }}",
       "description": "{{ .Site.Params.description }}"
     }
   </script>
   <!-- END SEO -->
 
+  {{- $themeChooser := resources.Get "js/theme-chooser.js" | resources.Minify }}
+  <script defer src="{{ $themeChooser.RelPermalink }}"></script>
+
   {{- if hugo.IsServer -}}
     {{- printf "<!-- Dev mode: Not loading plausible script to avoid bloating stats -->" | safeHTML }}
   {{- else -}}
     <!-- Privacy-friendly analytics by Plausible -->
     <script async src="https://plausible.io/js/pa-QLSHWxEIso-L-cKLRNOUO.js" ></script>
     <script>
       ((window.plausible =
         window.plausible ||
         function () {
           (plausible.q = plausible.q || []).push(arguments);
         }),
         (plausible.init =
           plausible.init ||
           function (i) {
             plausible.o = i || {};
           }));
       plausible.init();
     </script>
   {{- end -}}
 </head>
