Dieser Commit ist enthalten in:
Chaoscaot 2022-08-03 14:28:42 +02:00
Ursprung d37f87d876
Commit d38609f0a3
3 geänderte Dateien mit 71 neuen und 6 gelöschten Zeilen

25
app.js
Datei anzeigen

@ -10,4 +10,27 @@ if(window.innerWidth > 1200) {
}
}
}
}
}
function setColorSchema(themeMode) {
let theme = document.querySelector("body");
if(themeMode) {
theme.classList.replace("dark", "light");
} else {
theme.classList.replace("light", "dark");
}
}
if(document.getElementById("theme-button")) {
document.getElementById("theme-button").addEventListener("click", () => {
let theme = document.querySelector("body");
setColorSchema(theme.classList.contains("dark"));
});
}
console.log(window.matchMedia('(prefers-color-scheme: dark)'))
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
setColorSchema(!event.matches);
});

Datei anzeigen

@ -34,7 +34,13 @@
<script src="https://kit.fontawesome.com/df996a11da.js" crossorigin="anonymous"></script>
<script src="/app.js" defer></script>
</head>
<body>
<body class="dark">
<script>
if (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.querySelector("body").classList.replace("dark", "light");
}
</script>
<header>
<a id="back-button" href="#">
@ -44,6 +50,9 @@
</span>
</a>
<div id="theme-button">
<i class="fa-solid fa-sun"></i>
</div>
</header>
<div class="center">

Datei anzeigen

@ -1,3 +1,17 @@
.dark {
--background: #1a1a1a;
--background-nav: #2f2f2f;
--text-color: #fff;
--code-bg-color: #1a1a1a;
}
.light {
--background: white;
--background-nav: black;
--text-color: #000;
--code-bg-color: #f7f7f9;
}
html {
/* Scrolls for me */
scroll-behavior: smooth;
@ -63,7 +77,7 @@ code {
font-size: 1em;
padding: .2rem .4rem;
color: #bd4147;
background-color: #f7f7f9;
background-color: var(--code-bg-color);
border-radius: .25rem;
}
@ -71,6 +85,13 @@ body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background: var(--background);
color: var(--text-color);
}
* {
transition: color 0.5s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.center {
@ -89,7 +110,7 @@ img {
}
a {
color: black;
color: var(--text-color);
text-decoration: none;
}
@ -112,13 +133,15 @@ header {
background: black;
color: white;
height: fit-content;
width: 100%;
width: available;
display: flex;
justify-content: space-between;
background: var(--background-nav);
padding: 0 15px;
}
#back-button {
margin-left: 15px;
display: flex;
align-items: center;
justify-content: center;
@ -131,3 +154,13 @@ header {
-moz-user-select: none;
-ms-user-select: none;
}
#theme-button {
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(20px, 2vh, 100px);
cursor: pointer;
}