sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🐛 fix themetoggle & styling to work correctly

Browse source 
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
Sid 2024-08-23 10:58:17 +02:00
parent 2e5b785932
commit 60e4862335
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
5 changed files with 100 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/BlogHeader.astro
View file

@ -1,29 +1,29 @@
---
import ThemeIcon from './ThemeIcon.astro';
function toggleTheme() {
const currentTheme = document.body.getAttribute('data-theme');
document.body.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
}
---
<script type="module" client:load>
const updateSvgColorForTheme = () => {
const isDark = document.documentElement.classList.contains('dark');
const svgPath = document.getElementById('themePath');
if (svgPath) {
svgPath.setAttribute('stroke', isDark ? '#cdd6f4' : '#3B2C29');
}
};
updateSvgColorForTheme();
const themeToggle = document.getElementById('themeToggle');
if (themeToggle) {
themeToggle.addEventListener('click', updateSvgColorForTheme);
}
</script>
<header class="flex justify-between items-center py-5">
<div>
<a class="text-l font-semibold" href="/blog">
<svg class="w-6 h-6 text-gray-800 dark:text-white" style="color: var(--color-current);" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
<svg id="themeSvg" class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path id="themePath" stroke="#3B2C29" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
</svg>
</a>
</div>
<ThemeIcon />
</header>
<style>
[data-theme='dark'] {
--color-current: #9AD3BB;
}
[data-theme='light'] {
--color-current: #3B2C29;
}
</style>

8
src/components/Footer.astro
View file

@ -9,10 +9,10 @@ const today = new Date();
const updateImageForTheme = () => {
const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
githubImage.src = currentTheme === 'dark' ? '/socials/github_light.svg' : '/socials/github_dark.svg';
spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_light.svg' : '/socials/spotify_dark.svg';
xxiivvwebringImage.src = currentTheme === 'dark' ? '/socials/xxiivvwebring_light.svg' : '/socials/xxiivvwebring_dark.svg';
grandlinewebringImage.src = currentTheme === 'dark' ? '/socials/grandlinewebring.light.svg' : '/socials/grandlinewebring.dark.svg';
githubImage.src = currentTheme === 'dark' ? '/socials/github_dark.svg' : '/socials/github_light.svg';
spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_dark.svg' : '/socials/spotify_light.svg';
xxiivvwebringImage.src = currentTheme === 'dark' ? '/socials/xxiivvwebring_dark.svg' : '/socials/xxiivvwebring_light.svg';
grandlinewebringImage.src = currentTheme === 'dark' ? '/socials/grandlinewebring.dark.svg' : '/socials/grandlinewebring.light.svg';
};
updateImageForTheme();

60
src/components/ThemeIcon.astro
View file

@ -12,40 +12,40 @@
border: 0;
background: none;
}
.sun { fill: transparent; }
.moon { fill: #cdd6f4; }
.sun { fill: #3B2C29; }
.moon { fill: transparent; }
:global(.dark) .sun { fill: #3B2C29; }
:global(.dark) .moon { fill: transparent; }
:global(.dark) .sun { fill: transparent; }
:global(.dark) .moon { fill: #cdd6f4; }
</style>
<script is:inline>
const theme = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
return 'light';
}
return 'dark';
})();
if (theme === 'dark') {
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.add('light');
const theme = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
window.localStorage.setItem('theme', theme);
const handleToggleClick = () => {
const element = document.documentElement;
element.classList.toggle("dark");
const isDark = element.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
return 'light';
}
document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
</script>
return 'dark';
})();
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
window.localStorage.setItem('theme', theme);
const handleToggleClick = () => {
const element = document.documentElement;
element.classList.toggle("dark");
const isDark = element.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
}
document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
</script>