Adding "dark mode" to my blog

मैंने जेरेमी कीथ के post about adding dark mode to his blog देखा और यह सरल लग रहा था, इसलिए मैंने इसे एक चक्कर देने का फैसला किया।

यहाँ है diff of the work सभी को देखने के लिए। यह आश्चर्यजनक रूप से आसान था (मेरी ओर से मूर्खतापूर्ण त्रुटियों के बाहर)। सीएसएस चर का समर्थन करने के लिए एक छोटा सा रिफ्लेक्टर था और यह सुनिश्चित करना कि अगर कोई ब्राउज़र है जो सीएसएस कस्टम गुणों का समर्थन नहीं करता है, लेकिन यह इसके बारे में है। मैंने वही काम किया जो जेरेमी ने किया था।

Chrome में कोई DevTools समर्थन नहीं था जो मुझे डार्क-मोड ( I hear it’s coming ) का अनुकरण करने देता है, इसलिए मैंने एक साधारण सीएसएस क्लास बनाई जिसे मैं अपने 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