Adding dark mode to my website

After absolutely zero demand, I've added dark mode to my website.

The front end is all styled with Tailwind so it didn't take too long, thankfully. Add a couple of dark: classes in various Blade templates and it just works. The one issue I did have was with syntax highlighted code blocks.

The light version of the site uses a light theme for syntax highlighting. It's nice and consistent with the rest of the site, so it made sense. When you switch to dark mode though, the last thing you want is your monitor or laptop screen turning into a mini floodlight as you scroll through a blog post.

To combat this I did some work in Phiki and added "multi-theme" support. This means I can syntax highlight a code block with different themes at the same time and then use some CSS to switch between the themes.

Switch between themes using the sun/moon icon button in the header and see the code block theme change!

<?php

namespace App\Console;

use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;

class Kernel extends ConsoleKernel
{
    /**
     * Define the application's command schedule.
     */
    protected function schedule(Schedule $schedule): void
    {
        // $schedule->command('inspire')->hourly();
    }

    /**
     * Register the commands for the application.
     */
    protected function commands(): void
    {
        $this->load(__DIR__.'/Commands');

        require base_path('routes/console.php');
    }
}

I was a big fan of this functionality in Shiki, so porting it over made a tonne of sense.