🐛 fix themetoggle & styling to work correctly
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
parent
2e5b785932
commit
60e4862335
GPG key ID:
D2BBDF3EDE6BA9A6
5 changed files with 100 additions and 100 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -12,7 +12,7 @@ const { title, description, pubDate } = Astro.props;
|
|||
|
||||
const updateImageForTheme = () => {
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -14,18 +14,18 @@
|
|||
}
|
||||
|
||||
html {
|
||||
background-color: var(--dark-bg);
|
||||
color: var(--dark-1);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background-color: var(--light-bg);
|
||||
color: var(--light-1);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background-color: var(--dark-bg);
|
||||
color: var(--dark-1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Verdana, sans-serif;
|
||||
/*"Noto Sans Mono", monospace*/
|
||||
/*"Noto Sans Mono", monospace*/
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -34,13 +34,13 @@ p {
|
|||
|
||||
/* FOOTER */
|
||||
.footerbg {
|
||||
background-color: var(--dark-bg);
|
||||
border-top: 1px solid var(--dark-1);
|
||||
background-color: var(--light-bg);
|
||||
border-top: 1px solid var(--light-1);
|
||||
}
|
||||
|
||||
.dark .footerbg {
|
||||
background-color: var(--light-bg);
|
||||
border-top: 1px solid var(--light-1);
|
||||
background-color: var(--dark-bg);
|
||||
border-top: 1px solid var(--dark-1);
|
||||
}
|
||||
|
||||
/* INDEX */
|
||||
|
|
@ -49,9 +49,9 @@ p {
|
|||
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;}
|
||||
|
||||
|
|
@ -107,26 +107,26 @@ p {
|
|||
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 */
|
||||
.borderbottom {
|
||||
border-bottom-width: 2px;
|
||||
border-color: var(--dark-3);
|
||||
font-size: large;
|
||||
border-color: var(--light-3);
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.dark .borderbottom {
|
||||
border-bottom-width: 2px;
|
||||
border-color: var(--light-3);
|
||||
border-color: var(--dark-3);
|
||||
}
|
||||
|
||||
/* GALLERY */
|
||||
|
|
@ -142,9 +142,9 @@ p {
|
|||
}
|
||||
|
||||
.gallery table img {
|
||||
width: 95%;
|
||||
border: 10px solid white;
|
||||
margin-bottom: 10px;
|
||||
width: 95%;
|
||||
border: 10px solid white;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.gallery table, th, td {
|
||||
|
|
@ -170,23 +170,23 @@ p {
|
|||
}
|
||||
|
||||
.cv-date {
|
||||
color: var(--dark-2);
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.dark .cv-date {
|
||||
color: var(--light-2);
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.cv a {
|
||||
color: var(--dark-link);
|
||||
.dark .cv-date {
|
||||
color: var(--dark-2);
|
||||
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 {
|
||||
list-style: disc inside;
|
||||
|
|
@ -199,22 +199,22 @@ p {
|
|||
|
||||
/* GUESTBOOK */
|
||||
.guestbook a:hover {
|
||||
background-color: var(--light-link);
|
||||
}
|
||||
|
||||
.dark .guestbook a:hover {
|
||||
background-color: var(--dark-1);
|
||||
color: var(--dark-bg);
|
||||
}
|
||||
|
||||
.dark .guestbook a:hover {
|
||||
background-color: var(--light-link);
|
||||
}
|
||||
|
||||
/* QUOTES */
|
||||
.author {
|
||||
color: var(--dark-2);
|
||||
color: var(--light-2);
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.dark .author {
|
||||
color: var(--light-2);
|
||||
color: var(--dark-2);
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
|
|
@ -237,30 +237,30 @@ pre {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
background-color: #11111b;
|
||||
padding: 0 0 0 10px;
|
||||
border-left: 5px solid var(--dark-link);
|
||||
}
|
||||
|
||||
.dark blockquote {
|
||||
background-color: #E6D5C8;
|
||||
padding: 0 0 0 10px;
|
||||
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 {
|
||||
font-size: medium;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
::selection{
|
||||
background-color: var(--dark-1);
|
||||
color: var(--dark-bg);
|
||||
background-color: var(--light-1);
|
||||
color: var(--light-bg);
|
||||
}
|
||||
|
||||
.dark ::selection{
|
||||
background-color: var(--light-1);
|
||||
color: var(--light-bg);
|
||||
background-color: var(--dark-1);
|
||||
color: var(--dark-bg);
|
||||
}
|
||||
|
||||
/* PRINT */
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue