From cbaf8573c1e5afc146a59c5a92050137e3345e2b Mon Sep 17 00:00:00 2001 From: Nato Boram Date: Mon, 25 Oct 2021 10:42:00 -0400 Subject: [PATCH] dark theme --- .eslintrc.json | 3 ++- index.html | 19 +++++++++++++++---- index.js | 42 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 58 insertions(+), 6 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index ceea5f1..f8fd0b7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -21,6 +21,7 @@ "no-extra-parens": [ "error", "functions" - ] + ], + "no-unused-vars": "off" } } diff --git a/index.html b/index.html index d0df848..f828ffc 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,18 @@ Let me Google that for you - + + + +
@@ -52,7 +63,7 @@
{ input = document.getElementById("input") input.value = "" + setBrightness(JSON.parse(localStorage.getItem("dark") ?? "false")) + if (!query.search) return await setMessage("Step 1", "Type in your question") @@ -46,8 +48,10 @@ window.addEventListener("load", async () => { }) function makeCursor() { + const dark = JSON.parse(localStorage.getItem("dark") ?? "false") + const cursor = document.createElement("span") - cursor.className = "bi-cursor-fill" + cursor.className = `bi-cursor-fill text-${dark ? "light" : "dark"}` cursor.id = "cursor" document.body.appendChild(cursor) return cursor @@ -117,3 +121,39 @@ async function setMessage(heading, content, type = "alert-primary") { message.classList.remove("opacity-0") await new Promise(resolve => setTimeout(resolve, 300)) } + +function toggleBrightness() { + const dark = JSON.parse(localStorage.getItem("dark") ?? "false") + localStorage.setItem("dark", !dark) + setBrightness(!dark) +} + +/** + * Apply brightness on the page. + * @param {boolean} dark + */ +function setBrightness(dark) { + const newbrightness = dark ? "dark" : "light" + const oldBrightness = dark ? "light" : "dark" + + for (const oldClass of [ + `bg-${oldBrightness}`, + `navbar-${oldBrightness}`, + `btn-${oldBrightness}`, + `border-${oldBrightness}`, + ]) { + const newClass = oldClass.replace(oldBrightness, newbrightness) + for (const element of document.querySelectorAll(`.${oldClass}`)) { + element.classList.remove(oldClass) + element.classList.add(newClass) + } + } + + for (const oldClass of [`text-${newbrightness}`]) { + const newClass = oldClass.replace(newbrightness, oldBrightness) + for (const element of document.querySelectorAll(`.${oldClass}`)) { + element.classList.remove(oldClass) + element.classList.add(newClass) + } + } +}