Skip to content

Auto light-dark mode#9916

Open
sopex wants to merge 7 commits intoopnsense:masterfrom
sopex:auto-theme
Open

Auto light-dark mode#9916
sopex wants to merge 7 commits intoopnsense:masterfrom
sopex:auto-theme

Conversation

@sopex
Copy link
Copy Markdown
Member

@sopex sopex commented Mar 10, 2026

Closes: #8264
Closes: #9805

In my testing, it works great!

Let me know of any ideas for improvement.

@AdSchellevis AdSchellevis self-assigned this Mar 10, 2026
AdSchellevis added a commit that referenced this pull request Mar 29, 2026
…nsense-dark" depending browser settings, inspired by #9916

It's a bit of an experiment, but since its so small, it shouldn't be an issue to push this to master.
The trick is actually pretty simple, symlink the relevant directories in build to the standard opnsense theme and add a theme.js override to handle the logic.
@AdSchellevis
Copy link
Copy Markdown
Member

@sopex I think this e02afc6 is basically all you need to do this. symlink 2 directories and use an existing js hook. Just let me know what you think.

@sopex
Copy link
Copy Markdown
Member Author

sopex commented Mar 30, 2026

@AdSchellevis Sorry I didn't reply earlier. For reasons that I have yet to understand the GUI collapses entirely to unformatted text. Even though this happens to multiple VMs, I am sure you have tested it so I am probably doing something wrong.

@AdSchellevis
Copy link
Copy Markdown
Member

@sopex no problem, you can test this easily using the following steps:

mkdir -p /usr/local/opnsense/www/themes/opnsense-auto/build
ln -s /usr/local/opnsense/www/themes/opnsense/build/css  /usr/local/opnsense/www/themes/opnsense-auto/build/css
ln -s /usr/local/opnsense/www/themes/opnsense/build/fonts /usr/local/opnsense/www/themes/opnsense-auto/build/fonts
ln -s /usr/local/opnsense/www/themes/opnsense/build/images /usr/local/opnsense/www/themes/opnsense-auto/build/images
mkdir /usr/local/opnsense/www/themes/opnsense-auto/build/js
curl -o /usr/local/opnsense/www/themes/opnsense-auto/build/js/theme.js https://raw.githubusercontent.com/opnsense/core/master/src/opnsense/www/themes/opnsense-auto/build/js/theme.js

@sopex
Copy link
Copy Markdown
Member Author

sopex commented Mar 30, 2026

@sopex no problem, you can test this easily using the following steps:

mkdir -p /usr/local/opnsense/www/themes/opnsense-auto/build
ln -s /usr/local/opnsense/www/themes/opnsense/build/css  /usr/local/opnsense/www/themes/opnsense-auto/build/css
ln -s /usr/local/opnsense/www/themes/opnsense/build/fonts /usr/local/opnsense/www/themes/opnsense-auto/build/fonts
ln -s /usr/local/opnsense/www/themes/opnsense/build/images /usr/local/opnsense/www/themes/opnsense-auto/build/images
mkdir /usr/local/opnsense/www/themes/opnsense-auto/build/js
curl -o /usr/local/opnsense/www/themes/opnsense-auto/build/js/theme.js https://raw.githubusercontent.com/opnsense/core/master/src/opnsense/www/themes/opnsense-auto/build/js/theme.js

Cool, my bad. I was doing make upgrade and probably something didn't want to cooperate.

My only concern with your implementation is that the flashing white before the dark-theme is loaded becomes annoying quickly.

Recording.2026-03-30.220735.mp4

@AdSchellevis
Copy link
Copy Markdown
Member

@sopex didn't this PR have a similar issue? The link replacement is quite similar to yours as far as I can see.

@sopex
Copy link
Copy Markdown
Member Author

sopex commented Mar 30, 2026

@AdSchellevis
Theoretically, it should, that's why I was looking for it in your commit :) In practice, it didn't.
Not saying that you should go my way, I am sure your commit could be improved somehow to address this. But in IMO it's too distracting right now.

PS. The opnsense logo not going to the dashboard in the video is irrelevant to this PR (an https remnant),

Recording.2026-03-30.231907.mp4

@AdSchellevis
Copy link
Copy Markdown
Member

we'll leave it on master for now, there's probably something small we can do to ease the process, not sure what yet without adding too much glue code.

@sopex
Copy link
Copy Markdown
Member Author

sopex commented Mar 31, 2026

Great! I am keeping this open too for a little while. Hopefully you won't need it.

Greelan pushed a commit to Greelan/opnsense-core that referenced this pull request Apr 5, 2026
…nsense-dark" depending browser settings, inspired by opnsense#9916

It's a bit of an experiment, but since its so small, it shouldn't be an issue to push this to master.
The trick is actually pretty simple, symlink the relevant directories in build to the standard opnsense theme and add a theme.js override to handle the logic.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants