ChampionMastery.GG
ChampionMastery.GG copied to clipboard
dark Mode?
Can you please implement darkmode like on youtube or other sites?
I plan on eventually adding a dark theme, but it might be a while before I get around to doing so since there are a few other things I want to do first.
That would be a nice feature :")
Maybe just a quick implementation of prefers-color-scheme
? Nothing fancy, just some color changes at CSS level. Something like
"Part 2- Dark Mode at the Operating System Level" from https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
Are you open to Pull Requests?
I'm currently using some rough dark blue CSS (using prefers-color-scheme
and Stylus).
@media (prefers-color-scheme: dark) {
body, #navbar, .well {
background: rgb(0,0,20);
color: white;
}
th, td, table.well, #navbar {
border-color: rgb(0,0,20);
}
#navbar {
background: rgb(0,0,30);
border-color: rgb(0,0,40);
}
.notEarned {
-webkit-filter: brightness(50%) opacity(50%);
filter: brightness(50%) opacity(50%);
}
.progressBar-outer {
background: rgb(36,36,36);
}
}
Simplest make-shift style I came up with for a Stylus theme:
html {
filter: invert(1);
background-color: white;
}
img, .chest {
filter: invert(1);
}
Edit: background-color
used to be black
which worked back then (see screenshot), now it'll work when it's white
(which makes more sense with the invert(1)
filter, no idea why it worked back then).