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:

• match styles based on the domain
• match styles based on a custom predicate

You can source your styles from:

• embedding them directly in your init file
• placing them in a file on your system
• downloading them from a remote URL

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:

(defstruct style-association
  (url)
  (predicate)
  (style)
  (style-file)
  (style-url))

• If you want to match based on URL, provide a URL.

• If you want to match based on a predicate, provide a predicate that accepts a single argument (the URL) and returns t or nil depending on whether the style should be applied.

• If you want to specify a style directly in your style-association struct, use the style.
• If you want to specify your style via a file use a style-file with a full path to the file to load the style from.

• If you want to specify your style via a URL use a style-url with a full path to the URL with the file to load the style from. Nyxt will download the style and cache it on your system (by default in ~/.local/share/nyxt/dark-mode-css-cache).

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.

(make-style-association
  :url "https://example.org"
  :style (cl-css:css
    '((body
       :background-color "black"))))

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.

(make-style-association
  :predicate (lambda (url) (> (length url) 10))
  :style (cl-css:css
    '((body
       :background-color "black"))))

Setting the style from a file

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

(make-style-association
  :url "https://example.org"
  :style-file "/user/local/file.css")

Setting the style from a URL

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

(make-style-association
  :url "https://example.org"
  :style-url "https://www.example.org/css-file")

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:

(define-configuration nyxt/style-mode::dark-mode
    ((nyxt/style-mode::style-associations
       (list (nyxt/style-mode::make-style-association :url "https://nyxt.atlas.engineer"
         :style (cl-css:css
                '((body
                   :background-color "gray"))))))))

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 :-)