Add comprehensive dark mode implementation for grpcui

[jainal09]

Summary

Implements a complete dark mode feature for grpcui with a toggle switch that allows users to seamlessly switch between light and dark themes.

All this time whenever I was working with your amazing tool, my eyes would pop out whenever I would switch tabs from dark theme of my editor to my browser to test my GRPC server. So, I thought I need dark mode ASAP!

Hope this helps others like me!

Features

• Dark mode toggle switch with accessibility features (ARIA attributes, keyboard navigation)
• localStorage persistence - remembers user preference across sessions
• System preference detection - automatically respects prefers-color-scheme media query
• Professional color scheme inspired by GitHub's dark theme
• Comprehensive styling for all UI elements including:
  • Form inputs, buttons, and controls
  • Tables, tabs, and response panels
  • Error messages and status indicators
  • jQuery UI datepicker/calendar widget
• Accessibility compliant with proper contrast ratios
• Cross-browser compatibility

Implementation Details

• Added toggle switch UI in webform-template.html
• Implemented theme management JavaScript in webform.js
• Extended CSS with comprehensive dark mode styles in webform-sample.css
• Uses CSS custom properties for maintainable theming
• Follows existing code patterns and conventions

Testing

Tested comprehensively with the KitchenSink test server to ensure all UI elements (including calendar widgets with timestamp fields) render correctly in both light and dark modes.

Screenshots

The implementation provides a professional dark theme that matches modern UI expectations while maintaining full functionality and accessibility.

Light Mode stays as it is

[jainal09]

@gpassini @dragonsinth @jhump @n0v1

Hi! I know u guys might be busy, but I would much appreciate a review as per your earliest convivence!

Cheers 🥂!

[dragonsinth]

@jainal09 honestly this is a bit much... I think we could accept a pure-CSS change using light-dark() to simply respect the browser/device preference. But the UI toggle, javascript, and cookie storage is just kind of overkill.

[jainal09]

@dragonsinth , Thank you for the feedback! I understand the concern about complexity, but
I'd like to address a key usability issue with a pure CSS-only approach.

The Problem:

• Pure CSS light-dark() only respects system preferences with no override
  capability
• So, If users want to use a different theme than their system setting, they
  have no way to do so.
• We can keep a pure css toggle without local storage but Without any persistence, users would have to manually toggle the theme
  on every page refresh, which creates a poor user experience

So, I propose we find a middle ground approach:

• We replace the complex toggle switch with a simple sun/moon icon button.
• We keep minimal localStorage (just one key) for theme preference - this is
  essential UX
• We also significantly simplify the JavaScript (remove system preference change
  listeners, complex state management)
• use light-dark() CSS as the base with simple override classes
• So, By default if there is no darkmode switch ever done, we still respect system preferences but allow
  users to override and remember their choice.

The localStorage is really the minimum viable functionality needed. Modern
web users expect their theme choice to persist, and it's just a single
localStorage key. Without it, the feature becomes more of a frustration
than a benefit.

Would this simplified approach with minimal persistence be acceptable?

[jainal09]

I made some changes and this is how it will look like if you approve it

This looks minimal and not too overkill

You can check the latest push for the new code changes. If you still dont like it I am open to make it to just system theme preference dependent. But I feel like this should address your concerns. @dragonsinth

[jainal09]

@dragonsinth just checking in. If you have any updates for me. LMK what is your thoughts on my recent changes: middle ground approach

[dragonsinth]

I'm a fan of the pure-CSS, system-settings approach.

[jainal09]

@dragonsinth done. Removed all custom js and UI button and implemented a pure CSS based darkmode that detects from system settings and applies the dark mode theme!

[dragonsinth]

LGTM!