cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: use color-scheme + light-dark

Browse source
This commit is contained in:
Cory Dransfeldt 2024-10-25 09:55:13 -07:00
parent e673492f30
commit 1293d37cdf
No known key found for this signature in database
5 changed files with 63 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/includes/base.liquid
View file

@ -54,6 +54,7 @@
<link rel="preload" href="/assets/fonts/mlb.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/styles/index.css?v={% appVersion %}" type="text/css" />
<link rel="canonical" href="{{ fullUrl }}" />
<meta name="color-scheme" content="light dark">
<meta property="og:title" content="{{ pageTitle }}" data-dynamic="og:title" />
<meta name="description" content="{{ escapedPageDescription }}" data-dynamic="description" />
<meta property="og:description" content="{{ escapedPageDescription }}" data-dynamic="og:description" />
@ -83,13 +84,13 @@
<body>
<script>
(() => {
const currentTheme = sessionStorage?.getItem('theme')
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
const root = document.documentElement
const themeToSet = currentTheme || (prefersDarkScheme ? 'dark' : 'light')
if (!currentTheme) sessionStorage?.setItem('theme', themeToSet)
root.setAttribute('data-theme', themeToSet)
})()
const currentTheme = sessionStorage.getItem('theme');
const metaColorScheme = document.querySelector('meta[name="color-scheme"]');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const themeToSet = currentTheme || (prefersDarkScheme ? 'dark' : 'light');
if (!currentTheme) sessionStorage.setItem('theme', themeToSet);
metaColorScheme.setAttribute('content', themeToSet);
})();
</script>
{{ content }}
</body>