LINICKX.com

Adding Dark Mode to your website is super easy!

Nick Bettison — Sat, 07 Mar 2020 11:05:00 +0000

Whilst tweaking my website at the beginning of the year I was surprised how easy it is to support Light Mode or Dark Mode themes. The implementation below isn't a user toggle Javascript thing, browsers now have a "media preference", that is if your iPhone, Mac or Windows 10 is setup for Light Mode then it'll prefer a lighter style and the opposite is true, if you're setup for Dark Mode then a darker style is displayed.

Example 1: Light/White Website with optional Dark Mode.

To start with, let's take the initial template from bootstrap and add 8 lines of code (mostly whitespace!) to include an optional inverted view; this is what we add...

<style type="text/css">
    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: white;
      }
    }
</style>

So the final page looks like this, save it as light_eg.html on your desktop.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>

    <style type="text/css">
        @media (prefers-color-scheme: dark) {
          body {
            background-color: black;
            color: white;
          }
        }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>Example HTML from <a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/">bootstrap</a>

  </body>
</html>

By default the page will be the normal bootstrap colours, dark text on a white background but if the user has setup their device in Dark Mode the site will be white text on a black background.

Example 2: Dark/Black Website with optional Light Mode.

Ok, so what if your use case was the same as mine; your site is normally dark but you want to provide a brighter version for people who prefer the lighter side of the net.

This time, lets start with the full HTML example: dark_eg.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootswatch CSS -->

    <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cyborg/bootstrap.min.css" rel="stylesheet" integrity="sha384-l7xaoY0cJM4h9xh1RfazbgJVUZvdtyLWPueWNtLAphf/UbBgOVzqbOTogxPwYLHM" crossorigin="anonymous">

    <title>Hello, world!</title>

    <style type="text/css">
        @media (prefers-color-scheme: light) {
          body, h1, h2, h3 {
            background-color: white;
            color: black;
          }
        }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>Example HTML from <a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/">bootstrap</a> with dark <a href="https://bootswatch.com/cyborg/">Cyborg Theme</a>

  </body>
</html>

In this example we're using a dark bootstrap theme called cyborg, again we add in our 8 lines, but notice something a little different:

<style type="text/css">
    @media (prefers-color-scheme: light) {
      body, h1, h2, h3 {
        background-color: white;
        color: black;
      }
    }
</style>

In the dark example, additional changes are needed for h1, h2 & h3 so this is the gotcha to look out for when using off-the-shelf themes. In the cyborg theme, the headings do not inherited their colour from body, they are hard set; when the colour scheme is inverted the white on white text disappears. To fix the issue some additional h1, h2 & h3 colours are needed, so make sure you test your site in each mode to capture any missing options.

Footnotes

This feature isn't dependent on bootstrap, it simply makes a good example as it's a style/css framework that's very common.
User's cannot choose a theme, this approach simply honours their system wide preference
Inspired by Flavio's dark mode post: https://flaviocopes.com/dark-mode/

CSS Styling Nginx Directory Listings

Nick Bettison — Sun, 15 Feb 2015 18:22:00 +0000

Following the sucess of my apache styling post, I thought I'd share how I've styled /files now that linickx.com is powerd by nginx.

A quick google will tell you that fancyindex is on option however, I'm running CentOS and the supplied rpm doesn't come with that moduel.... and I'm not about to start compiling!

What I did find is that the rpm comes with is, http_addition_module. It's not a perfect solution for applying HTML/CSS to autoindex because the output ends up with two lots of html & body tags... anyway onto the example!

In my nginx config, I've added:

location /files {
  add_before_body /files/nginx-before.txt;
  add_after_body /files/nginx-after.txt;
  autoindex on;
}

autoindex enables directory listings; the two text files, nginx-before.txt & nginx-after.txt apply the style.

You can view my example files here:

Here's a couple of screenshots:


Before		After

Enjoy!

Twittering with Tools

nick — Sat, 16 Feb 2008 19:12:00 +0000

LINICKX.com is evolving, I'm not sure how yet but I've started by introducing twitter tools, google has changed the face of websites, according to google analytics my home page is not longer the top landing page, i.e. most people visiting my site hit the content they want directly and don't need to navigate through the site... with this in mind I'm thinking about turning linickx.com into a tumblr type thing... twitter tools allows me to post short "thoughts" and "comments" without having to go through the full WordPress write post thing.

I started the idea along time ago when photomatt introduced asides, i.e. I've always had categories and different front page presentation styles for blog posts, firefox posts, delicious posts and then everything else... so I'm thinking about taking the idea further by creating individual posts,feeds and styles for delicious links and rss shared items (from google reader).

Since I want to keep my feed clean (it's imported into many social networks like mugshot & facebook) I've used this post to filter out my new "sync" category... sync as in I'm synchronising my web life with my website :) - Oh Yeah before I foget don't add the code to functions.php as it creates a php warning, create a wordpress plugin.

My web/work/social life is quite busy - who's isn't!... so I'm a little worried about how to style the whole thing I found a nice way of quote text with css, so the tweets look good, but I'm worried that bookmarks and shared posts could make the site look cluttered or confusing, I've already had to add a "twitter reply" link to each post since the 1st thing people have asked me is what's twitter.. doh must be a UK web-ignorance thing.

I guess we'll just see how this pan's out, I've just renewed this domain, so it'd be nice to finish for the domains birthday :D

CSS Styling Apache Directory Listings.

nick — Thu, 11 Oct 2007 08:44:00 +0100

**Before.**

As part of my website overhaul, I've finally gotten round to styling my /files/ directory. I was surprised at how easy it was actually, and the benefits far out way the time taken to set it up, not only does this part of the site now "fit in", but I can apply analytics tracking and adsense ;) I'm sure there probably is a wordpress plugin that can achieve the same thing... probably better, but I find my list of plugins ever growing and since I don't need on for this I figure if Apache can do it, let Apache do it!

The work can be done in one of two ways either by pasting Apache directives into a .htaccess file (in the directory you want to apply conf to), or in your httpd.conf you can wrap it all up in a

<Directory>

tag... something like

<Directory "/var/www/html/files/"> foobar> </Directory>

below is an example of a .htaccess file as that will apply to most people:

        RewriteEngine Off
        AddType text/html .shtml
        AddOutputFilter INCLUDES .shtml
        Options Indexes Includes
        IndexOptions FancyIndexing SuppressHTMLPreamble XHTML IconsAreLinks FoldersFirst SuppressDescription
        HeaderName /files/HEADER.shtml
        ReadmeName /files/README.shtml

Since my site uses wordpress with "pretty permalinks" enabled, the 1st thing I needed to do is disable mod re-write for the directory where I wanted listing enabled. Now if you check my /files/ page you'll notice that the page title and tag line under "[LINICKX].com" change depending on what directory you are viewing, this is done with "Server Side Includes" (SSI), so the next two options in the above config set that up.

Now to take a look at the actual directory listing setup, it might be worth you taking a look at the Apache documentation for a full description, but the important ones to note are

Options Indexes Includes

to enable directory listing and switch on SSI, then you need

IndexOptions SuppressHTMLPreamble XHTML

to disable the default headers so that we can setup our style sheet and favour xHTML over HTML. Apache 2.2 users also have IndexStyleSheet available, but since I'm using CentOS4 we'll do it this way. Finally you need the HeaderName, ReadmeName directives to tell Apache which file to look for (by default Apache looks for README.html, but that won't support SSI)... note how my .shtml files are relative to my web root, these are not absolute paths on the file system, i.e. /files actually maps to /var/www/html/files.

You're now good to go, HEADER.shtml should contain all the xHTML you want to appear before the directory listing, and README.html is everything after... make sure you include all the correct \<html>, \<body> and DOCTYPE tags.

Now you'll want to get working is some dynamic content, for a simple "print current directory" you can use

<!--#echo var="REQUEST_URI"-->

in your html, further documentation on getting more magic is available here & here, I was able to knock up a simple line of code to print the current year at the bottom of the page....

<!--#config timefmt="%Y"-->
<small>Nick Bettison 2005 - <!--#echo var="DATE_LOCAL"--> &amp;copy; </small>;

Cool eh! The trick to watch out for is spaces in the above code, there should be no white space between

<--#echo

or the trailing

-->

**After.**

The final thing you'll want to look at is those horible default icons! You have a couple of options: You can either simply replace/over-write the default ones (on my flavour of linux they are in /var/www/icons), or you can add

AddIcon /icons/tar.png .tar

to your htaccess file telling apache to look at tar.png rather than the default tar.gif, I found some deb archives which I extracted with file-roller (rather than trying to install anything) and simply changed the ones I was going to use.... I'm very please with the final result, I think it makes a big difference.

Happy Styling One & All!