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

💄 make darkmode standard theme when no javascript

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-02-22 15:22:10 +01:00
parent de636d43d6
commit 791fe66ccf
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
3 changed files with 34 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/Footer.astro
View file

@ -8,9 +8,9 @@ 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_dark.svg' : '/socials/github_light.svg'; githubImage.src = currentTheme === 'dark' ? '/socials/github_light.svg' : '/socials/github_dark.svg';
spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_dark.svg' : '/socials/spotify_light.svg'; spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_light.svg' : '/socials/spotify_dark.svg';
webringImage.src = currentTheme === 'dark' ? '/socials/webring_dark.svg' : '/socials/webring_light.svg'; webringImage.src = currentTheme === 'dark' ? '/socials/webring_light.svg' : '/socials/webring_dark.svg';
}; };
updateImageForTheme(); updateImageForTheme();
@ -25,13 +25,13 @@ const today = new Date();
<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div> <div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
<div class="flex gap-1"> <div class="flex gap-1">
<a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub"> <a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
<img id="githubImage" height="30" width="30" src="/socials/github_light.svg" alt="GitHub"/> <img id="githubImage" height="30" width="30" src="/socials/github_dark.svg" alt="GitHub"/>
</a> </a>
<a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify"> <a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify">
<img id="spotifyImage" height="30" width="30" src="/socials/spotify_light.svg" alt="Spotify"/> <img id="spotifyImage" height="30" width="30" src="/socials/spotify_dark.svg" alt="Spotify"/>
</a> </a>
<a href="https://webring.xxiivv.com/#sid" target="_blank" rel="noopener"> <a href="https://webring.xxiivv.com/#sid" target="_blank" rel="noopener">
<img id="webringImage" height="30" width="30" src="/socials/webring_light.svg" alt="XXIIVV webring"/> <img id="webringImage" height="30" width="30" src="/socials/webring_dark.svg" alt="XXIIVV webring"/>
</a> </a>
</div> </div>
</footer> </footer>

20
src/components/ThemeIcon.astro
View file

@ -12,12 +12,12 @@
border: 0; border: 0;
background: none; background: none;
} }
.sun { fill: #3B2C29; } .sun { fill: transparent; }
.moon { fill: transparent; } .moon { fill: #9AD3BB; }
:global(.dark) .sun { fill: transparent; } :global(.dark) .sun { fill: #3B2C29; }
:global(.dark) .moon { fill: #9AD3BB; } :global(.dark) .moon { fill: transparent; }
</style> </style>
<script is:inline> <script is:inline>
@ -25,16 +25,16 @@
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme'); return localStorage.getItem('theme');
} }
if (window.matchMedia('(prefers-color-scheme: dark)').matches) { if (window.matchMedia('(prefers-color-scheme: light)').matches) {
return 'dark';
}
return 'light'; return 'light';
}
return 'dark';
})(); })();
if (theme === 'light') { if (theme === 'dark') {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('light');
} else { } else {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('light');
} }
window.localStorage.setItem('theme', theme); window.localStorage.setItem('theme', theme);

36
src/styles/global.css
View file

@ -14,13 +14,13 @@
} }
html { html {
background-color: var(--light-bg); background-color: var(--dark-bg);
color: var(--light-1); color: var(--dark-1);
} }
html.dark { html.dark {
background-color: var(--dark-bg); background-color: var(--light-bg);
color: var(--dark-1); color: var(--light-1);
} }
body { body {
@ -33,13 +33,13 @@ p {
/* FOOTER */ /* FOOTER */
.footerbg { .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);
} }
.dark .footerbg { .dark .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);
} }
/* BLOG */ /* BLOG */
@ -84,25 +84,25 @@ p {
font-weight: 600; font-weight: 600;
} }
.blog a { color: var(--light-link);} .blog a { color: var(--dark-link);}
.dark .blog a { color: var(--dark-link);} .dark .blog a { color: var(--light-link);}
.blog a:hover { text-decoration: underline 2px;} .blog a:hover { text-decoration: underline 2px;}
.blogtime { color: var(--light-2); } .blogtime { color: var(--dark-2); }
.dark .blogtime { color: var(--dark-2); } .dark .blogtime { color: var(--light-2); }
/* LOGS */ /* LOGS */
.borderbottom { .borderbottom {
border-bottom-width: 2px; border-bottom-width: 2px;
border-color: var(--light-3); border-color: var(--dark-3);
} }
.dark .borderbottom { .dark .borderbottom {
border-bottom-width: 2px; border-bottom-width: 2px;
border-color: var(--dark-3); border-color: var(--light-3);
} }
/* GALLERY */ /* GALLERY */
@ -134,11 +134,11 @@ p {
} }
.cv a { .cv a {
color: var(--light-link); color: var(--dark-link);
font-size: small; font-size: small;
} }
.dark .cv a { color: var(--dark-link);} .dark .cv a { color: var(--light-link);}
.cv a:hover { text-decoration: underline 2px;;} .cv a:hover { text-decoration: underline 2px;;}
@ -162,10 +162,10 @@ code {
blockquote { blockquote {
padding: 0 0 0 10px; padding: 0 0 0 10px;
border-left: 5px solid var(--light-1); border-left: 5px solid var(--dark-1);
} }
.dark blockquote { .dark blockquote {
padding: 0 0 0 10px; padding: 0 0 0 10px;
border-left: 5px solid var(--dark-1); border-left: 5px solid var(--light-1);
} }