From d38609f0a3221bfbf8ed8f74ac3e8312ef0e1905 Mon Sep 17 00:00:00 2001 From: Chaoscaot Date: Wed, 3 Aug 2022 14:28:42 +0200 Subject: [PATCH] Darkmode --- app.js | 25 ++++++++++++++++++++++++- bausystem/index.html | 11 ++++++++++- index.css | 41 +++++++++++++++++++++++++++++++++++++---- 3 files changed, 71 insertions(+), 6 deletions(-) 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 @@ - + + +
@@ -44,6 +50,9 @@ +
+ +
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; + +}