ChampionMastery.GG icon indicating copy to clipboard operation
ChampionMastery.GG copied to clipboard

dark Mode?

Open ontari opened this issue 5 years ago • 5 comments

Can you please implement darkmode like on youtube or other sites?

ontari avatar Jun 20 '19 21:06 ontari

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.

Derpthemeus avatar Jun 21 '19 16:06 Derpthemeus

That would be a nice feature :")

saberhosneydev avatar Feb 16 '21 11:02 saberhosneydev

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?

gian1200 avatar Apr 24 '21 23:04 gian1200

I'm currently using some rough dark blue CSS (using prefers-color-scheme and Stylus).

image

@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);
    }
}

mikaeldui avatar Dec 25 '21 08:12 mikaeldui

Simplest make-shift style I came up with for a Stylus theme:

html {
    filter: invert(1);
    background-color: white;
}
img, .chest {
    filter: invert(1);
}

Preview

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).

LWChris avatar Jun 18 '22 02:06 LWChris