Adding "dark mode" to my blog

నేను జెరెమీ కీత్ యొక్క post about adding dark mode to his blog మరియు ఇది చాలా సరళంగా అనిపించింది, కాబట్టి నేను దానిని ఒక గిరగిరా ఇవ్వాలని నిర్ణయించుకున్నాను.

అందరూ చూడటానికి ఇక్కడ diff of the work . ఇది ఆశ్చర్యకరంగా సులభం (నా వైపు వెర్రి లోపాల వెలుపల). CSS వేరియబుల్స్కు మద్దతు ఇవ్వడానికి ఒక చిన్న రిఫ్యాక్టర్ ఉంది మరియు CSS అనుకూల లక్షణాలకు మద్దతు ఇవ్వని బ్రౌజర్ ఉంటే నాకు ఫాల్‌బ్యాక్ ఉందని నిర్ధారిస్తుంది, కానీ దాని గురించి. జెరెమీ చేసిన అదే పనిని నేను చాలా చక్కగా చేసాను.

డార్క్-మోడ్ సెట్ ( I hear it’s coming ) ను అనుకరించటానికి Chrome లో DevTools మద్దతు లేదు, కాబట్టి నేను ఒక సాధారణ CSS క్లాస్‌ని సృష్టించాను, అది పని చేయడాన్ని త్వరగా పరీక్షించడానికి నా HTML మూలకానికి జోడించగలను (క్రింద చూసినట్లు).

@media (prefers-color-scheme: dark) {
  html {
    --background-color: rgb(36, 36, 36);
    --text-color: #fefefe;
    --block-quote-before-color: #333;
    --link-color-visited: #7ad857;
    --post-shadow: #333;
  }

  .post.moi a[rel=me] img {
    filter: invert(0.8);
  }
}

html.dark {
  --background-color: rgb(36, 36, 36);
  --text-color: #fefefe;
  --block-quote-before-color: #333;
  --link-color: #1bcba2;
  --link-color-visited: #7ad857;
  --post-shadow: #333;
}

html.dark .post.moi a[rel=me] img {
  filter: invert(0.8);
}

డార్క్ మోడ్ కాదు

డార్క్ మోడ్

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium