jon/bmthTech-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode with OS preference detection and manual toggle

Browse Source 
- CSS token overrides (--ink, --rule, --bg-off, etc.) on html.dark
- Explicit fixes for hardcoded values: nav blur bg, btn-dark inverts
  to light button, industry cells, kit icons, footer link colour
- Sun/moon toggle button in every page's nav
- Tiny inline FOUC-prevention script in <head> reads localStorage
  then falls back to prefers-color-scheme; toggle persists choice

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-06-13 18:50:20 +01:00
parent e1271a8b30
commit 60600886ec
6 changed files with 157 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
devkits.html
View File

@@ -9,6 +9,9 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script>
(function(){var t=localStorage.getItem('theme'),d=window.matchMedia('(prefers-color-scheme: dark)').matches;if(t==='dark'||(t===null&&d))document.documentElement.classList.add('dark');})();
</script>
</head>
<body>
@@ -30,6 +33,10 @@
<a href="consultancy.html">Consultancy</a>
<a href="videos.html">Videos</a>
</nav>
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
<svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
<svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
</button>
<a href="#products" class="btn btn-dark btn-sm">Buy a devkit</a>
</div>
</div>
@@ -319,5 +326,11 @@
</div>
</footer>
<script>
document.getElementById('theme-toggle').addEventListener('click', function() {
var dark = document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', dark ? 'dark' : 'light');
});
</script>
</body>
</html>