diff --git a/public/index.js b/public/index.js index 1a18c19..88236ef 100644 --- a/public/index.js +++ b/public/index.js @@ -92,11 +92,13 @@ function isValidAlias(str) { } // Insert given string into the result -function appendText(str, color = "#171717") { +function appendText(str, color = "") { let span = document.createElement('span'); span.textContent = str; result.appendChild(span); - span.style.color = color; + if (color) { + span.style.color = color; + } } // Clear out the results diff --git a/public/style.css b/public/style.css index cff48ca..faa137a 100644 --- a/public/style.css +++ b/public/style.css @@ -1,3 +1,15 @@ +:root { + --text: #171717; + --bg: #fefefe; +} + +@media(prefers-color-scheme: dark) { + :root { + --bg: #171717; + --text: #fefefe; + } +} + body { font-family: "Poppins", sans-serif; font-weight: bold; @@ -7,8 +19,8 @@ body { display: flex; flex-direction: column; - background-color: #fefefe; - color: #171717; + background-color: var(--bg); + color: var(--text); height: 100vh; animation: fadeIn ease .3s; @@ -50,6 +62,7 @@ input { box-sizing: inherit; border: inherit; outline: inherit; + color: var(--text); padding: .25em .5em .25em; } @@ -115,3 +128,4 @@ span { 0% {opacity: 0;} 100% {opacity: 1;} } +