search

iv-org / invidious

Invidious is an alternative front-end to YouTube
https://invidious.io
GNU Affero General Public License v3.0
16.42k stars 1.85k forks source link

Light/Dark theme switch without reload #384

Closed Perflyst closed 5 years ago

Perflyst commented 5 years ago

Request to implement the dark/light switch without reloading so that the video is still playing. Maybe you can program two separate version, one is active is JS enabled and one if JS disabled.

Perflyst commented 5 years ago

No, please no dark theme as default.

ghost commented 5 years ago

How about adding a URL parameter that allows you to load website in dark mode as default? It would be also useful for me personally since I don't keep cookies.

dimqua commented 5 years ago

Good to have, but it can't solve the mentioned problem:

switch without reloading so that the video is still playing

cloudrac3r commented 5 years ago

Here's an idea of how to implement this.

Load both the light and dark stylesheet on every page, and depending on the user's current preference indicated by cookies, the server either returns <body class="light-theme"> or <body class="dark-theme">. All themed styles then start with body.light-theme or body.dark-theme, depending on which stylesheet they're in. Finally, to change the theme without reloading, all you need to do is use JS to change the class on the body element document.querySelector("body").classList.remove("light-theme") (etc) and at the same time send an XHR to the server to update your preference so it'll be loaded with the next page.

BurnyBoi commented 5 years ago

How about adding a URL parameter that allows you to load website in dark mode as default? It would be also useful for me personally since I don't keep cookies.

@zorbakus Was thinking the same thing last night: https://github.com/omarroth/invidious/issues/407

Discookie commented 5 years ago

Without javascript, the only way I found involves a hidden checkbox's :checked pseudo-class.
There's an example of this on :checked's page on MDN, and it can also be used with <select> if Invidious got more themes.

And of course, if the user has Javascript enabled, we could save the checkbox's state into a cookie, and make it persistent.

omarroth commented 5 years ago

Added with bfa488f77d592d088ffe43fc14419075b0b7c0dd. Unfortunately I wasn't able to find a satisfactory way to handle it without JS. What I ended up with is very similar to what @cloudrac3r suggested.