feat: theming, UI polish and dark mode integrations (#157)

[Vinyl-Davyl]

Requirements for a pull request

• Unit tests related to the change have been updated
• Documentation related to the change has been updated

Description of the Change

This PR addresses the general implementation of the Dark Mode and several UI regressions and theme consistency issues. It focuses on ensuring parity between OS-level theme detection and manual theme toggling, while refining the visual style of tables, logs, inputs and more.

Key Changes

1. Dark Mode Integration, Theme Consistency & Explicit Resets

Metaflow UI is now fully themed for both light and dark modes. The implementation leverages the existing CSS variable architecture:

• Automatic Detection: Defaults to the user's OS preference (prefers-color-scheme).
• Manual Toggle: A Sun/Moon toggle has been added to the header (next to "Quick links") for explicit theme switching.
• Persistence: Theme selection is persisted to localStorage.
• UI Polish: Resolved issues where text was unreadable on hover in dark mode and fixed layout padding for the "Runs" heading on the home page (added 12px left padding).
• Light Mode Fix: Implemented a comprehensive [data-theme='light'] reset block in theme.css. This ensures that when a user manually toggles to Light Mode on a machine with a Dark OS preference, all color primitives (text, backgrounds, inputs) are explicitly reset to their light-mode hex values rather than inheriting dark-mode variables.
• Manual Toggle Parity: Added dark-mode overrides for --code-bg, --input-text-color, and --table-cell-border to the explicit [data-theme='dark'] block to ensure a consistent experience across both "Auto" and "Manual" dark modes.

2. UI Polish & Aesthetics to fit Development

• Subtle Table Borders: Replaced thick white borders in the "Runs" table and other property tables with a subtle grey (1px solid rgba(255, 255, 255, 0.1)) in dark mode, matching a more modern, premium aesthetic.
• Log Viewer Improvements: Updated the log background to a custom light-grey (#f5f5f5) in light mode and a deep charcoal (#181818) in dark mode, providing better contrast and distinguishing logs from the main page background.
• AppBar Alignment: Aligned the Dark Mode toggle button height (2.375rem) precisely with the adjacent "Quick links" button to maintain a balanced header layout.
• Parameter Table Fix: Resolved a regression where JSON parameter values in the "Details" dropdown appeared inside white boxes; they now correctly use theme-aware surface tokens.

Alternate Designs

• Component-level state: Considered adding a theme prop to every component, but selected the CSS variable + global attribute approach as it's cleaner, requires zero new component code, and is easier to maintain.

Possible Drawbacks

• Legacy browser support: Older browsers that don't support CSS variables or media queries will continue to see the default light theme.

Verification Results

The implementation has been verified for both Light/Dark modes and Auto/Manual toggling. Below are the key visual confirmations:

Issue	Verification Screenshot
Subtle Dark Borders
Input Text (Light/Dark) Compatible
Theme-Aware Logs
Header Bar Theme Toggle
Details Dropdown
DAG Graph
Debug Log Checks

Related checks

The implementation has been verified for both Light/Dark modes and Auto/Manual toggling. Below are more key visual confirmations:

Related Issues

Closes the final set of UI polish requests for the Dark Mode integration in issue #157

[Vinyl-Davyl]

cc: @saikonen @romain-intel