Invidious: Light/Dark theme switch without reload
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
All 7 comments
No, please no dark theme as default.
Perflyst
on 27 Feb 2019
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.
ghost
on 28 Feb 2019
Good to have, but it can't solve the mentioned problem:
switch without reloading so that the video is still playing
dimqua
on 28 Feb 2019
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.
cloudrac3r
on 2 Mar 2019
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
BurnyBoi
on 11 Mar 2019
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.
Discookie
on 4 May 2019
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.
omarroth
on 10 May 2019
Related issues
Rb4eogrl
路
3Comments
Jtasiu
路
3Comments
dimqua
路
4Comments
Zero3K
路
4Comments
PureTryOut
路
3Comments
Most helpful comment
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 withbody.light-themeorbody.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 elementdocument.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.