Add Dark/Light Mode Support with Theme Picker

[colton123e]

This PR introduces improved styling to support both dark mode and light mode, along with a theme picker in the toolbar so users can manually select their preference (defaulting to system settings).

Key Changes

SCSS (index.scss)

• Added CSS variables (--bg, --text, --border, --hl-bg, etc.) for consistent theming.
• Created light/dark mode variants (including :root[data-theme="light"] / :root[data-theme="dark"]).
• Updated highlighting styles to ensure duplicate detection highlights are readable in both themes.
• Synced output/validation colors (success/invalid/loading) with theme-aware variables.
• Adjusted navbar, tabs, and footer colors for readability across themes.

Toolbar (Toolbars.js)

• Added a ThemeSelector dropdown with System / Light / Dark options.
• Stores user preference in localStorage and updates root element data-theme.

Bullet rendering (Bullet.js)

• Updated text color handling to use Bulma’s .has-text-danger (for invalid) and theme variables (for valid text).

Index pre-load (index.html)

• Injected a small script to apply the user/system theme before React loads to prevent “flash” of wrong theme on startup.

Thesaurus panel (Thesaurus.js)

• Refactored the “+” icon color into a CSS variable (--plus-icon) instead of hardcoded value.
• Removed hard-coded light theme for the heading bar in favor of following CSS styling

Why

• Fixes readability issues in dark mode (duplicate highlights, invalid text, Thesaurus contrast).
• Provides a smoother user experience with a pre-load theme script to reduce theme “flashing.”
• Centralizes color/styling into SCSS variables for easier maintenance.

Notes

• Verified functionality locally with both light and dark system settings.
• Default startup theme is dark, but follows system/user overrides once React mounts.

Images

Original Light Mode

Original Dark Mode

Updated System/Dark Mode

Updated Light Mode