I Added Dark Mode To My Personal Website (And It Sucks)

I Added Dark Mode To My Personal Website (And It Sucks)


Hi, I’m Farai. Welcome to my random corner of the internet. Recently, dark mode has become a big deal. I didn’t really care about it until my devices
got iOS 13. Not only did it have dark mode, but it toggled
it automatically. To jump on all the hype (and to intoduce my
new YouTube channel), I decided to add dark mode to my personal website… poorly. Here’s how. Until recently, the only way to add dark mode
was through JavaScript. Nowadays, CSS now has a media query called
`prefers-color-scheme` which allows for the detection of system-wide color scheme (dark,
light or unspecified) and lets you add CSS specific to that color scheme. There are smart ways to support dark mode,
but the way I did it isn’t one of them. The thing which made the biggest difference
is changing the background and flipping the font color. Note that I’m using Sass here and given that
I’ll be reusing those colors quite a bit, I decided to make variables for them. Looks dramatic at first, but that’s because
of the background; the header is still bright blue. To fix that, I got rid of the border along
with moving the rgb slider to some sort of dark-greenish blue color with rgb value `28,
40, 46`, which is very close to Charleston green– the color used by the people of Charleston
after the American Civil War, so Wikipedia says. Even though the delimiting border isn’t there
anymore, there’s a slight difference between the background and the header background. Another thing that really popped out to me
was how bad the contrast between some of the links and the background is. I would have overlooked it had the contrast
not been so stark and yet it was. The main changes here had to do with making
the various link states more noticable. Remember how I indiscriminately inverted the
colors? Turns out that made all the text colors white
for the most part, including in blockquotes which I hadn’t changed. Not really suprising, but it was. Thankfully the fix is trivial as I just removed
the background color. Another case where the indiscriminate color
switch was a problem was in tables. The tables have a black border and a striped
pattern on every other row with a light blue background. Besides being virtually unreadable, it also
looks terrible. With a bit of CSS, it looks decent again. While I have dark mode now, it sucks. Here’s why: 1. !important is overused. There is a way to structure CSS (one that
wouldn’t use so many `!important` statements), but the way I did it isn’t one. 2. The website’s CSS is poorly structured. 3. There’s no way to switch the theme in case
someone doesn’t like it, which is likley because 4. it’s ugly. I’ll fix dark mode when I start my great website
redesign yet again. Thanks for watching my first YouTube video
(on this specific channel at least). My channel, Farai Gandiya, has a creative
name but this is just until I can get a voice. The main focus will be programming but given
that I’m trying to figure things out, there might be some tangents. I’ve got the ambitious goal of 12 videos by
the end of the year, much like the 15 Blog Posts in 15 Days Challenge. The main subscriber goals I have are: 1 subscriber to prove that someone likes my
videos and 1000 subscribers to unlock monetization. Help me out by subscribing to my YouTube channel
and sharing my videos. Also, if you were particularly inspired by
this video, do me a solid by sponsoring me on Patreon, sending me a tip on Paypal, getting
a domain though my Namecheap affiliate link or by buying something through my Amazon affiliate
link. Later!

Leave a Reply

Your email address will not be published. Required fields are marked *