Skip to content

www: add persistent light and dark theme switch - #1463

Open
SoundGoof wants to merge 7 commits into
SpriteLink:masterfrom
axians:web-dark-mode
Open

SoundGoof wants to merge 7 commits into
SpriteLink:masterfrom
axians:web-dark-mode

Conversation

@SoundGoof

Copy link
Copy Markdown
Contributor

Summary

Add a light/dark theme switch next to Log out across the web interface.

  • Follow the system theme until the user chooses a preference.
  • Remember the selected theme across visits.
  • Support clicking, dragging and keyboard controls.
  • Apply dark styling to forms, tables, dialogs and prefix search/results.
  • Preserve existing light-mode styling.

Based on upstream master; contains no audit-viewer changes.

Validation

  • Checked theme switching, persistence and keyboard/drag interactions.
  • Verified standalone login and prefix pages on Debian 13.

Comment thread nipap-www/nipapwww/static/theme.js Outdated
control.setPointerCapture(event.pointerId);
});
control.addEventListener('pointerup', function (event) {
if (startX === null) return;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected '{' and instead saw 'return'.

Comment thread nipap-www/nipapwww/static/theme.js Outdated
select(document.documentElement.dataset.theme !== 'dark');
});
control.addEventListener('pointerdown', function (event) {
if (!event.isPrimary || event.button !== 0) return;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected '{' and instead saw 'return'.

Comment thread nipap-www/nipapwww/static/theme.js Outdated
var dark = preference ? preference === 'dark' : systemTheme.matches;
document.documentElement.dataset.theme = dark ? 'dark' : 'light';
var control = document.getElementById('theme-switch');
if (control) control.setAttribute('aria-checked', String(dark));

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected '{' and instead saw 'control'.

Comment thread nipap-www/nipapwww/static/theme.js Outdated
} catch (error) {
// The switch still works when browser storage is unavailable.
}
if (preference !== 'dark' && preference !== 'light') preference = null;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expected '{' and instead saw 'preference'.

This branch has not been deployed

No deployments
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.

2 participants