Skip to content

fix(theme): fix dark mode input styling and sidebar layout#127

Merged
steilerDev merged 1 commit into
betafrom
fix/dark-mode-inputs
Feb 19, 2026
Merged

fix(theme): fix dark mode input styling and sidebar layout#127
steilerDev merged 1 commit into
betafrom
fix/dark-mode-inputs

Conversation

@steilerDev
Copy link
Copy Markdown
Owner

Summary

  • Dark mode form inputs: Added global form element reset (font: inherit; color: inherit; background-color: transparent) and set color-scheme on <html> so native widgets (date pickers, selects, scrollbars) render in dark mode. Added explicit background-color: var(--color-bg-primary) to all input CSS modules that were missing it.
  • Sidebar restructure: Moved ThemeToggle and logout button out of <nav> into a new sidebarFooter section pushed to the bottom via margin-top: auto. Added project info (version + GitHub link) at the bottom.
  • ThemeToggle styling: Restyled with smaller font (--font-size-xs), muted opacity (0.7 → 1 on hover), and compact padding to differentiate from nav links.
  • Version injection: Added webpack DefinePlugin to inject __APP_VERSION__ from root package.json at build time, with TypeScript declaration and Jest global fallback.

Test plan

  • Toggle dark mode → all form inputs (search, date, text, select, email, password) have dark backgrounds and light text
  • Date picker widget renders in dark theme
  • Login/setup page inputs are dark-themed
  • ThemeToggle is visually distinct from nav links, positioned at sidebar bottom
  • Version string and GitHub link appear in sidebar footer
  • All CI quality gates pass (lint, typecheck, test, build)

🤖 Generated with Claude Code

- Add global form element reset (font/color inherit, transparent bg)
  so CSS Module tokens take effect on all inputs
- Set color-scheme on <html> for native widget dark mode rendering
  (date pickers, selects, scrollbars)
- Add explicit background-color to inputs in WorkItems, WorkItemDetail,
  TagManagement, Profile, and Auth page CSS modules
- Move ThemeToggle and logout out of <nav> into a new sidebar footer
- Add project info (version + GitHub link) to sidebar footer
- Inject __APP_VERSION__ via webpack DefinePlugin
- Restyle ThemeToggle with smaller font and muted opacity to
  differentiate from navigation links

Co-Authored-By: Claude frontend-developer (Opus 4.6) <noreply@anthropic.com>
@steilerDev steilerDev merged commit 6634ad3 into beta Feb 19, 2026
4 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 1.8.0-beta.22 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

steilerDev pushed a commit that referenced this pull request Feb 19, 2026
PR #127 moved the Logout button from inside <nav> to a <div> in the
sidebar footer, still within <aside>. Update AppShellPage.logout() and
sidebar-navigation.spec.ts to scope the locator to this.sidebar instead
of this.nav, fixing 56 E2E test failures across all viewports.

Co-Authored-By: Claude orchestrator (Opus 4.6) <noreply@anthropic.com>
steilerDev added a commit that referenced this pull request Feb 19, 2026
PR #127 moved the Logout button from inside <nav> to a <div> in the
sidebar footer, still within <aside>. Update AppShellPage.logout() and
sidebar-navigation.spec.ts to scope the locator to this.sidebar instead
of this.nav, fixing 56 E2E test failures across all viewports.

Co-authored-by: Claude frontend-developer (Opus 4.6) <noreply@anthropic.com>
@steilerDev steilerDev deleted the fix/dark-mode-inputs branch February 19, 2026 20:39
@github-actions
Copy link
Copy Markdown
Contributor

🎉 This PR is included in version 1.8.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants