diff --git a/app.js b/app.js
index 250abad..6e4d1c4 100644
--- a/app.js
+++ b/app.js
@@ -10,4 +10,27 @@ if(window.innerWidth > 1200) {
}
}
}
-}
\ No newline at end of file
+}
+
+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);
+});
\ No newline at end of file
diff --git a/bausystem/index.html b/bausystem/index.html
index 1baa250..1d25163 100644
--- a/bausystem/index.html
+++ b/bausystem/index.html
@@ -34,7 +34,13 @@
-
+
+
+
diff --git a/index.css b/index.css
index 0d71c50..8e9f6fa 100644
--- a/index.css
+++ b/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 {
/* 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;
+
+}