I did not realize that Ghost's default theme, Casper, has a Dark mode for the longest time. By default, it is only enabled if the local OS has dark mode enabled and the browser exposes that information.

Note: If you're using Capser 4.x, see the update at the bottom.

I wanted dark mode to be enabled by default. The easiest way to do that is by removing the @media line that looks like this in assets/css/screen.css (around line 2860 as of 3.0.9):

 /* 12. Dark Mode 
 /* ---------------------------------------------------------- */
 @media (prefers-color-scheme: dark) {
 body {
 color: rgba(255, 255, 255, 0.75);
 background: var(--darkmode);

You'll also need to delete the closing bracket for that @media block. It should be at the end of the file. Optionally, feel free to fix the indentation.

If done properly, the diff should look similar to this:

diff --git i/assets/css/screen.css w/assets/css/screen.css
index 59449b2..0dea855 100644
--- i/assets/css/screen.css
+++ w/assets/css/screen.css
@@ -2859,7 +2859,6 @@ Usage (In Ghost editor):
 
 /* 12. Dark Mode
 /* ---------------------------------------------------------- */
-@media (prefers-color-scheme: dark) {
     body {
         color: rgba(255, 255, 255, 0.75);
         background: var(--darkmode);
@@ -3076,4 +3075,3 @@ Usage (In Ghost editor):
     .subscribe-form .success .message-success {
         color: color(var(--green) l(+5%) s(-5%));
     }
-}

Note: You'll need to compile/build the css if you change assets/css/screen.css, see the README.md of the theme for instructions. You can also take a shortcut and edit assets/built/css/screen.css directly.

Update 2021/04/26: As of Casper 4.x, there is now an official FAQ on how to enable dark mode. You can either follow the instructions in that FAQ which uses javascript to add a class, or simply edit default.hbs and add the dark-mode class to the html tag at the top like this:

<!DOCTYPE html>
<html lang="{{@site.locale}}" class="dark-mode">
<head>

References: