You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Luckily for us, the great mathematician Gauss found a closed-form solution for finding the sum of integers to n when he was apparently 9 years-old or something (dubious):
119
+
Luckily for us, the great mathematician Gauss had already found a closed-form solution for finding the sum of integers from 1 to n when he was apparently 9 years-old or something (dubious):
<p>Welcome to my website! <ahref="/">This</a> is where I write about whatever I think is interesting or helpful. It is made with <ahref="https://jekyllrb.com">Jekyll</a> using the <ahref="https://github.com/jekyll/minima">Minima</a> theme and is hosted for free on <ahref="https://pages.github.com">Github Pages</a>.</p>
46
+
<p>Welcome to my website! Here is where I write blog posts on technical topics.</p>
47
+
48
+
<p>It is made with <ahref="https://jekyllrb.com">Jekyll</a> using the <ahref="https://github.com/jekyll/minima">Minima</a> theme and is hosted for free on <ahref="https://pages.github.com">Github Pages</a>.</p>
47
49
48
50
<p>The <codeclass="language-plaintext highlighter-rouge">source code</code> for this website can be found on its <ahref="https://github.com/de-soot/de-soot.github.io">Github repository</a>.</p>
<metaproperty="twitter:title" content="Dark Mode without Javascript" />
19
19
<scripttype="application/ld+json">
20
-
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"This guide explains why and how to easily make a dark theme for your website using CSS @media queries.","headline":"Dark Mode without Javascript","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/dark-mode"},"url":"http://localhost:4000/dark-mode"}</script>
20
+
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"Alternative title: System default theme for webpages","headline":"Dark Mode without Javascript","mainEntityOfPage":{"@type":"WebPage","@id":"https://de-soot.github.io/dark-mode"},"url":"https://de-soot.github.io/dark-mode"}</script>
<p>This guide explains why and how to easily make a dark theme for your website using CSS <codeclass="language-plaintext highlighter-rouge">@media</code> queries.</p>
50
+
<p>Alternative title: System default theme for webpages</p>
51
51
52
-
<p>Alternative title: System default theme for websites</p>
53
-
54
-
<h1id="why-dark-mode">Why Dark Mode</h1>
52
+
<h2id="why-dark-mode">Why Dark Mode</h2>
55
53
56
54
<p>For users visiting a website in a dark room at night, it would be less straining for their eyes if the webpage was displayed in a darker colour to match the environment, which is what <ahref="https://en.wikipedia.org/wiki/Light-on-dark_color_scheme">dark mode</a> does.</p>
57
55
58
56
<p><imgsrc="https://zerowidthjoiner.net/uploads/2020/04-11/light-vs-dark.png" alt="Comparison image of light theme on the left and dark theme on the right." /></p>
59
57
60
-
<h1id="how-to-do-it">How to do it</h1>
58
+
<h2id="how-to-do-it">How to do it</h2>
61
59
62
60
<p>From <ahref="https://developer.mozilla.org/en-US">MDN Web Docs</a>:</p>
63
61
<blockquote>
64
62
<p>The @media <ahref="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a><ahref="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a> can be used to apply part of a <ahref="https://en.wikipedia.org/wiki/Style_sheet_(web_development)">style sheet</a> based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.</p>
<p>To separate code between HTML and CSS, link an external CSS style sheet in the <codeclass="language-plaintext highlighter-rouge"><head></code> tag in the HTML document. Like so:</p>
<h3id="with-the-style-html-tag">With the <style> HTML tag</h3>
96
+
<h4id="with-the-style-html-tag">With the <style> HTML tag</h4>
99
97
100
98
<p>You can also type out your CSS code in between <codeclass="language-plaintext highlighter-rouge"><style></code> tags if you prefer everything to be contained in one HTML document:</p>
101
99
@@ -119,7 +117,7 @@ <h3 id="with-the-style-html-tag">With the <style> HTML tag</h3>
119
117
<spanclass="nt"></html></span>
120
118
</code></pre></div></div>
121
119
122
-
<h2id="for-static-site-generator-websites">For Static Site Generator Websites</h2>
120
+
<h3id="for-static-site-generator-websites">For Static Site Generator Websites</h3>
123
121
124
122
<p>It is a little bit less straightforward to do this with static site generators like Jekyll (which is what this website uses) or Hugo, as you have to override the theme’s CSS style sheet.</p>
125
123
@@ -148,7 +146,7 @@ <h2 id="for-static-site-generator-websites">For Static Site Generator Websites</
148
146
149
147
<p>For other static site generator websites, you can refer to the official documentation found online for information on how to override your theme’s style-sheet.</p>
<p>To set <codeclass="language-plaintext highlighter-rouge">giscus</code> comments to match the website if you have done the CSS <codeclass="language-plaintext highlighter-rouge">@media</code> trick shown above, simply set the <codeclass="language-plaintext highlighter-rouge"><script></code>’s <codeclass="language-plaintext highlighter-rouge">data-theme</code> attribute value to <codeclass="language-plaintext highlighter-rouge">"preferred_color_scheme"</code> as shown below.</p>
<p>If you found this blog post useful, leave a comment down below! Also check out how to add <codeclass="language-plaintext highlighter-rouge">giscus</code> comments to your own website on my <ahref="/giscus-comments">previous guide for it</a>.</p>
0 commit comments