Remark42 for comments with automatically changing themes.

As some of you might already have noticed, I've finally added a commenting system to my blog.

Ghost has an own commenting system since a few versions now, but somehow I never really got in touch with it. The main reason is, that it doesn't allow anonymous comments. Since I've launched the blog, I was searching for an alternative to implement a privacy friendly commenting system into the blog and I finally found something which perfectly matches my expectations.

The Commenting Platform

I can't even remember how I found Remark42, but it immediately caught my attention.

• It's open source and selfhostable
• It has a Docker image
• It can be easily customized, through changing css for example and rebuilding the image afterwards
• It's privacy friendly
• You can comment anonymously or via an e-mail token
• I can define moderator accounts
• It's easy to implement

Installation

The installation was easily done via docker-compose and the given documentation. I've edited it to my needs and setup a new subdomain. My reverse-proxy handles the traffic and certificates.

The implementation on the blog is done through some lines of code inside my ghost-theme. I did it there to make sure the page layout is like I want it to be and the comment section is right where it should be.

Automatically Changing Light/Dark-Mode

The only thing I missed, was an option to automatically switch from light-mode to dark-mode dependent on the user's device setting. Fortunately I have a good friend, who helped me out.

The documenation shows, Remark42 offers two theme options "dark" or "light":

<script>
  var remark_config = {
    theme: 'dark',
  }
</script>

But you can also use simple javascript (yeah I'm saying simple just because I got help. I'm a js noob)

<script>
  var remark_config = {
    theme window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches ? "dark" : "light",
  }
</script>

The script checks if you are on dark-mode and the variable changes to "dark", otherwise its "light", when you load the page.

Furthermore my friend also made me a small script within seconds (He's a Pro) to apply the different themes right when you change from dark to light or otherwise, without the need of reloading my blog (my ghost theme has this as well, so I'm thankful that the comments doing it now too).

Remark42 luckily offers a function to change the theme:

window.REMARK42.changeTheme("light")

So the complete automatically switching theme section looks like this for me:

<script>
    var remark_config = {
    theme: window.matchMedia && window.matchMedia('(prefers-color-scheme:dark)').matches ? "dark" : "light",
    };
    
    window.matchMedia('(prefers-color-scheme:dark)').addEventListener('change', event => {
        const newColorScheme = event.matches ? "dark" : "light";
        window.REMARK42.changeTheme(newColorScheme);
    });
    
</script>

With this bits of javascript, Remark42 switches the themes automatically. Maybe it will help others too.