TheThomaas/my-online-cookbook
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added a theme toggle to the footer

Browse source
This commit is contained in:
TheThomaas 2025-04-25 16:42:38 +02:00
parent b1dd0cc07e
commit 7f38a1e1dd
2 changed files with 92 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/_includes/components/footer.njk
View file

@ -1,2 +1,14 @@
<p>Made with <a href="https://myonlinecookbook.xyz/" target="_blank" rel="noopener">My Online Cookbook</a></p> <div>
<p>© {{ site.author }} {% year %}</p> <p>Made with <a href="https://myonlinecookbook.xyz/" target="_blank" rel="noopener">My Online Cookbook</a></p>
<p>© {{ site.author }} {% year %}</p>
</div>
<div class="user-toggle">
<div role="status" class="visually-hidden js-mode-status"></div>
<button class="toggle-button js-mode-toggle">
<span class="visually-hidden toggle-button__text js-mode-toggle-text"
>Enable dark mode</span
>
<span class="toggle-button__icon" aria-hidden="true"></span>
</button>
</div>

79
src/_includes/layouts/base.njk
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="no-js">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -20,12 +20,15 @@
:root { :root {
--color-primary: {{ site.primaryColor }}; --color-primary: {{ site.primaryColor }};
--color-secondary: {{ site.secondaryColor }}; --color-secondary: {{ site.secondaryColor }};
--primary-color: {{ site.primaryColor }};
--secondary-color: {{ site.secondaryColor }};
} }
{% include "css/main.css" %} {% include "css/main.css" %}
</style> </style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js" defer></script> <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" defer></script>
<script>document.documentElement.classList.remove('no-js');</script>
</head> </head>
<body class="{{bodyClass}}"> <body class="{{bodyClass}}">
<header class="l-header"> <header class="l-header">
@ -44,5 +47,79 @@
<footer class="l-footer"> <footer class="l-footer">
{% include "components/footer.njk" %} {% include "components/footer.njk" %}
</footer> </footer>
<script>
const STORAGE_KEY = 'user-color-scheme';
const COLOR_MODE_KEY = '--color-mode';
const modeToggleButton = document.querySelector('.js-mode-toggle');
const modeToggleText = document.querySelector('.js-mode-toggle-text');
const modeStatusElement = document.querySelector('.js-mode-status');
const getCSSCustomProp = propKey => {
let response = getComputedStyle(document.documentElement).getPropertyValue(propKey);
if (response.length) {
response = response.replace(/\"/g, '').trim();
}
return response;
};
const applySetting = passedSetting => {
let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);
if (currentSetting) {
document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
setButtonLabelAndStatus(currentSetting);
} else {
setButtonLabelAndStatus(getCSSCustomProp(COLOR_MODE_KEY));
}
};
const setButtonLabelAndStatus = currentSetting => {
modeToggleText.innerText = `Enable ${
currentSetting === 'dark' ? 'light' : 'dark'
} mode`;
modeStatusElement.innerText = `Color mode is now "${currentSetting}"`;
};
const toggleSetting = () => {
let currentSetting = localStorage.getItem(STORAGE_KEY);
switch (currentSetting) {
case null:
currentSetting = getCSSCustomProp(COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark';
break;
case 'light':
currentSetting = 'dark';
break;
case 'dark':
currentSetting = 'light';
break;
}
localStorage.setItem(STORAGE_KEY, currentSetting);
return currentSetting;
};
modeToggleButton.addEventListener('click', evt => {
evt.preventDefault();
applySetting(toggleSetting());
});
applySetting();
</script>
</body> </body>
</html> </html>