atlas-engineer / nyxt

Nyxt - the hacker's browser.

https://nyxt-browser.com/

9.91k stars 416 forks source link

Custom stylesheets (CSS), e.g. Dark Mode support #362

Closed azzamsa closed 4 years ago

azzamsa commented 5 years ago

is there any plan to support dark mode for website ala stylish or ala dark reader ?

Since I think its a very basic need for average users.

Thanks

Ambrevar commented 5 years ago

Definitely yes!

Actually it has been possible to do it for a few days, since we've merged hooks on master.

You could use the `load-hook' to set an arbitrary CSS. I'm wondering if we need another hook that runs after the page has loaded.

Testing is welcome!

Ambrevar commented 5 years ago

Also see #102.

axgfn commented 5 years ago

I don't use dark color schemes any more, but ideally Next would somehow support the prefers-color-scheme media query. It should be possible to disable your custom CSS if the current page makes use of it.

Ambrevar commented 5 years ago

Thanks for the link!

PlasmaShift commented 5 years ago

Anouther resource worth taking a look at is https://github.com/alphapapa/solarized-everything-css There is a theme folder in there where they generate a couple of different themes like dracula and solarized.

Ambrevar commented 5 years ago

Thanks for sharing!

PlasmaShift commented 5 years ago

Found some more dark theme resources, https://github.com/RaitaroH/DarkWeb and https://openusercss.org/

aecepoglu commented 4 years ago

Seems Next does support prefers-color-scheme.

With the help of @document CSS rules and this piece of code ( https://github.com/atlas-engineer/next/issues/478#issuecomment-548615154 ) should make for a working solution.

It's just that I couldn't make @document rules work

Ambrevar commented 4 years ago

1010 is not really related to this, so I'm reopening ;)

jmercouris commented 4 years ago

Yes, it was automatically closed by GitHub :-D

jmercouris commented 4 years ago

We now have a dark mode! Please see our article at https://nyxt.atlas.engineer/article/dark-mode.org

johalun commented 4 years ago

Simple, just enable dark-mode.

How??

jmercouris commented 4 years ago

M-x =dark-mode= make sure you are running a very recent version, at most two days old.

johalun commented 4 years ago

Thanks! Looks like the linux download is too old then. nyxt-linux-2-pre-release-3-13-gccde4fba.tar.xz

jmercouris commented 4 years ago

It will be updated tomorrow :-)

kurokirasama commented 2 years ago

how to have it enable by default?

aartaka commented 2 years ago

@kurokirasama, something like

(define-configuration web-buffer
  ((default-modes (append '(dark-mode) %slot-default%))))

This adds dark-mode to the list of default modes of every buffer. When you create new buffers, they enable their default-modes (including dark-mode you added) automatically.

As a set of alternative solutions for dark mode (yes, I'm obsessed about it):

Set GTK_THEME to some dark variant before starting Nyxt. E.g. GTK_THEME=Adwaita:dark nyxt. This will force all the WebKit interfaces and dark-mode-enabled websites to render in dark.
Inject user-scripts (will be a better API after #2139 is merged), like (shameless plug) nx-dark-reader does.

kurokirasama commented 2 years ago

thanks!!