Skip to content
Fixed-width layout

You can tell this comic is cutting-edge because it has a Dark Mode now

You can tell this comic is cutting-edge because it has a Dark Mode now published on 17 Comments on You can tell this comic is cutting-edge because it has a Dark Mode now

It’s finally time to reveal why I’ve been breaking the Leif & Thorn layout all weekend!

I’ve been pulling the CSS for colors and images into a separate stylesheet from the rest of the CSS (i.e. the fonts, the arrangement of sections, the padding…so much padding), so I could have multiple color/image themes and give everyone the option to toggle between them.

Starting with a seasonal Northern Lights theme. (And only halfway through December!)

Settling on the palette was the easy part. (And the fun part.) The hard parts were:

  • divvying up the properties correctly between the “Inkblot child theme” stylesheet and the color-scheme stylesheets, so nothing got duplicated, or accidentally dropped
  • updating a whole bunch of non-transparent images that only worked on a theme with a white background
  • combing through error-spawning code for the missing period/semicolon/curly-brace
  • learning how to keep stylesheets from getting flagged as “insecure content”
  • realizing the After Dark pages were going to try to load the default color-scheme stylesheet, so I needed a style that wouldn’t override it
  • realizing that, while keeping the default scheme from overriding the After Dark scheme, I had prevented it on loading from a bunch of other pages at all
  • giving the Firefox Code Inspector a workout
  • giving the W3C’s exhaustive guide to CSS properties a workout
  • giving Notepad++’s side-by-side document view a workout
  • truly appreciating the WordPress Header and Footer and Real-Time Find and Replace plugins
  • testing how it looks when you move an element 5 pixels to the left…then putting it back…then trying it 5 pixels to the right…
  • sitting back and waiting for the server-side cache to update so I could finally see if the live results matched the previews

…and now, finally, it’s in a state where I feel ready to show it off.

There’s a couple of new buttons in the left-hand sidebar that will let you switch between Northern Lights and the original theme, Blue Castle. Check them out.

The buttons are supposed to set a cookie in your browser that remembers your chosen theme when you visit different pages…but I can’t seem to get that part working. If anybody can take a look at the source code and figure out what’s missing, it would be much appreciated!

And in general, if you run into any new problems while browsing the site, comment here and let me know. Gotta tackle them while my debugging mojo is still flowing.

Comment Header


ahhh! I love the new Dark Theme!

When I first went on the site it had no theme, and it was just blindingly white. I reloaded the website using https:// and the dark theme seems to be working when I switch pages, but we’ll have to see what happens tomorrow. (I’m using firefox)

Thank you! <3

I actually have the dark theme as the default for this month, so it's the one that should stick even if the cookies aren’t working. And that’s what’s happening for me now — whether in https or not, if I switch to Blue Castles, the next page I visit is still back to Northern Lights 🙁

The cast page has pale green boxes around every character with the dark theme, but no equivalent in light theme so I assume it’s not intentional.
(Also Kale’s link on the cast page doesn’t link directly to him on the wiki anymore, since his last name was added on the wiki, it redirects to the page as a whole instead.)

Seconding the “pale green comment box in dark mode” comment; additionally, half of the links above the comic (Patreon, books, BICP) are still in light mode for me.

(On iOS Safari, ftr.)

… I’m also having trouble signing in with Twitter to comment, but I have no idea if that could be related to your code changes.

The comment-box styling is from a whole other stylesheet (it’s controlled by a specific plugin), so it’s a pain to override, but it should be better now (if not when this comment is posted, then no less than an hour afterward, when the server-side cache catches up).

Definitely haven’t touched anything that should be interfering with Twitter!

Update: the comment box uses HTML from a whole different domain, which means, for security reasons, I can’t change it with CSS that’s uploaded to my site.

Which means the “notify me of new comments” text is going to be black no matter what — all I can do is give that area a light-colored background.

As for the images, you still have the non-transparent versions cached…guess I better put them in a different directory to make sure everyone’s browsers load the new ones.

IMHO those four-corners things in lists should be more than 1em to the left. They are touching the text now. -2em looks better.

They’re not touching the text on my screen — what browser are you using, and can you take a screenshot?

… ok, this might’ve been cache issue. It was -1em and looked bad and touching text. It’s -1.2em now and while I still think -2em would look even better, it’s not touching the text now and looks much better than before.

Browser is Palemoon, a Firefox clone.

Another note: Even on https, some images seem to be http, including comicrocket-mine.png, rss.png, deviantart-mine.png, tvtropes-mine.png, patreon-mine.png, ko-fi-mine.png, box-twc.png, box-email.png, RainyDayDreams_banner_468x60.jpg and leifanthorn-xmasbg.png. It causes the lock-with-warning “Not secure” icon.

Leave a Reply

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar