Skip to content

Theme/dark mode and visual refresh - #509

Open
tanc wants to merge 2 commits into
jsuto:masterfrom
tanc:theme/dark-mode-and-visual-refresh
Open

tanc wants to merge 2 commits into
jsuto:masterfrom
tanc:theme/dark-mode-and-visual-refresh

Conversation

@tanc

@tanc tanc commented Oct 3, 2026 •

Copy link
Copy Markdown

What this changes

This brings together two related pieces of work on the web UI: a correctness fix for dark mode and accessibility, and a visual refresh. It is kept as two commits so they can be reviewed or merged separately if preferred.

Part 1, dark mode and accessibility:

  • Dark mode now uses Bootstrap's native data-bs-theme attribute instead of a separate data-theme, so Bootstrap themes its own components from the --bs-* variables. The hand written override block in assets/css/piler.css is mostly gone.
  • Fix the unreadable dark mode search results header. Bootstrap does not darken the .table-secondary variant, which left light text on a light background.
  • Fix the dark on dark search placeholder, and theme alerts and the health "refresh period" strip for dark mode.
  • Give the login inputs proper accessible names. The labels used for="floatingInput" and for="floatingPassword" and did not match the input ids.
  • Name the logout link and the theme toggle, and remove a duplicate id="menu" wrapper in the common layout.

Part 2, visual refresh:

  • The top navigation used 24px text at weight 100, and headings were oversized and thin. The navigation now uses a normal 15px, headings follow one scale, and nav items are vertically centred in the header.
  • Nav links now have a rounded hover pill with padding around the icon and label.
  • The brand palette is now a set of tokens with a refined indigo primary, softer neutral surfaces and a clearly separated dark header. The health strip was stock teal and is now part of the palette.
  • Search toolbar buttons now have spacing, Search is green, and Options is much smaller.
  • The tag input is now a normal Bootstrap input, the footer no longer clips it, and "With Selected" stays on one line.
  • The resizer between the results and the preview pane now works, with a larger drag handle.
  • Wide data tables scroll inside their container on small screens.

Verification

  • Computed style checks in both themes: search header 16.35:1 in light and 10.87:1 in dark, search placeholder 6.78:1 in light and 7.99:1 in dark.
  • The login fields report labels === ["Email address"].
  • Light and dark were checked on login, search, health, users and message views, at desktop and phone widths.

Notes

  • No PHP logic, configuration or schema changes.
  • Tested against piler 1.4.9. The webui/ tree is identical between the piler-1.4.9 tag and master.

Screenshots before and after

Some examples of the changes:

Login before/after (dark)
before-login-dark
after-login-dark

Preview before/after (light)
before-preview-light
after-preview-light

Preview before/after (dark)
before-preview-dark
after-preview-dark

tanc added 2 commits October 2, 2026 11:01
Dark mode now uses Bootstrap's native data-bs-theme attribute instead of the
parallel data-theme hook. Bootstrap themes its own components (inputs,
placeholders, tables, dropdowns, modals), so most of the hand-written dark
override block is replaced by theme tokens plus a few brand overrides.

- Fix unreadable dark-mode search results header: Bootstrap does not darken
  the .table-secondary contextual variant, leaving light text on a light
  background, so its cells are now themed explicitly.
- Fix dark-mode search input placeholder (was dark-on-dark) and map alerts
  onto Bootstrap's dark subtle palette instead of light strips.
- Theme the health "refresh period" strip (was a hardcoded inline light blue).
- Accessibility: associate the login labels with their inputs (for/id
  mismatch), label the search and tag inputs, and name the logout and
  branding links.
- Markup: remove the duplicate id="menu" wrapper in the common layout.
- Coherent type scale for the top nav and page headings; nav items vertically centred in the header.
- Nav links get a padded, rounded hover pill.
- Brand palette reworked as tokens (refined indigo, softer neutral surfaces, distinct dark header); health refresh strip re-toned to match.
- Search toolbar: spaced buttons, green Search action, compact Options button.
- Tag input styled as a Bootstrap form control; footer no longer clips it.
- Pane resizer fixed (panes now take explicit heights) and given a larger grab area.
- Wide data tables scroll inside their container on small screens.
@tanc
tanc requested a review from jsuto as a code owner October 3, 2026 08:39
@tanc

tanc commented Oct 3, 2026

Copy link
Copy Markdown
Author

This is a superset of the other PR: #508
If this approach is acceptable then the other PR can be closed without merging as its included here

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.

1 participant