Darkmode

2022-08-03 14:28:42 +02:00
--- a/app.js
+++ b/app.js
@ -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);
+});
--- a/bausystem/index.html
+++ b/bausystem/index.html
@ -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">
--- 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;
+
+}