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
Copy file name to clipboardExpand all lines: _posts/2024-09-07-dark-mode.md
+18-15Lines changed: 18 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
1
---
2
2
layout: post
3
-
title: Dark Mode on Websites with CSS @media Queries
3
+
title: Dark Mode with CSS @media Queries
4
4
date: 2024-09-07
5
5
categories: dark mode, dark theme, night mode, night theme, colour scheme, jekyll, css, github pages, static websites
6
6
permalink: /dark-mode
7
7
---
8
8
9
9
# Why Dark Mode
10
10
11
-
For users visiting your website in a dark room or at night, it is often less straining for the eyes if your webpage to be displayed in [dark mode][dark-mode].
11
+
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 [dark mode][dark-mode] does.
12
12
13
13
<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.">
14
14
@@ -19,12 +19,14 @@ From [MDN Web Docs][mdn]:
19
19
20
20
## For Non-Static-Site-Generator Websites
21
21
22
+
There also exists a [video guide by Eric Murphy on Youtube][yt-vid] if you prefer to follow along with a video.
23
+
22
24
### External Style Sheet
23
25
24
-
In your HTML document, you can either link an external CSS style sheet in your`<head>`if you wish to separate your code out more:
26
+
To separate code between HTML and CSS, link an external CSS style sheet in the`<head>`tag in the HTML document. Like so:
25
27
26
28
```html
27
-
<!-- something resembling this -->
29
+
<!--should resemble something like this -->
28
30
<!DOCTYPE html>
29
31
...
30
32
<html>
@@ -73,8 +75,6 @@ You can also type out your CSS code in between `<style>` tags if you prefer ever
73
75
</html>
74
76
```
75
77
76
-
There also exists a [video guide by Eric Murphy on Youtube on how to do this similarly][yt-vid] if you prefer to follow along with a video or if you find reading this blog-style guide boring becuase Tiktok and Instagram Reels have fried your zoomer ADHD brain beyond repair.
77
-
78
78
## For Static-Site-Generator Websites
79
79
80
80
It is a little bit less straightforward to do this with a static site generator like Jekyll (which has native support with Github Pages and is what this website uses) or Hugo as you have to override the theme's CSS style sheet.
@@ -104,17 +104,11 @@ And you should get something like this after adding the dark mode code.
104
104
}
105
105
```
106
106
107
-
For other static-site-generator generated websites, you can refer to the official documentation found online for information on how to override your theme's CSS.
108
-
109
-
# Why Not Use a Toggleable Button Instead (Rant Warning)
110
-
111
-
Rather than defaulting to light or dark mode and having a separate button (that uses Javascript) for the user to manually switch to their preferred theme, it might be better to automatically default to what they already set their browser's preferred theme to. This is so they do not get flashbanged by their monitors at night if your website defaults to light theme and they open their browser to your website for the first time, or without toggling it to dark mode the last time they visited, or just simply because your website does not store cookies about their previously toggled theme either due to your lack of know how, respect for user privacy, or plain laziness.
112
-
113
-
You can also include the button to toggle themes on the website alongside if you like having more buttons on your website for showing off your Javascript skills to potential employers (I know the tech job market out there is rough for fresh grads right now) or just want to follow the current web trend on including more and more unnecessary Javascript bloat on websites with features that can be done easily with simple HTML and CSS.
107
+
For other static-site-generator websites, you can refer to the official documentation found online for information on how to override your theme's CSS.
114
108
115
109
# Configure Giscus Theme
116
110
117
-
To set it to match your website (if you have done the CSS `@media` trick shown above), simply set the `<script>`'s `data-theme` attribute value to `"preferred_color_scheme"` as shown below.
111
+
To set `giscus` comments to match the website if you have done the CSS `@media` trick shown above, simply set the `<script>`'s `data-theme` attribute value to `"preferred_color_scheme"` as shown below.
118
112
119
113
```html
120
114
<scriptsrc="https://giscus.app/client.js"
@@ -128,9 +122,18 @@ To set it to match your website (if you have done the CSS `@media` trick shown a
128
122
</script>
129
123
```
130
124
131
-
Read more on adding Giscus comments to your website at [my previous blog post about it][giscus-blog].
125
+
# Why Not Use a Toggleable Button Instead
126
+
127
+
Rather than defaulting to light or dark mode and having a separate button for the user to manually switch to their preferred theme, it might be better to automatically default to what they already set their browser's preferred theme to.
128
+
129
+
This is so they do not get flashbanged by their monitors at night if your website defaults to light theme and they open their browser to your website for the first time, if they did not toggle it to dark mode the last time they visited, or if your website does not store cookies about their previously toggled theme.
130
+
131
+
You can also include the button to toggle themes on the website alongside defaulting it if you want, but I find this an unnecessary use of [Javascript][js].
132
+
133
+
If you found this blog post useful, leave a comment down below! Check out how to add `giscus` comments to your own website on [my previous blog post guide for it][giscus-blog].
You may have noticed while reading my blog posts that the way the text are aligned are a little different from the usual way the ones from other websites are --- that they always align as blocks of text no matter how you change your browser window's size. This is because using CSS, I have justified the text on my website.
9
+
You may have noticed while reading my blog posts that the way the text are aligned are a little different from the usual way the ones from other websites are --- that they always align as blocks of text no matter how you change your browser window's size. This is because I have justified the text on my website using CSS.
10
10
11
11
# How to Justify
12
12
13
13
It is actually pretty simple --- to justify your body text, just add this to your CSS style sheet:
14
14
15
15
```css
16
16
body {
17
-
...
18
17
text-align: justify;
19
18
}
20
19
```
21
20
22
-
This will justify your text so it all aligns neatly in a block-like shape.
21
+
This will justify your text so it all aligns neatly without jagged edges.
23
22
24
23
# How to Hyphenate
25
24
26
-
Though there is a way to do this with Javascript using [Hyphenopoly.js][hyphenopoly], hyphenation already has built-in functionality in CSS and it is widely supported by browsers, so it is a no-brainer to do it the CSS way, unless your target audience has a `user-agent` that does not support CSS' `hyphens` property for some reason.
25
+
Although there is a way to do this with Javascript using [Hyphenopoly.js][hyphenopoly], hyphenation is a built-in functionality in CSS and it is widely supported by browsers.
27
26
28
27
To add hyphenation to your body text, simply add the `hyphens` property to your body section in your CSS style sheet and set it to `auto`, like so:
29
28
30
29
```css
31
30
body {
32
-
...
33
31
hyphens: auto
34
32
}
35
33
```
36
34
37
-
So now your text wraps words using hyphens, but why do we need to use hyphens when we can make blocks of text by just justifying?
38
-
39
35
# Why Hyphenate
40
36
41
-
Text justification can make your paragraphs look tidier, but this has the potential side-effect of awkwardly stretching out whitespace in between words --- which can create or worsen an often undesirable effect commonly referred to as 'rivers of white,' which are known to trip up dyslexic readers, making your writing less accessible as a result.
37
+
So now your text wraps words using hyphens, but why do we need to use hyphens that ruin the perfect edges that justifying makes?
38
+
39
+
Text justification can make your paragraphs look tidier, but this has the potential side-effect of awkwardly stretching out the whitespace between words --- which can create and worsen an undesirable effect commonly referred to as 'rivers of white', which is known to trip up dyslexic readers and decrease accessibility.
42
40
43
41
<imgsrc="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Typographic_river_marking.svg/1280px-Typographic_river_marking.svg.png"alt="Image from Wikipedia with visual marking around an example of a 'rivers of white' effect.">
44
42
45
-
This is also a highly-cited reason as to why justification is generally [not][applewood][recommended][max] for text output on browsers and on the web.
43
+
This is also a common reason as to why justification is generally [not][applewood][recommended][max] for text output on the web.
44
+
45
+
By hyphenating, even though it does not solve it completely, it will reduce the effect dramatically.
46
46
47
47
# Other Blogs That Justify
48
48
@@ -62,3 +62,20 @@ Here are a list of other blogsites that I know of that use justified text:
<p>This is the website where I write about whatever inspires me to write in form of <ahref="/blogs">blogs</a>. It is made using <ahref="https://jekyllrb.com">Jekyll</a>’s <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>This is the website where I write about whatever inspires me to write in form of <ahref="/">blogs</a>. It is made using <ahref="https://jekyllrb.com">Jekyll</a>’s <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
47
48
48
<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>
0 commit comments