dark theme
This commit is contained in:
parent
98d434061e
commit
cbaf8573c1
@ -21,6 +21,7 @@
|
||||
"no-extra-parens": [
|
||||
"error",
|
||||
"functions"
|
||||
]
|
||||
],
|
||||
"no-unused-vars": "off"
|
||||
}
|
||||
}
|
||||
|
19
index.html
19
index.html
@ -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
42
index.js
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user