annika/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

darkmode

Browse source
This commit is contained in:
annika koenig 2026-06-03 16:53:47 +02:00
parent 13ae2d8032
commit da4931e9c5
6 changed files with 174 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
eis_projekt.html
View file

@ -9,7 +9,23 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
};
</script>
<body>
<nav>
@ -22,6 +38,18 @@
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<button onclick="toggleDarkMode()"
style="
background: transparent;
border: 1px solid rgba(232,103,154,0.4);
color: var(--rose);
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
">
🌙 Mode
</button>
</nav>
<section class="hero">

29
impressum.html
View file

@ -10,6 +10,23 @@
<link rel="stylesheet" href="style.css">
</head>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
};
</script>
<body>
<nav>
@ -22,6 +39,18 @@
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<button onclick="toggleDarkMode()"
style="
background: transparent;
border: 1px solid rgba(232,103,154,0.4);
color: var(--rose);
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
">
🌙 Mode
</button>
</nav>
<section class="hero">

30
index.html
View file

@ -7,6 +7,24 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
};
</script>
<body>
<nav>
@ -18,6 +36,18 @@
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</ul>
<button onclick="toggleDarkMode()"
style="
background: transparent;
border: 1px solid rgba(232,103,154,0.4);
color: var(--rose);
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
">
🌙 Mode
</button>
</nav>
<div class="hero">

28
kontakt.html
View file

@ -9,7 +9,23 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
};
</script>
<body>
<nav>
@ -22,6 +38,18 @@
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<button onclick="toggleDarkMode()"
style="
background: transparent;
border: 1px solid rgba(232,103,154,0.4);
color: var(--rose);
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
">
🌙 Mode
</button>
</nav>
<section class="hero">

29
style.css
View file

@ -453,4 +453,33 @@ footer span {
section {
padding: 3rem 1.5rem;
}
body.dark {
--cream: #120d14;
--text: #f5e9f2;
--muted: #c7b2c9;
background: var(--cream);
color: var(--text);
}
body.dark nav {
background: rgba(18, 13, 20, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark .stat-card,
body.dark .gallery-card {
background: #1b141d;
border-color: rgba(255, 255, 255, 0.08);
}
body.dark .img-badge {
background: #1b141d;
color: var(--text);
}
body.dark footer {
background: #0d0a10;
}
}

30
ueber_uns.html
View file

@ -10,6 +10,24 @@
<link rel="stylesheet" href="style.css">
</head>
<script>
function toggleDarkMode() {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
localStorage.setItem("theme", "dark");
} else {
localStorage.setItem("theme", "light");
}
}
window.onload = function () {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark");
}
};
</script>
<body>
<nav>
@ -22,6 +40,18 @@
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<button onclick="toggleDarkMode()"
style="
background: transparent;
border: 1px solid rgba(232,103,154,0.4);
color: var(--rose);
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
font-size: 0.8rem;
">
🌙 Mode
</button>
</nav>
<section class="hero">