Detectar dark-mode en browsers

16/Sep/2020 337

Hace ya varios meses que diferentes sistemas operativos y aplicaciones traen como opcional el dark-mode, donde todo lo claro se ha vuelto oscuro. ¿Moda, accesibilidad? Realmente no he indagado, pero eso trae pequeños problemas en cuanto al uso de navegadores web. Me topé con uno en específico que me llevó a escribir este artículo.

Hechos:

Navegando por Internet y con varios enlaces abiertos, veo que un favicon de color negro apenas se nota en el tab de color gris oscuro.

Detectar dark-mode en browsers

Pequeño problema pero solucionable. Hay 2 técnicas para detectar el dark-mode en el browser: con CSS y con JS. Veamos ambos códigos:

CSS:

/* Dark-mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}
/* Light-mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

CSS Dark-mode

JS:

Para hacerlo con JavaScript debes detectar el mismo @media (prefers-color-scheme: dark) para luego retornar true/false y hacer lo que quieras con el DOM:

window.matchMedia('(prefers-color-scheme: dark)').matches

Por ejemplo, en el siguiente código cambiamos el favicon.ico si tiene el modo dark habilitado:

const favicon = document.querySelector('#favicon')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  favicon.href="favicon-dark.ico"
}

Dark-mode JS

Links:

Comentarios

  1. isotretinoin side effects [#]

    accutane side effects accutane medication

  2. bactrim generic [#]

    sulfamethoxazole for uti bactrim dosing

  3. dapoxetineus.com [#]

    doctor medical http://dapoxetineus.com – priligy online prescription

  4. ivermectin for humans for sale [#]

    sztromektol folyadГ©k https://stromectolforte.com/# ivermectin for humans prescription ivermectin drug

  5. order ivermectin [#]

    ivermectin 10 Щ…ЫЊЩ„ЫЊ ЪЇШ±Щ… http://stromectolforte.com/# ivermectin 6mg ivermectin uk

  6. curry 6 [#]

    I really wanted to make a simple message to express gratitude to you for the splendid instructions you are posting here. My extensive internet search has at the end been honored with high-quality details to exchange with my family members. I ‘d suppose that we website visitors actually are undoubtedly blessed to be in a wonderful website with many brilliant individuals with very helpful guidelines. I feel really lucky to have seen the site and look forward to some more thrilling times reading here. Thank you once more for everything.

  7. supreme outlet [#]

    My wife and i have been really glad when Ervin could finish off his basic research using the precious recommendations he made from your very own weblog. It is now and again perplexing to simply always be giving freely instructions which usually men and women have been making money from. And we all see we need the website owner to be grateful to because of that. The entire explanations you’ve made, the easy website menu, the relationships you will aid to promote – it’s all astounding, and it’s helping our son and the family know that this issue is excellent, which is highly mandatory. Thank you for all the pieces!

  8. golden goose [#]

    Thank you for your own labor on this site. My daughter really loves managing investigations and it’s easy to see why. All of us learn all about the dynamic form you render reliable tricks via this blog and therefore inspire contribution from other individuals on this concept then our favorite princess is in fact becoming educated a whole lot. Have fun with the remaining portion of the year. Your doing a powerful job.

  9. jordan 4 [#]

    I precisely wanted to say thanks once again. I’m not certain what I would’ve sorted out in the absence of the entire recommendations contributed by you directly on such situation. It was the traumatic matter in my circumstances, nevertheless looking at your expert strategy you processed that made me to leap with contentment. I will be happier for your service and even have high hopes you really know what a great job you are undertaking educating people all through your website. I am sure you’ve never come across any of us.

  10. goyard handbags [#]

    I not to mention my guys ended up following the nice strategies found on your website and then immediately got an awful suspicion I had not expressed respect to the web blog owner for those secrets. These young men were definitely totally warmed to see all of them and have sincerely been using these things. Appreciate your simply being indeed helpful and for picking out these kinds of fine subject matter most people are really wanting to be informed on. My very own sincere regret for not expressing gratitude to you sooner.

  11. supreme t shirt [#]

    Thank you for all of the effort on this site. Betty really loves setting aside time for investigation and it’s obvious why. All of us hear all of the lively way you make very useful ideas through the web blog and even improve response from website visitors on the article then our simple princess is truly starting to learn a whole lot. Have fun with the remaining portion of the new year. Your doing a fabulous job.

  12. curry shoes [#]

    I have to show appreciation to the writer for bailing me out of such a dilemma. Right after surfing around throughout the search engines and getting ideas that were not powerful, I assumed my entire life was over. Existing minus the strategies to the problems you’ve fixed through your main short article is a critical case, as well as ones that would have badly damaged my entire career if I had not noticed your blog post. Your main know-how and kindness in touching every aspect was valuable. I’m not sure what I would’ve done if I had not encountered such a point like this. It’s possible to at this moment look forward to my future. Thank you so much for this expert and results-oriented help. I will not be reluctant to propose your web blog to any individual who needs to have care about this problem.

  13. hermes birkin [#]

    I want to point out my respect for your generosity supporting visitors who need guidance on this particular issue. Your special dedication to getting the message all over turned out to be astonishingly beneficial and have in every case made professionals much like me to attain their dreams. This warm and friendly help and advice means a whole lot a person like me and somewhat more to my fellow workers. Thanks a lot; from everyone of us.

  14. ivermectin cost [#]

    ivermectin for humans http://stromectolforte.com/# ivermectin buy stromectol

  15. GaloInvake [#]

    cost of zithromax in canada

  16. accutane before and after [#]

    accutane coupon roaccutane

  17. bactrim dosing [#]

    side effects of bactrim ds trimethoprim polymyxin b

CSSLab