Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dark mode #440

Closed
JackZeled0n opened this issue Oct 15, 2021 · 11 comments · May be fixed by #445
Closed

Add dark mode #440

JackZeled0n opened this issue Oct 15, 2021 · 11 comments · May be fixed by #445

Comments

@JackZeled0n
Copy link

Description

Add dark mode to https://librespeed.org/

Why it should be implemented

  • Can potentially reduce eye strain and dry eyes in low-light conditions
  • There will be less ‘blue light’ emitted from your devices
  • Inclusition: Some experts say dark mode can help people with light sensitivity or visual impairment.
@gaurav879
Copy link

I would like to contribute on this.

@adolfintel
Copy link
Member

Hey, sorry for the late reply.
The code for the frontend of the librespeed.org is hosted here: https://codeberg.org/librespeed/librespeed-frontend

Keep in mind that the UI in this repository is meant to be used as an example/template so adding a dark mode here would just make the examples unnecessarily complicated to read.

@JackZeled0n
Copy link
Author

@adolfintel but we would add new css for styles and few lines of js for making the switch button.

@adolfintel
Copy link
Member

If you're so keen on adding dark mode into the main repo (which I've been opposed to for years btw 😆) I suggest you use the @media (prefers-dark-interface) media query in the CSS instead of adding a button, that way it will follow the user's system preference.

I still think you should do it only on the librespeed.org website though, the examples are already long enoguh.

@JackZeled0n
Copy link
Author

Ok 😅
Thanks @adolfintel

@EpicLPer
Copy link

Have there been any updates on this 😅
I just deployed this as a Docker container and honestly it works great, the only real downside so far is that it basically flashbangs me whenever I open the page 😆

@dougmaitelli
Copy link

I see Dark Model in the changelog for version 5.4.0, but I still don't see any option in the UI and Dark Mode does not follow system preferences

@adolfintel
Copy link
Member

@dougmaitelli it should activate automatically (or at least it does for me):

@media all and (prefers-color-scheme: dark){

image

@sstidl sstidl closed this as completed Aug 5, 2024
@dougmaitelli
Copy link

@adolfintel It does not work at all for me, can confirm I have latest version, it shows on console:
image

But it is still using light mode on both Chrome and Arc (system and browser are set to dark theme):
image

@c0f
Copy link

c0f commented Oct 27, 2024

I've got the same issue. I'm running 5.4.1 and there is no option to enable dark mode.

I've tried it in Firefox and Chrome and my browser and system are set to dark mode.

@sstidl
Copy link
Collaborator

sstidl commented Oct 27, 2024

Screenshot_20241027_160536_Chrome
Screenshot_20241027_160518_Chrome

Here how it looks on my Android Smartphone Chrome.
I can control it by setting darkmode for the whole phone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants