abs3nt/lmgtfy
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

dark theme

Browse Source
This commit is contained in:
Nato Boram 2021-10-25 10:42:00 -04:00
parent 98d434061e
commit cbaf8573c1
No known key found for this signature in database
GPG Key ID: 478E3C64BF88AFFA
3 changed files with 58 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.json
View File

@ -21,6 +21,7 @@
"no-extra-parens": [
"error",
"functions"
]
],
"no-unused-vars": "off"
}
}

19
index.html
View File

@ -37,7 +37,18 @@
<title>Let me Google that for you</title>
</head>
<body>
<body class="bg-light">
<!-- Navbar -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<div></div>
<button
class="btn bi-brightness-high btn-light"
onclick="toggleBrightness()"
></button>
</div>
</nav>
<!-- Content -->
<div class="container">
<form class="row g-3 text-center mt-5">
@ -52,7 +63,7 @@
<!-- Input -->
<div
class="
bg-body
bg-light
border border-1 border-light
input-group
rounded-pill
@ -60,12 +71,12 @@
"
>
<label
class="input-group-text bi-search bg-body border-0"
class="bg-light bi-search border-0 input-group-text text-dark"
for="input"
id="searchicon"
></label>
<input
class="form-control border-0 bg-body"
class="form-control border-0 bg-light text-dark"
id="input"
maxlength="2048"
name="search"

42
index.js
View File

@ -19,6 +19,8 @@ window.addEventListener("load", async () => {
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)
}
}
}