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
Show stats 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'; 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"> <header class="flex justify-between items-center py-5">
<div> <div>
<a class="text-l font-semibold" href="/blog"> <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"> <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 stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/> <path id="themePath" stroke="#3B2C29" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 19-7-7 7-7"/>
</svg> </svg>
</a> </a>
</div> </div>
<ThemeIcon /> <ThemeIcon />
</header> </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 updateImageForTheme = () => {
const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
githubImage.src = currentTheme === 'dark' ? '/socials/github_light.svg' : '/socials/github_dark.svg'; githubImage.src = currentTheme === 'dark' ? '/socials/github_dark.svg' : '/socials/github_light.svg';
spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_light.svg' : '/socials/spotify_dark.svg'; spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_dark.svg' : '/socials/spotify_light.svg';
xxiivvwebringImage.src = currentTheme === 'dark' ? '/socials/xxiivvwebring_light.svg' : '/socials/xxiivvwebring_dark.svg'; xxiivvwebringImage.src = currentTheme === 'dark' ? '/socials/xxiivvwebring_dark.svg' : '/socials/xxiivvwebring_light.svg';
grandlinewebringImage.src = currentTheme === 'dark' ? '/socials/grandlinewebring.light.svg' : '/socials/grandlinewebring.dark.svg'; grandlinewebringImage.src = currentTheme === 'dark' ? '/socials/grandlinewebring.dark.svg' : '/socials/grandlinewebring.light.svg';
}; };
updateImageForTheme(); updateImageForTheme();

14
src/components/ThemeIcon.astro
View file

@ -12,12 +12,12 @@
border: 0; border: 0;
background: none; background: none;
} }
.sun { fill: transparent; } .sun { fill: #3B2C29; }
.moon { fill: #cdd6f4; } .moon { fill: transparent; }
:global(.dark) .sun { fill: #3B2C29; } :global(.dark) .sun { fill: transparent; }
:global(.dark) .moon { fill: transparent; } :global(.dark) .moon { fill: #cdd6f4; }
</style> </style>
<script is:inline> <script is:inline>
@ -32,9 +32,9 @@
})(); })();
if (theme === 'dark') { if (theme === 'dark') {
document.documentElement.classList.remove('light'); document.documentElement.classList.add('dark');
} else { } else {
document.documentElement.classList.add('light'); document.documentElement.classList.remove('dark');
} }
window.localStorage.setItem('theme', theme); window.localStorage.setItem('theme', theme);
@ -48,4 +48,4 @@
} }
document.getElementById("themeToggle").addEventListener("click", handleToggleClick); document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
</script> </script>

2
src/layouts/BlogPost.astro
View file

@ -12,7 +12,7 @@ const { title, description, pubDate } = Astro.props;
const updateImageForTheme = () => { const updateImageForTheme = () => {
const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'; const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
jollyroger.src = currentTheme === 'dark' ? '/jollyroger_light.svg' : '/jollyroger_dark.svg'; jollyroger.src = currentTheme === 'dark' ? '/jollyroger_dark.svg' : '/jollyroger_light.svg';
}; };
updateImageForTheme(); updateImageForTheme();

84
src/styles/global.css
View file

@ -14,13 +14,13 @@
} }
html { html {
background-color: var(--dark-bg); background-color: var(--light-bg);
color: var(--dark-1); color: var(--light-1);
} }
html.dark { html.dark {
background-color: var(--light-bg); background-color: var(--dark-bg);
color: var(--light-1); color: var(--dark-1);
} }
body { body {
@ -34,13 +34,13 @@ p {
/* FOOTER */ /* FOOTER */
.footerbg { .footerbg {
background-color: var(--dark-bg); background-color: var(--light-bg);
border-top: 1px solid var(--dark-1); border-top: 1px solid var(--light-1);
} }
.dark .footerbg { .dark .footerbg {
background-color: var(--light-bg); background-color: var(--dark-bg);
border-top: 1px solid var(--light-1); border-top: 1px solid var(--dark-1);
} }
/* INDEX */ /* INDEX */
@ -49,9 +49,9 @@ p {
padding: 10px 0 0 0; padding: 10px 0 0 0;
} }
.index a { color: var(--dark-link);} .index a { color: var(--light-link);}
.dark .index a { color: var(--light-link);} .dark .index a { color: var(--dark-link);}
.index a:hover { text-decoration: underline 2px;} .index a:hover { text-decoration: underline 2px;}
@ -107,26 +107,26 @@ p {
border: 1px solid; border: 1px solid;
} }
.blog a { color: var(--dark-link); font-weight: bolder;} .blog a { color: var(--light-link); font-weight: bolder; }
.dark .blog a { color: var(--light-link);} .dark .blog a { color: var(--dark-link); }
.blog a:hover { text-decoration: underline 2px;} .blog a:hover { text-decoration: underline 2px; }
.blogtime { color: var(--dark-2); } .blogtime { color: var(--light-2); }
.dark .blogtime { color: var(--light-2); } .dark .blogtime { color: var(--dark-2); }
/* LOGS */ /* LOGS */
.borderbottom { .borderbottom {
border-bottom-width: 2px; border-bottom-width: 2px;
border-color: var(--dark-3); border-color: var(--light-3);
font-size: large; font-size: large;
} }
.dark .borderbottom { .dark .borderbottom {
border-bottom-width: 2px; border-bottom-width: 2px;
border-color: var(--light-3); border-color: var(--dark-3);
} }
/* GALLERY */ /* GALLERY */
@ -170,23 +170,23 @@ p {
} }
.cv-date { .cv-date {
color: var(--dark-2);
font-size: small;
}
.dark .cv-date {
color: var(--light-2); color: var(--light-2);
font-size: small; font-size: small;
} }
.cv a { .dark .cv-date {
color: var(--dark-link); color: var(--dark-2);
font-size: small; font-size: small;
} }
.dark .cv a { color: var(--light-link);} .cv a {
color: var(--light-link);
font-size: small;
}
.cv a:hover { text-decoration: underline 2px;;} .dark .cv a { color: var(--dark-link); }
.cv a:hover { text-decoration: underline 2px; }
.cv li { .cv li {
list-style: disc inside; list-style: disc inside;
@ -199,22 +199,22 @@ p {
/* GUESTBOOK */ /* GUESTBOOK */
.guestbook a:hover { .guestbook a:hover {
background-color: var(--light-link);
}
.dark .guestbook a:hover {
background-color: var(--dark-1); background-color: var(--dark-1);
color: var(--dark-bg); color: var(--dark-bg);
} }
.dark .guestbook a:hover {
background-color: var(--light-link);
}
/* QUOTES */ /* QUOTES */
.author { .author {
color: var(--dark-2); color: var(--light-2);
font-size: medium; font-size: medium;
} }
.dark .author { .dark .author {
color: var(--light-2); color: var(--dark-2);
font-size: medium; font-size: medium;
} }
@ -237,30 +237,30 @@ pre {
} }
blockquote { blockquote {
background-color: #11111b;
padding: 0 0 0 10px;
border-left: 5px solid var(--dark-link);
}
.dark blockquote {
background-color: #E6D5C8; background-color: #E6D5C8;
padding: 0 0 0 10px; padding: 0 0 0 10px;
border-left: 5px solid var(--light-link); border-left: 5px solid var(--light-link);
} }
.dark blockquote {
background-color: #11111b;
padding: 0 0 0 10px;
border-left: 5px solid var(--dark-link);
}
blockquote p { blockquote p {
font-size: medium; font-size: medium;
line-height: 32px; line-height: 32px;
} }
::selection{ ::selection{
background-color: var(--dark-1); background-color: var(--light-1);
color: var(--dark-bg); color: var(--light-bg);
} }
.dark ::selection{ .dark ::selection{
background-color: var(--light-1); background-color: var(--dark-1);
color: var(--light-bg); color: var(--dark-bg);
} }
/* PRINT */ /* PRINT */