Darkmode
Dieser Commit ist enthalten in:
Ursprung
d37f87d876
Commit
d38609f0a3
23
app.js
23
app.js
@ -11,3 +11,26 @@ 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);
|
||||||
|
});
|
@ -34,7 +34,13 @@
|
|||||||
<script src="https://kit.fontawesome.com/df996a11da.js" crossorigin="anonymous"></script>
|
<script src="https://kit.fontawesome.com/df996a11da.js" crossorigin="anonymous"></script>
|
||||||
<script src="/app.js" defer></script>
|
<script src="/app.js" defer></script>
|
||||||
</head>
|
</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>
|
<header>
|
||||||
<a id="back-button" href="#">
|
<a id="back-button" href="#">
|
||||||
@ -44,6 +50,9 @@
|
|||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<div id="theme-button">
|
||||||
|
<i class="fa-solid fa-sun"></i>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="center">
|
<div class="center">
|
||||||
|
41
index.css
41
index.css
@ -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 {
|
html {
|
||||||
/* Scrolls for me */
|
/* Scrolls for me */
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
@ -63,7 +77,7 @@ code {
|
|||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
padding: .2rem .4rem;
|
padding: .2rem .4rem;
|
||||||
color: #bd4147;
|
color: #bd4147;
|
||||||
background-color: #f7f7f9;
|
background-color: var(--code-bg-color);
|
||||||
border-radius: .25rem;
|
border-radius: .25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -71,6 +85,13 @@ body {
|
|||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 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 {
|
.center {
|
||||||
@ -89,7 +110,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: black;
|
color: var(--text-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -112,13 +133,15 @@ header {
|
|||||||
background: black;
|
background: black;
|
||||||
color: white;
|
color: white;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
width: 100%;
|
width: available;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: var(--background-nav);
|
||||||
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#back-button {
|
#back-button {
|
||||||
margin-left: 15px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -131,3 +154,13 @@ header {
|
|||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-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;
|
||||||
|
|
||||||
|
}
|
||||||
|
Laden…
In neuem Issue referenzieren
Einen Benutzer sperren