Skip to content

Conversation

@omjamnekar
Copy link

Add Automatic Dark Mode Based on System Preference [#1502]

This update introduces automatic dark mode that responds to users’ browser or operating system settings via the CSS media query @media (prefers-color-scheme: dark).


Changes Implemented

  • Added a dark color palette (80+ CSS variables) in variables.css
  • Updated common.css and theme.css to style all UI elements for dark mode
  • The interface now automatically switches between light and dark themes based on the system/browser setting
  • Removed previous manual theme toggle button and related script (theme-toggle.js)
  • Simplified logic to rely purely on native browser behavior — no user interaction or localStorage needed

Benefits

  • automatic dark mode (no configuration required)
  • Power savings on AMOLED displays
  • Consistent experience across desktop and mobile browsers

Night time

1000137982 1000137981 1000137980

Desktop

Screenshot 2025-10-21 013722 Screenshot 2025-10-21 013750

Day time

1000138007 1000138006 Screenshot 2025-10-21 100626 Screenshot 2025-10-21 101347

@UlrichB22 UlrichB22 marked this pull request as draft October 21, 2025 16:01
@UlrichB22
Copy link
Collaborator

The change in app.py is obsolet and causes failing tests.

Remove unused import of warnings module
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 this pull request may close these issues.

3 participants