Tested with Nyxt 2 Pre-release 4

dark-mode keeps your screen dim

dark-mode keeps your screen dim

By John Mercouris

Nyxt has a brand new dark-mode!

How to use it?

Simple, just enable dark-mode. That's it! Nyxt will do its best to attempt to configure the screen to be dark, while remaining legible and leaving images/videos unaltered.

If you want to selectively enable/disable dark-mode for different domains, you can leverage auto-mode to automatically/enable dark-mode. To find out more check out our article about auto-mode here.

Extended Customization Options

If you want to change the behavior of dark-mode, you have a couple of options:

You can either:

You can source your styles from:

In order to do this you must make a style-association struct and add it to your style-associations list of your dark-mode configuration.

Let's begin with our struct definition:

Using this struct definition let's go through some examples:

Setting the style based on URL

In the example below if we visit "https://example.org", our style will be applied.

Setting the style based on a predicate

In the example below if the length of the URL is greater than 10 characters, our style will be applied.

Setting the style from a file

In the example below, our style will be sourced from a file.

Setting the style from a URL

In the example below, our style will be sourced from a URL.

Setting our style-association-list

When we've collected our list of style-association objects, we will want to set our dark-mode to use them. To do so we can do something like the following:

The above configuration will set the background color of https://nyxt.atlas.engineer to gray.

Here are some more examples of the default Nyxt dark-mode in action!

We hope you enjoy customizing dark-mode and viewing the Internet on your terms!

Thanks for reading :-)