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": [ "no-extra-parens": [
"error", "error",
"functions" "functions"
] ],
"no-unused-vars": "off"
} }
} }

19
index.html
View File

@ -37,7 +37,18 @@
<title>Let me Google that for you</title> <title>Let me Google that for you</title>
</head> </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 --> <!-- Content -->
<div class="container"> <div class="container">
<form class="row g-3 text-center mt-5"> <form class="row g-3 text-center mt-5">
@ -52,7 +63,7 @@
<!-- Input --> <!-- Input -->
<div <div
class=" class="
bg-body bg-light
border border-1 border-light border border-1 border-light
input-group input-group
rounded-pill rounded-pill
@ -60,12 +71,12 @@
" "
> >
<label <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" for="input"
id="searchicon" id="searchicon"
></label> ></label>
<input <input
class="form-control border-0 bg-body" class="form-control border-0 bg-light text-dark"
id="input" id="input"
maxlength="2048" maxlength="2048"
name="search" name="search"

42
index.js
View File

@ -19,6 +19,8 @@ window.addEventListener("load", async () => {
input = document.getElementById("input") input = document.getElementById("input")
input.value = "" input.value = ""
setBrightness(JSON.parse(localStorage.getItem("dark") ?? "false"))
if (!query.search) return if (!query.search) return
await setMessage("Step 1", "Type in your question") await setMessage("Step 1", "Type in your question")
@ -46,8 +48,10 @@ window.addEventListener("load", async () => {
}) })
function makeCursor() { function makeCursor() {
const dark = JSON.parse(localStorage.getItem("dark") ?? "false")
const cursor = document.createElement("span") const cursor = document.createElement("span")
cursor.className = "bi-cursor-fill" cursor.className = `bi-cursor-fill text-${dark ? "light" : "dark"}`
cursor.id = "cursor" cursor.id = "cursor"
document.body.appendChild(cursor) document.body.appendChild(cursor)
return cursor return cursor
@ -117,3 +121,39 @@ async function setMessage(heading, content, type = "alert-primary") {
message.classList.remove("opacity-0") message.classList.remove("opacity-0")
await new Promise(resolve => setTimeout(resolve, 300)) 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)
}
}
}