🚧💄 WIP: darkmode/lightmode
This commit is contained in:
SindreKjelsrud
parent
809aef2a5a
commit
d857ecb30a
3 changed files with 82 additions and 48 deletions
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import HeaderLink from './HeaderLink.astro';
|
||||
import { SITE_TITLE } from '../consts';
|
||||
import ThemeIcon from './ThemeIcon.astro';
|
||||
---
|
||||
|
||||
<header class="flex justify-center gap-64">
|
||||
|
|
@ -8,6 +9,7 @@ import { SITE_TITLE } from '../consts';
|
|||
<a class="font-bold" href="/">
|
||||
{SITE_TITLE}
|
||||
</a>
|
||||
<ThemeIcon />
|
||||
</div>
|
||||
<nav>
|
||||
<HeaderLink href="/about">about</HeaderLink>
|
||||
|
|
|
|||
53
src/components/ThemeIcon.astro
Normal file
53
src/components/ThemeIcon.astro
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
---
|
||||
|
||||
<button id="themeToggle">
|
||||
<svg width="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
class="sun"
|
||||
fill-rule="evenodd"
|
||||
d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z"
|
||||
></path>
|
||||
<path
|
||||
class="moon"
|
||||
fill-rule="evenodd"
|
||||
d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
const theme = (() => {
|
||||
if (
|
||||
typeof localStorage != "undefined" &&
|
||||
localStorage.getItem("theme")
|
||||
) {
|
||||
return localStorage.getItem("theme");
|
||||
}
|
||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return "dark";
|
||||
} else {
|
||||
return "light";
|
||||
}
|
||||
})();
|
||||
|
||||
if (theme === "light") {
|
||||
document.documentElement.classList.remove("dark");
|
||||
} else {
|
||||
document.documentElement.classList.add("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>
|
||||
|
|
@ -3,65 +3,44 @@
|
|||
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
|
||||
License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
|
||||
*/
|
||||
|
||||
html {
|
||||
background-color: #FFF8EA;
|
||||
color: #815B5B;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background-color: #27374D;
|
||||
color: #DDE6ED;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Verdana, sans-serif;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
max-width: 65ch;
|
||||
text-align: left;
|
||||
background-color: #FFF8EA;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
line-height: 1.5;
|
||||
color: #815B5B;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
strong,
|
||||
b {
|
||||
color: #222;
|
||||
|
||||
#themeToggle {
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
a {
|
||||
color: #3273dc;
|
||||
.sun {
|
||||
fill: #27374D;
|
||||
}
|
||||
nav a {
|
||||
margin-right: 10px;
|
||||
.moon {
|
||||
fill: white;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
content {
|
||||
line-height: 1.6;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
code {
|
||||
padding: 2px 5px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
pre {
|
||||
padding: 1rem;
|
||||
}
|
||||
pre > code {
|
||||
all: unset;
|
||||
}
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
color: #222;
|
||||
padding: 2px 0px 2px 20px;
|
||||
margin: 0px;
|
||||
font-style: italic;
|
||||
|
||||
:global(.dark) .sun {
|
||||
fill: white;
|
||||
display: none;
|
||||
}
|
||||
:global(.dark) .moon {
|
||||
fill: #FFF8EA;
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in a new issue