NoLog.cz/gull
6
0
Fork 0
Code Issues Pull requests Releases Packages 1 Wiki Activity

[ui] Add responsive dark mode color scheme

Browse source
This commit is contained in:
bain3 2022-01-05 20:25:26 +01:00 committed by Richard Huang
parent 0f784e94f8
commit d29218b16c
No known key found for this signature in database
GPG key ID: FFDEF81D05C2EC94
2 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/index.js
View file

@ -92,11 +92,13 @@ function isValidAlias(str) {
} }
// Insert given string into the result // Insert given string into the result
function appendText(str, color = "#171717") { function appendText(str, color = "") {
let span = document.createElement('span'); let span = document.createElement('span');
span.textContent = str; span.textContent = str;
result.appendChild(span); result.appendChild(span);
span.style.color = color; if (color) {
span.style.color = color;
}
} }
// Clear out the results // Clear out the results

18
public/style.css
View file

@ -1,3 +1,15 @@
:root {
--text: #171717;
--bg: #fefefe;
}
@media(prefers-color-scheme: dark) {
:root {
--bg: #171717;
--text: #fefefe;
}
}
body { body {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-weight: bold; font-weight: bold;
@ -7,8 +19,8 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fefefe; background-color: var(--bg);
color: #171717; color: var(--text);
height: 100vh; height: 100vh;
animation: fadeIn ease .3s; animation: fadeIn ease .3s;
@ -50,6 +62,7 @@ input {
box-sizing: inherit; box-sizing: inherit;
border: inherit; border: inherit;
outline: inherit; outline: inherit;
color: var(--text);
padding: .25em .5em .25em; padding: .25em .5em .25em;
} }
@ -115,3 +128,4 @@ span {
0% {opacity: 0;} 0% {opacity: 0;}
100% {opacity: 1;} 100% {opacity: 1;}
} }