Tested with Nyxt 2 Pre-release 4
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
Let's begin with our struct definition:
- 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-associationstruct, use the
- If you want to specify your style via a file use a
style-filewith a full path to the file to load the style from.
If you want to specify your style via a URL use a
style-urlwith 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
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.
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 :-)