Hacker News Dark Mode

Process

I took the original CSS file and applied as few as possible changes in order to set up a Dark Mode. I took the original literal color values (like #000000) and used them to set up a list of initial CSS Variables:

:root {
  --black: #000000;
  --dark-grey: #222;
  --light-grey: #828282;
  --lightest-grey: #eee;
  --white: #ffffff;
  --orange: #ff6600;
  --beige: #f6f6ef;
}

I then set up semantic variables by referencing initial variables:

:root {
  --page-background: var(--white);
  --accent: var(--orange);
  --text: var(--light-grey);
  --text-strong: var(--black);
  --border: var(--dark-grey);
  --background: var(--beige);
  --input-background: var(--white);
  --input-border: var(--lightest-grey);
}

At this point, the site should look exactly the same.

For Dark Mode, we could use the CSS media query prefers-color-scheme. However, the user might prefer Hacker News in light mode, whilst having his OS in Dark Mode. Since there is no way to setup a color scheme preference per website, we'll be using a data attribute on the <html> element:

<html lang="en" op="news" data-theme="dark">

This also makes it easier me to force the Dark Mode for demonstration purposes.

This theme attribute can be targeted with CSS:

:root[data-theme="dark"] {
  --page-background: var(--darkest-blue);
  --accent: var(--blue);
  --text: var(--light-blue);
  --text-strong: var(--lightest-grey);
  --border: var(--light-blue);
  --background: var(--dark-blue);
  --input-border: var(--dark-blue);
  --input-background: var(--darkest-blue);
  --input-border: var(--accent);
}

There were also some additional changes I had to make for the Dark Mode to work.

Dark Mode detection

For demonstration purposes, the Dark Mode is forced here by setting a data attribute on the <html> element. Ideally, this preference would be a user one, and the server would return the appropriate HTML. It is possible to detect the user's OS preference in JS:

window.matchMedia("(prefers-color-scheme: dark)").matches; // True if useOS preference is dark

But swapping the theme client-side causes flickering on load, so it should be avoided. It could however be used to detect a user's OS preference and set a default value server-side.

jgthms / hacker-news-dark-mode Goto Github PK